89 lines
1.9 KiB
CSS
89 lines
1.9 KiB
CSS
@media (min-width: 1121px) {
|
|
.hero:not(.historical-hero) .hero__content {
|
|
padding-block: 54px 60px;
|
|
padding-inline: clamp(64px, 5.5vw, 104px);
|
|
}
|
|
|
|
.hero:not(.historical-hero) .hero__brand {
|
|
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 {
|
|
justify-self: start;
|
|
width: min(440px, 100%);
|
|
min-height: 340px;
|
|
padding: 28px 32px;
|
|
}
|
|
|
|
.hero:not(.historical-hero) .logo-frame__image {
|
|
max-height: 322px;
|
|
}
|
|
|
|
.hero:not(.historical-hero) .hero__copy {
|
|
justify-self: end;
|
|
width: min(860px, 100%);
|
|
max-width: 860px;
|
|
align-content: center;
|
|
justify-items: start;
|
|
text-align: left;
|
|
transform: none;
|
|
}
|
|
|
|
.hero:not(.historical-hero) .hero__title {
|
|
max-width: none;
|
|
font-size: clamp(4.2rem, 5.2vw, 6.35rem);
|
|
line-height: 1.02;
|
|
}
|
|
|
|
.hero:not(.historical-hero) .hero__title-accent {
|
|
display: inline;
|
|
}
|
|
|
|
.hero:not(.historical-hero) .hero__text {
|
|
max-width: 68ch;
|
|
}
|
|
}
|
|
|
|
@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(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.7rem, 5.35vw, 5.15rem);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1120px) {
|
|
.hero:not(.historical-hero) .hero__copy {
|
|
transform: none;
|
|
}
|
|
}
|