.contact-page {
padding: 5% 0 60px;
}
.contact__wrap {
display: flex;
flex-direction: column;
gap: 40px;
}
.contact__header {
text-align: center;
}
.contact__title {
font-size: 54px;
font-weight: 500;
line-height: 100%;
letter-spacing: -4%;
color: var(--clr-black);
}
.contact__content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: start;
}
.contact__info-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 20px;
}
.contact__info-item {
margin: 0;
}
.contact__info-link {
display: block;
padding: 15px 20px;
color: var(--clr-black);
font-size: 18px;
font-weight: 400;
line-height: 140%;
letter-spacing: 0%;
text-decoration: none;
border-radius: var(--bor-radius-l);
transition: background-color 0.3s ease;
}
.contact__info-text {
padding: 15px 20px;
margin: 0;
color: var(--clr-black);
font-size: 18px;
font-weight: 400;
line-height: 140%;
letter-spacing: 0%;
}
.contact__info-link:hover {
background-color: var(--clr-gray);
}
.contact__map {
width: 100%;
height: 400px;
border-radius: var(--bor-radius-l);
overflow: hidden;
}
.contact__frame.map {
width: 100%;
height: 100%;
border: none;
}
@media screen and (max-width: 1024px) {
.contact-page {
padding: 120px 0 40px;
}
.contact__content {
grid-template-columns: 1fr;
}
.contact__title {
font-size: 34px;
}
}