.contacts {
    position: relative;
}

.contacts__head {
    margin-bottom: 40px;
    font-weight: 500;
    font-size: var(--fluid-40-20);
    line-height: 110%;
}

.contacts__row:not(:last-child) {
    margin-bottom: 40px;
}

.contacts .contacts-grid {
    display: grid;
    gap: 40px;
    grid-template-columns: 1fr 1fr 1fr;
}

.contacts .contacts-grid__col {
    border-radius: var(--main-chamfer);
    padding: 32px;
    background: var(--fon);
    font-weight: 400;
    font-size: var(--fluid-18-15);
    line-height: 150%;
}

.contacts .contacts-grid__col:last-child {
    background: var(--fon-zelenyy);
}

.contacts .contacts-title {
    font-weight: 600;
    font-size: var(--fluid-20-16);
    line-height: 120%;
    margin-bottom: 4px;
    margin-top: 24px;
}

.contacts .contacts-title:first-child {
    margin-top: 0;
}

.contacts .contacts-title:has(+ .site-nav-social), .contacts .contacts-title:has(+ .btn-color) {
    margin-bottom: 16px;
}

.contacts .contacts-list {
    display: grid;
    gap: 10px;
}

.contacts .contacts-list a {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    gap: 5px;
}

.contacts .contacts-list a[href^="tel:"]::before {
    content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 2.22222C0 9.83148 6.16852 16 13.7778 16C14.1211 16 14.4615 15.9874 14.7985 15.9628C15.1852 15.9344 15.3786 15.9203 15.5546 15.8189C15.7004 15.735 15.8387 15.5862 15.9118 15.4347C16 15.2517 16 15.0383 16 14.6115V12.1073C16 11.7484 16 11.5689 15.9409 11.4151C15.8888 11.2792 15.804 11.1582 15.6941 11.0627C15.5697 10.9547 15.4011 10.8933 15.0638 10.7707L12.2133 9.73413C11.8209 9.59143 11.6247 9.52008 11.4385 9.53219C11.2743 9.54287 11.1164 9.59889 10.9822 9.69402C10.83 9.8019 10.7226 9.98093 10.5077 10.339L10.5077 10.339L9.77778 11.5556C7.42234 10.4888 5.5128 8.57678 4.44444 6.22222L5.66101 5.49229C6.01907 5.27745 6.1981 5.17003 6.30598 5.01783C6.40111 4.88363 6.45713 4.72566 6.46781 4.56151C6.47992 4.37535 6.40857 4.17913 6.26587 3.78671L5.22932 0.936188C5.10667 0.598899 5.04534 0.430252 4.93726 0.305864C4.84179 0.19599 4.7208 0.111243 4.58491 0.0590678C4.43107 0 4.25162 0 3.89273 0H1.38846C0.96167 0 0.748276 0 0.565315 0.0882247C0.41378 0.161295 0.265011 0.299568 0.181069 0.445362C0.0797174 0.621392 0.0655565 0.814772 0.0372347 1.20153C0.0125563 1.53854 0 1.87892 0 2.22222Z' fill='%2352AEC7' /%3E%3C/svg%3E");
}

.contacts .contacts-list a[href^="mailto:"]::before {
    content: url("data:image/svg+xml,%3Csvg width='16' height='12' viewBox='0 0 16 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.0495854 1.49783C0.25173 0.640213 1.04822 0 2 0H14C14.9518 0 15.7483 0.640213 15.9504 1.49783L8 6.17647L0.0495854 1.49783ZM0 2.59719V9.4376L5.80319 6.01224L0 2.59719ZM6.7614 6.57612L0.191871 10.4538C0.512604 11.1051 1.20168 11.5556 2 11.5556H14C14.7983 11.5556 15.4874 11.1051 15.8081 10.4538L9.2386 6.57612L8 7.30501L6.7614 6.57612ZM10.1968 6.01224L16 9.4376V2.59719L10.1968 6.01224Z' fill='%2352AEC7' /%3E%3C/svg%3E");
}

.contacts .contacts-list a {
    transition: color var(--animation-duration) var(--timing-func);
}

.ya-map {
    position: relative;
    aspect-ratio: 2.9423;
    height: 100%;
    overflow: hidden;
    border-radius: var(--main-chamfer);
}

.ya-map__wrapper {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.ya-map__wrapper > * {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

.rs-contacts {
    padding-top: 80px;
}

@media (min-width: 1023.98px) {
    .contacts .contacts-grid__col._span-2 {
        grid-column: span 2;
    }
}

@media (max-width: 1023.98px) {
    .contacts__head {
        margin-bottom: 16px;
    }

    .contacts .contacts-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .contacts .contacts-grid__col {
        padding: 16px;
    }

    .ya-map {
        aspect-ratio: 1;
    }
}

@media (max-width: 767.98px) {
    .rs-contacts {
        padding-top: 24px;
    }
}

@media (any-hover: hover) {
    .contacts .contacts-list a:hover {
        color: var(--primary-clr);
    }
}