diff --git a/frontend/assets/css/hero-header-compact.css b/frontend/assets/css/hero-header-compact.css index fc3b05f..ff96bc4 100644 --- a/frontend/assets/css/hero-header-compact.css +++ b/frontend/assets/css/hero-header-compact.css @@ -1,29 +1,37 @@ @media (min-width: 1121px) { .hero:not(.historical-hero) .hero__content { padding-block: 54px 60px; - padding-inline: clamp(48px, 5vw, 88px); + padding-inline: clamp(64px, 5.5vw, 104px); } .hero:not(.historical-hero) .hero__brand { - grid-template-columns: minmax(300px, 340px) minmax(0, 1fr); - column-gap: clamp(150px, 14vw, 260px); + width: 100%; max-width: 1420px; margin: 0 auto; + display: grid; + grid-template-columns: minmax(380px, 440px) minmax(0, 1fr); + column-gap: clamp(80px, 7vw, 132px); + align-items: center; } .hero:not(.historical-hero) .logo-frame { - width: min(370px, 100%); - min-height: 300px; - padding: 26px 30px; + justify-self: start; + width: min(440px, 100%); + min-height: 340px; + padding: 28px 32px; } .hero:not(.historical-hero) .logo-frame__image { - max-height: 292px; + max-height: 322px; } .hero:not(.historical-hero) .hero__copy { - max-width: 980px; + justify-self: end; + width: min(860px, 100%); + max-width: 860px; align-content: center; + justify-items: start; + text-align: left; transform: none; } @@ -43,16 +51,38 @@ } @media (min-width: 1121px) and (max-width: 1380px) { + .hero:not(.historical-hero) .hero__content { + padding-inline: clamp(48px, 4.5vw, 72px); + } + .hero:not(.historical-hero) .hero__brand { - grid-template-columns: minmax(260px, 310px) minmax(0, 1fr); - column-gap: clamp(112px, 9vw, 150px); + grid-template-columns: minmax(320px, 380px) minmax(0, 1fr); + column-gap: clamp(54px, 5vw, 86px); + } + + .hero:not(.historical-hero) .logo-frame { + width: min(380px, 100%); + min-height: 306px; + } + + .hero:not(.historical-hero) .logo-frame__image { + max-height: 288px; } .hero:not(.historical-hero) .hero__copy { + width: min(760px, 100%); + max-width: 760px; + justify-self: end; transform: none; } .hero:not(.historical-hero) .hero__title { - font-size: clamp(3.6rem, 5.5vw, 5.1rem); + font-size: clamp(3.7rem, 5.35vw, 5.15rem); + } +} + +@media (max-width: 1120px) { + .hero:not(.historical-hero) .hero__copy { + transform: none; } } diff --git a/frontend/assets/css/historico.css b/frontend/assets/css/historico.css index edd5b0d..a7f4ab1 100644 --- a/frontend/assets/css/historico.css +++ b/frontend/assets/css/historico.css @@ -63,6 +63,92 @@ overflow-wrap: anywhere; } +@media (min-width: 1121px) { + .historical-hero__layout--registry { + width: 100%; + max-width: 1420px; + margin: 0 auto; + display: grid; + grid-template-columns: minmax(380px, 440px) minmax(0, 1fr); + column-gap: clamp(80px, 7vw, 132px); + align-items: center; + } + + .historical-hero__layout--registry .historical-logo-frame { + justify-self: start; + width: min(440px, 100%); + min-height: 340px; + padding: 28px 32px; + } + + .historical-hero__layout--registry .logo-frame__image { + max-height: 322px; + } + + .historical-hero__layout--registry .historical-hero__copy { + justify-self: end; + width: min(860px, 100%); + max-width: 860px; + align-content: center; + justify-items: start; + text-align: left; + } + + .historical-hero__layout--registry .historical-hero__title { + max-width: none; + font-size: clamp(4.2rem, 5.2vw, 6.35rem); + line-height: 1.02; + } + + .historical-hero__layout--registry .historical-hero__text { + max-width: 68ch; + } + + .historical-hero__layout--registry .historical-selector { + max-width: 760px; + } +} + +@media (min-width: 1121px) and (max-width: 1380px) { + .historical-hero__layout--registry { + grid-template-columns: minmax(320px, 380px) minmax(0, 1fr); + column-gap: clamp(54px, 5vw, 86px); + } + + .historical-hero__layout--registry .historical-logo-frame { + width: min(380px, 100%); + min-height: 306px; + } + + .historical-hero__layout--registry .logo-frame__image { + max-height: 288px; + } + + .historical-hero__layout--registry .historical-hero__copy { + width: min(760px, 100%); + max-width: 760px; + justify-self: end; + } + + .historical-hero__layout--registry .historical-hero__title { + font-size: clamp(3.7rem, 5.35vw, 5.15rem); + } +} + +@media (max-width: 1120px) { + .historical-hero__layout--registry { + max-width: none; + } + + .historical-hero__layout--registry .historical-hero__copy, + .historical-hero__layout--registry .historical-hero__title, + .historical-hero__layout--registry .historical-hero__text { + width: auto; + max-width: none; + justify-self: stretch; + } +} + .historical-map-hero { position: relative; overflow: hidden;