@media screen and (max-width: 1917.98px) {

    body,
    html {
        align-items: flex-start;
    }

    .card__wrapper {
        flex-direction: row;
        max-width: 1120px;
    }

    .card {
        flex-direction: column;
        width: 50%;
        padding: 140px 16px 16px 16px;
    }

    .card--market::before {
        top: -60px;
        left: 0;
        width: 540px;
        height: 336px;
        background-size: 411px 200px;
        background-position: center top;
    }

    .card--configurator::before {
        left: 0;
        top: -45px;
        width: 540px;
        height: 336px;
        background-size: 341px 180px;
        background-position: center top;
    }

    .card__text-block {
        width: 100%;
    }

    .card__buttons {
        flex-direction: row;
        width: 100%;
    }

    .card__button {
        width: 50%;
    }

    .text--market {
        width: 60%;
    }

    .container {
        padding: 0;
        padding-top: 37px;
        position: relative;
    }

    .video {
        left: 310px;
        top: calc(100% + 10px);
    }

    .video__bubbles {
        flex-direction: row;
        min-height: 200px;
        height: auto;
        min-width: unset;
        width: 500px;
    }

    .modal {
        padding-bottom: 40px;
    }
}

@media screen and (max-width: 1271.98px) {
    .container {
        gap: 60px;
    }

    .card__wrapper {
        flex-direction: column;
        max-width: 660px;
        min-width: auto;
    }

    .card {
        width: 100%;
    }

    .card--market::before {
        width: 660px;
    }

    .card__button {
        min-width: 309px;
    }

    .card--configurator::before {
        width: 660px;
        background-size: 382px 200px;
    }

    .card__title {
        font-size: 32px;
    }

    .card__text {
        font-size: 20px;
    }

    .video{
        left: 0;
        top: -40px;
        position: relative;
    }
}

@media screen and (max-width: 831.98px) {
    html,
    body {
        align-items: flex-start;
    }

    .container {
        padding: 20px 16px 40px 16px;
        gap: 40px;
    }

    .card__wrapper {
        width: 100%;
        max-width: 500px;
    }

    .card {
        padding: 24px 16px 16px 16px;
        min-width: 342px;
        max-width: 380px;
    }

    .card__button{
        width: 50%;
        min-width: unset;
    }

    .card--configurator {
        height: 273px;
    }

    .card--market {
        height: 301px;
    }

    .card--market::before {
        left: 0;
        top: -30px;
        width: 100%;
        height: 300px;
        background-size: 325px 142px;
        background-position: center top;
    }

    .card--configurator::before {
        left: 0;
        top: -50px;
        width: 100%;
        height: 273px;
        background-size: 283px 148px;
        background-position: center top;
    }

    .card__title {
        font-size: 16px;
    }

    .card__text {
        font-size: 12px;
    }

    .text--market {
        width: 100%;
    }

    .video {
        top: -30px;
        position: relative;
    }

    .container {
        gap: 45px;
        padding-top: 20px;
    }

    .video__bubbles {
        flex-direction: row;
        min-height: 140px;
        height: auto;
        min-width: unset;
        width: 100%;
        max-width: 375px;
        gap: 15px;
    }

    .info {
        gap: 20px;
    }

    .video__bubble {
        width: 90px;
        height: 90px;
    }

    .video__bubble.is-active {
        width: 140px;
        height: 140px;
    }

    .modal__close {
        display: none;
    }
}

@media screen and (max-width: 1720px) {
    .modal--vertical .modal__frame {
        width: min(320px, 88vw);
    }
}