.contacts-banner {
position: relative;
display: flex;
align-items: flex-end;
min-height: 230px;
background: var( --color-dark-bg );
overflow: hidden;
}
.contacts-banner__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
} .contacts-banner::after {
content: "";
position: absolute;
inset: 0;
background: rgba( 10, 10, 10, 0.45 );
}
.contacts-banner__inner {
position: relative;
z-index: 1; }
.contacts-banner__title {
font-family: var( --font-heading );
font-weight: 700;
font-size: clamp( 2.25rem, 5vw, 3.75rem );
color: #ffffff;
margin: 0;
} .contacts-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: stretch;
margin-block: 40px 60px;
} .contacts-split__content {
display: flex;
flex-direction: column;
justify-content: center;
} .contacts-email {
margin-bottom: 20px;
}
.contacts-email__link {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var( --font-ui ); font-weight: 600;
color: var( --color-dark );
text-decoration: none;
border-bottom: 2px solid var( --color-primary );
transition: color 0.2s ease;
}
.contacts-email__link:hover {
color: var( --color-primary );
}
.contacts-email__icon {
flex: none;
width: 20px;
height: 20px;
}
.contacts-split__text {
color: var( --color-text );
}
.contacts-split__text > *:first-child {
margin-top: 0;
}
.contacts-split__text > *:last-child {
margin-bottom: 0;
} .contacts-split__media {
position: relative;
min-height: 460px;
}
.contacts-split__media img,
.contacts-split__placeholder {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.contacts-split__placeholder {
background: var( --color-primary-light );
} @media (max-width: 1024px) {
.contacts-banner {
min-height: 100px;
}
.contacts-split {
gap: 24px;
}
.contacts-split__media {
min-height: 400px;
}
} @media (max-width: 767px) {
.contacts-banner {
min-height: 100px;
}
.contacts-split {
grid-template-columns: 1fr;
margin-block: 24px 40px;
} .contacts-split__media {
min-height: 0;
aspect-ratio: 4 / 3;
}
}