diff --git a/src/style/pages/_about.scss b/src/style/pages/_about.scss index ccdbad5..346f458 100644 --- a/src/style/pages/_about.scss +++ b/src/style/pages/_about.scss @@ -3,10 +3,10 @@ ** Introduction */ &__introduction { - padding: clamp(48px, 10vw, 80px) 0 138px; + padding: clamp(48px, 10vw, 80px) 0 136px; @include bp (sm) { - padding: clamp(80px, 7vw, 128px) 0 clamp(200px, 20vw, 360px); + padding: clamp(64px, 7vw, 128px) 0 clamp(200px, 20vw, 360px); } // Section title @@ -27,6 +27,9 @@ margin-bottom: 48px; @include bp (sm) { + grid-column: 3 / -3; + } + @include bp (md) { grid-column: 3 / span 12; grid-row: 2; align-self: baseline; @@ -46,6 +49,9 @@ color: $color-tertiary; @include bp (sm) { + grid-column: 3 / span 14; + } + @include bp (md) { grid-column: 17 / span 6; grid-row: 2; align-self: baseline; @@ -71,10 +77,10 @@ */ &__creation { background: #fff; - padding-bottom: 160px; + padding-bottom: clamp(120px, 10vw, 160px); @include bp (sm) { - padding-bottom: 240px; + padding-bottom: clamp(160px, 20vw, 240px); } // Figures @@ -99,11 +105,10 @@ margin-top: 16px; color: $color-gray; text-align: right; - font-size: rem(12px); + line-height: 1.55; @include bp (sm) { margin-top: 24px; - font-size: rem(14px); } } @@ -117,7 +122,6 @@ @include bp (sm) { grid-column: 8 / -2; margin: -10vw 0 clamp(48px, 7vw, 88px); - // margin: -10vw 0 clamp(80px, 10vw, 128px); } figcaption { @@ -158,8 +162,8 @@ h2 { grid-column: 1 / -2; max-width: 240px; - line-height: 1.2; margin-bottom: 16px; + line-height: 1.2; @include bp (sm) { grid-column: 3 / span 10; @@ -170,8 +174,8 @@ // Large text .heading { grid-column: 1 / -1; - color: $color-primary-tertiary20; margin-bottom: 72px; + color: $color-primary-tertiary20; :global(strong) { color: $color-lilas-bright; @@ -191,6 +195,9 @@ align-self: center; @include bp (sm) { + grid-column: 4 / span 8; + } + @include bp (md) { grid-column: 9 / span 6; } } @@ -202,24 +209,24 @@ grid-row: 4; @include bp (sm) { + grid-column: 13 / -3; + } + @include bp (md) { grid-column: 16 / span 7; } } - .portrait-photo__caption { grid-column: 3 / -1; grid-row: 5; - color: $color-gray; + margin-top: 16px; margin-bottom: 40px; text-align: right; - font-size: rem(12px); - margin-top: 16px; + color: $color-gray; + line-height: 1.55; - @include bp (md) { + @include bp (sm) { grid-column: 16 / span 7; - margin: 0; - font-size: rem(16px); - margin-top: 24px; + margin: 24px 0 0; } } } @@ -233,17 +240,20 @@ // Poster image :global(picture) { - height: auto; - overflow: hidden; - border-radius: 8px; grid-column: 1 / -1; + height: 100vw; + max-height: 486px; + overflow: hidden; margin-top: -64px; - height: 486px; + margin-bottom: 72px; + border-radius: 8px; @include bp (sm) { grid-column: 3 / -6; - margin-top: -100px; height: auto; + max-height: none; + margin-top: -96px; + margin-bottom: clamp(56px, 7vw, 88px); } @include bp (md) { border-radius: 12px; @@ -260,11 +270,9 @@ h2 { grid-column: 1 / -1; line-height: 1; - margin-top: 72px; @include bp (sm) { grid-column: 3 / 7; - margin-top: 88px; } } :global(p) { @@ -310,13 +318,30 @@ // Showcase image &__showcase { + padding: 0; + + @include bp (sm) { + overflow: hidden; + height: 0; + padding-bottom: 120%; + } + :global(picture) { grid-column: 1 / -1; + + @include bp (sm) { + display: flex; + justify-content: center; + } } :global(img) { display: block; width: 100%; height: auto; + + @include bp (sm) { + width: 130%; + } } } @@ -330,7 +355,7 @@ margin-top: 48px; @include bp (sm) { - margin: 96px 0 0; + margin-top: clamp(48px, 7vw, 96px); } & > .container { @@ -363,9 +388,9 @@ } } p { + max-width: 320px; color: $color-tertiary; font-weight: 300; - max-width: 320px; @include bp (sm) { max-width: none; @@ -444,11 +469,6 @@ @include bp (sm) { margin-bottom: clamp(80px, 10vw, 128px); } - // margin-top: -64px; - - @include bp (sm) { - // margin-top: -120px; - } .container-wide { overflow: hidden;