.contacts {
    position: relative;
    padding: 72px 0;
}

.contacts__title {
    margin-bottom: 45px;
    font-size: 35px;
    color: #000;
    font-family: "montserrat-400";
    font-weight: 700;
}

.contacts__blocks {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.contacts__blocks--first {
    padding-bottom: 65px;
    margin-bottom: 55px;
    border-bottom: 1px solid #C9C2D2;
}

.contacts__item a {
    font-size: 30px;
    font-weight: 600;
    line-height: 120%;
    font-family: "montserrat-400";
}

.contacts__item-note {
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
}

.contacts__social {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contacts__social a {
    padding: 15px 20px;
    font-size: 16px;
    line-height: 140%;
    width:100%;
    display: flex;
    gap: 15px;
    align-items: center;
    border-radius: 12px;
    border: 2px solid #482973;
    max-width: 222px;
}

.contacts__social a:hover,
.contacts__social a:active,
.contacts__social a:focus {
    color: #482973;
    box-shadow: inset 0 0 0 1px #482973;
}

.contacts__item {
    line-height: 160%; /* 35.2px */
    font-size: 22px;
    font-weight: 400;
}

.contacts__item-title {
    color: #000;
    font-family: "montserrat-400";
    font-style: normal;
    font-weight: 700;
}

.contacts__item-line {
    margin-bottom: 20px;
}

@media (min-width: 768px){
    .contacts__social {
        flex-direction: row;
    }

    .contacts__blocks {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .contacts__item {
        flex: 0 0 calc(50% - 30px);
    }

    .contacts__item--big {
        flex: 0 0 100%;
    }

    .contacts__item--centered {
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
}

@media (min-width: 1024px){
    .contacts {
        padding: 90px 0 150px 0;
    }

    .contacts:before {
        position: absolute;
        height: 619px;
        width: 387px;
        filter: invert(79%) sepia(58%) saturate(6499%) hue-rotate(2deg) brightness(107%) contrast(104%);
        content: '';
        z-index: -1;
        top: 50%;
        right: 0;
        background-repeat: no-repeat;
        background-image: url('../img/svg/base-elem.svg');
        background-position: left center;
        background-size: auto 100%;
        transform: translate(0, -50%);
    }

    .contacts__item--big {
        flex: 0 0 calc(50% - 30px);
    }

    .contacts__item-columns {
        display: flex;
        gap: 30px;
        justify-content: space-between;
    }

    .contacts__item-line {
        flex: 0 0 calc(50% - 30px);
        min-width: 130px;
    }
}