114 lines
2 KiB
CSS
114 lines
2 KiB
CSS
.hero {
|
|
--empty-space: 11.9rem;
|
|
background-color: var(--color-beige-light);
|
|
--padding-vertical: calc(var(--space-m) / 1.5);
|
|
display: grid;
|
|
grid-template-columns: 1.6fr 3fr;
|
|
column-gap: calc(var(--space-m) / 1.5);
|
|
height: calc(100vh - var(--empty-space));
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero__text {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
overflow: auto;
|
|
}
|
|
|
|
.hero__text h2 {
|
|
font-size: max(4.167vw, 3rem);
|
|
width: 100%;
|
|
margin-bottom: var(--padding-vertical);
|
|
}
|
|
|
|
.hero__text h2.big {
|
|
font-size: var(--font-size-xxl);
|
|
}
|
|
|
|
.hero__text h3 {
|
|
/* color: var(--color-season); */
|
|
font-size: var(--font-size-h2);
|
|
}
|
|
.hero__text h3:nth-child(odd) {
|
|
text-align: end;
|
|
}
|
|
|
|
.hero__text p:not(:last-of-type) {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.hero__text p:first-of-type {
|
|
margin-top: var(--padding-vertical);
|
|
}
|
|
|
|
.hero__link {
|
|
font-weight: bold;
|
|
margin-top: 0.5rem;
|
|
}
|
|
.hero__link::before {
|
|
display: inline-block;
|
|
content: "→";
|
|
margin-right: 1rem;
|
|
transform: translateX(0rem);
|
|
transition: all 0.3s var(--curve-quick-slow);
|
|
}
|
|
|
|
.hero__link:hover:before {
|
|
margin-right: 2rem;
|
|
}
|
|
|
|
.hero .image-wrapper {
|
|
height: 100%;
|
|
}
|
|
|
|
.hero__image {
|
|
height: calc(100vh - var(--empty-space) - 2 * var(--padding-vertical));
|
|
}
|
|
|
|
.hero__image picture {
|
|
height: 100%;
|
|
}
|
|
.hero__image img {
|
|
object-fit: cover;
|
|
}
|
|
|
|
.hero__image:hover .image-cover {
|
|
opacity: 0;
|
|
}
|
|
|
|
@media screen and (max-width: 1085px) {
|
|
.hero__text h2,
|
|
.hero__text h3 {
|
|
text-align: left !important;
|
|
}
|
|
.hero__text h2 {
|
|
font-size: var(--font-size-xl);
|
|
}
|
|
.hero__text h2.big {
|
|
font-size: calc(var(--font-size-xxl) / 1.2);
|
|
text-align: left;
|
|
}
|
|
|
|
.hero__text p:first-of-type {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.hero__link {
|
|
position: relative;
|
|
display: block;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.hero {
|
|
padding: calc(var(--padding-vertical) / 1.2) var(--space-m) 2rem
|
|
var(--space-m) !important;
|
|
border-bottom: none !important;
|
|
height: auto;
|
|
}
|
|
|
|
.hero__image {
|
|
height: 60vw;
|
|
}
|
|
}
|