.socialBanner {
    margin: 0 calc(50% - 50vw);
    background-color: #f2f2f2;
}

.socialBanner>.container {
    padding-right: 35px;
    padding-left: 35px;
    position: relative;
    display: flex;
    align-items: center;
}

.socialBanner__img {
    display: block;
    max-width: 570px;
    width: 100%;
}

.socialBanner__img.mobile {
    display: none;
}

.socialBanner__content {
    padding: 16px 0 32px;
    width: calc(100% - 570px);
}

.socialBanner__title {
    margin: 0;
    margin-bottom: 15px;
    font-family: 'Inter Variable';
    font-size: 32px;
    line-height: normal;
    color: #333;
    text-align: left;
    letter-spacing: unset;
}

.socialBanner__block {
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #333;
}

.socialBanner__price {
    font-family: 'Inter Variable';
    font-weight: bold;
    font-size: 32px;
    line-height: normal;
    color: #df8844;
}

.socialBanner__descr {
    margin: 0 20px;
    font-family: 'Inter Variable';
    font-size: 16px;
    line-height: normal;
    color: #333;
}

.socialBanner__descr .nowrap {
    white-space: nowrap !important;
}

.socialBanner__btn {
    padding: 0;
    cursor: pointer;
    border: none;
    background-color: transparent;
    width: 36px;
    height: 19px;
    background-image: url('https://img.danila-master.ru/uploads/articlesImages/pages/classical-monuments/ready-arrow.svg?v=1');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 1s ease-in-out;
}

.socialBanner__btn.active {
    transform: rotateX(-180deg);
    transition: transform 1s ease-in-out;
}

.socialBanner__box {
    margin: 20px 0;
    position: relative;
    height: 160px;
    overflow: hidden;
}

p.socialBanner__text {
    margin: 0;
    position: absolute;
    font-family: 'Inter Variable';
    font-size: 16px;
    line-height: normal;
    color: #333;
    transform: translateY(-100%);
    transition: transform 1s ease-in-out;
}

p.socialBanner__text.active {
    transform: translateY(0);
    transition: transform 1s ease-in-out;
}

.socialBanner__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    transition: transform 1s ease-in-out;
}

.socialBanner__list.active {
    transform: translateY(calc(100% + 50px));
    transition: transform 1s ease-in-out;
}

.socialBanner__list::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 11px;
    bottom: 0;
    width: 1px;
    background-color: #333;
}

.socialBanner__item {
    padding-left: 30px;
    position: relative;
    font-family: 'Inter Variable';
    font-size: 16px;
    line-height: normal;
    color: #333;
}

.socialBanner__item .nowrap {
    white-space: nowrap !important;
}

.socialBanner__item::before {
    content: '';
    position: absolute;
    z-index: 1;
    left: 0;
    top: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #333;
}

.socialBanner__item:last-child::after {
    content: '';
    position: absolute;
    left: 2px;
    bottom: 0;
    top: 10px;
    width: 3px;
    background-color: #f2f2f2;
}

.socialBanner__wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.socialBanner__button {
    position: relative;
    padding: 15px 30px;
    width: fit-content;
    background-color: #333;
    border-radius: 7px;
    border: none;
    font-family: 'Inter Variable';
    font-size: 16px;
    line-height: normal;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .3s ease-in-out;
}

.socialBanner__button:hover {
    background-color: #df8844;
    text-decoration: none;
    transition: background-color .3s ease-in-out;
}

.socialBanner__button:active {
    background-color: #333;
    transition: background-color .3s ease-in-out;
}

p.socialBanner__txt {
    margin: 0;
    position: relative;
    font-family: 'Inter Variable';
    font-size: 14px;
    line-height: normal;
    color: #333;
    text-indent: 18px;
}

p.socialBanner__txt::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 15px;
    height: 15px;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='20' viewBox='0 0 16 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.99994 17.4074C4.42128 17.4074 1.50928 14.3084 1.50928 10.5001C1.50928 6.69169 4.42128 3.59277 7.99994 3.59277C11.5786 3.59277 14.4906 6.69169 14.4906 10.5001C14.4906 14.3084 11.5786 17.4074 7.99994 17.4074ZM7.99994 3.8198C4.53861 3.8198 1.72261 6.81656 1.72261 10.5001C1.72261 14.1836 4.53861 17.1803 7.99994 17.1803C11.4613 17.1803 14.2773 14.1836 14.2773 10.5001C14.2773 6.81656 11.4613 3.8198 7.99994 3.8198Z' fill='%23333333'/%3E%3Cpath d='M7.99996 14.9328C7.80049 14.9328 7.62983 14.8567 7.48796 14.7046C7.34503 14.5525 7.27356 14.3709 7.27356 14.1598C7.27356 13.9486 7.34503 13.7659 7.48796 13.6138C7.63089 13.4617 7.80156 13.3856 7.99996 13.3856C8.19836 13.3856 8.37009 13.4617 8.51303 13.6138C8.65596 13.7659 8.72743 13.9475 8.72743 14.1598C8.72743 14.3005 8.69436 14.4288 8.62823 14.5468C8.56209 14.6638 8.47463 14.758 8.36583 14.8284C8.25703 14.8987 8.13543 14.9339 7.99996 14.9339V14.9328ZM8.54929 6.06738L8.46823 12.3901H7.53169L7.45063 6.06738H8.54823H8.54929Z' fill='black'/%3E%3C/svg%3E");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

@media screen and (max-width: 1130px) {
    .socialBanner__wrapper {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media screen and (max-width: 1024px) {
    .socialBanner__img {
        max-width: 400px;
    }

    .socialBanner__content {
        width: calc(100% - 400px);
    }
}

@media screen and (max-width: 900px) {
    .socialBanner__img {
        display: none;
    }

    .socialBanner__img.mobile {
        /* display: block; */
        margin: 0 auto 20px;
    }

    .socialBanner__content {
        width: 100%;
    }

    .socialBanner__title {
        text-align: center;
    }

    .socialBanner__block {
        justify-content: center;
    }

    .socialBanner__box {
        margin: 20px auto;
        height: auto;
    }

    p.socialBanner__text {
        margin-bottom: 20px;
        display: none;
        position: static;
        transform: translateY(0);
    }

    p.socialBanner__text.active {
        display: block;
    }

    .socialBanner__list.active {
        transform: translateY(0);
    }

    .socialBanner__item {
        padding-left: 20px;
    }
}

@media screen and (max-width: 768px) {
    .socialBanner>.container {
        padding-right: 15px;
        padding-left: 15px;
    }
}

@media screen and (max-width: 576px) {
    .socialBanner__content {
        padding: 20px 0;
    }

    .socialBanner__title {
        font-size: 25px;
    }
}

@media screen and (max-width: 480px) {
    .socialBanner__price {
        font-size: 27px;
    }

    .socialBanner__descr {
        margin: 0 auto;
        width: min-content;
    }

    .socialBanner__btn {
        margin-left: auto;
    }

    .socialBanner__button {
        width: 100%;
    }
}