diff --git a/index.html b/index.html index 810fa03..d54b152 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@ href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600&display=swap" rel="stylesheet" > - +
diff --git a/styles.css b/styles.css index 5eb3f20..f920e12 100644 --- a/styles.css +++ b/styles.css @@ -310,7 +310,6 @@ ul { width: 100%; min-height: 12rem; padding: clamp(1.5rem, 4vw, 3rem); - border: 1px solid rgba(14, 14, 14, 0.5); background: var(--color-photography-placeholder); color: var(--color-noel-black); text-align: center; @@ -387,12 +386,16 @@ ul { .philosophy-image-figure { grid-column: 1 / 5; + grid-row: 1; + min-width: 0; } .editorial-statement-title { - grid-column: 5 / 9; + grid-column: 5 / 10; + grid-row: 1; + min-width: 0; font-family: var(--font-family-editorial); - font-size: clamp(2.4rem, 4vw, 4.5rem); + font-size: clamp(2.4rem, 4vw, 4.15rem); font-weight: 400; letter-spacing: 0.035em; line-height: 1.03; @@ -406,7 +409,9 @@ ul { } .philosophy-supporting-copy { - grid-column: 9 / 13; + grid-column: 10 / 13; + grid-row: 1; + min-width: 0; max-width: 32rem; color: var(--color-softened-black); font-size: 0.95rem; @@ -846,6 +851,29 @@ ul { text-transform: uppercase; } +@media (min-width: 64.0625rem) and (max-width: 80rem) { + .philosophy-content-grid { + align-items: start; + } + + .philosophy-image-figure { + grid-column: 1 / 6; + grid-row: 1 / span 2; + } + + .editorial-statement-title { + grid-column: 6 / 13; + grid-row: 1; + } + + .philosophy-supporting-copy { + grid-column: 6 / 13; + grid-row: 2; + max-width: 32rem; + margin-top: 2rem; + } +} + @media (max-width: 64rem) { .homepage-hero-section { min-height: auto; @@ -870,16 +898,19 @@ ul { .philosophy-image-figure { grid-column: 1 / 6; + grid-row: 1 / span 2; } .editorial-statement-title { grid-column: 6 / 13; + grid-row: 1; } .philosophy-supporting-copy { grid-column: 6 / 13; + grid-row: 2; max-width: 32rem; - margin-top: 1rem; + margin-top: 2rem; } .approach-supporting-copy {