/* About page responsive redesign */

@media (min-width: 576px) and (max-width: 991px) {
    .about-hero {
        height: 554px;
        min-height: 0;
    }

    .about-hero__image {
        top: 54px;
        bottom: auto;
        height: 500px;
    }

    .about-intro {
    }

    .media-panel--advantages .media-panel__layout {
        grid-template-areas:
            'media'
            'content';
    }

    .media-panel--advantages .media-cta__media {
        width: calc(100% - 80px);
        max-width: 620px;
        height: auto;
        aspect-ratio: 17 / 11;
        margin-inline: auto;
        border-radius: 32px 32px 0 0;
    }

    .media-panel--advantages .media-cta__content {
        min-height: 0;
        padding: 60px 0 0;
        border-radius: 0 32px 32px 0;
    }

    .media-panel--advantages .media-panel__copy {
        padding-inline: 40px;
    }

    .media-panel--advantages .media-panel__title {
        font-size: 32px;
    }

    .media-panel--advantages .media-panel__action {
        position: relative;
        align-self: flex-end;
        min-height: 74px;
        margin-top: 40px;
        padding: 20px 40px;
        gap: 16px;
    }

    .media-panel--advantages .media-panel__decoration {
        right: -100px;
        bottom: 0;
        width: 360px;
        height: 414px;
    }

    .media-feature--about-advantages {
        border-radius: 0 34px 34px;
    }

    .media-feature--about-advantages .media-feature__layout {
        gap: 24px;
        padding: 80px 40px;
    }

    .media-feature--about-advantages .media-cta__media {
        width: 100%;
        max-width: 620px;
        height: auto;
        aspect-ratio: 35 / 26;
        margin-inline: auto;
        border-radius: 34px 34px 34px 0;
    }

    .media-feature--about-advantages .media-cta__content {
        width: 100%;
        max-width: 620px;
        gap: 24px;
        margin-inline: auto;
    }

    .media-feature--about-advantages .media-feature__watermark {
        display: none;
    }

    .media-feature--about-advantages .media-cta__link {
        gap: 20px;
    }

    .media-feature--about-advantages .round-link__circle {
        flex-basis: 64px;
        width: 64px;
        height: 64px;
    }

    .media-feature--about-advantages .round-link__icon-box {
        width: 34px;
        height: 34px;
    }

    .media-feature--about-advantages .round-link__text {
        width: auto;
        max-width: calc(100% - 84px);
    }
}

@media (max-width: 575px) {
    .about-hero {
        height: 384px;
        min-height: 0;
    }

    .aboutus {
        background-color: var(--color-brand-violet);
    }

    .about-hero__image {
        top: 54px;
        bottom: auto;
        height: 330px;
        object-position: center;
    }

    .about-intro {
        min-height: 521px;
        padding: 34px 20px 59px;
    }

    .about-intro .vertical-grid::before,
    .about-intro .vertical-grid::after {
        width: 1px;
        border-right: 0;
    }

    .about-intro .vertical-grid::before {
        left: calc(100% / 3);
    }

    .about-intro .vertical-grid::after {
        left: calc(200% / 3);
        display: block;
    }

    .about-intro__inner {
        width: 100%;
        max-width: none;
        margin-inline: auto;
        padding: 0;
    }

    .about-intro__title {
        width: 253px;
        height: 87px;
    }

    .about-intro__title-oval {
        top: 4px;
        right: auto;
        bottom: auto;
        left: 0;
        width: 253px;
        height: 80px;
    }

    .about-intro__title h1 {
        margin-top: 32px;
        font-size: 24px;
    }

    .about-intro__body {
        margin-top: 20px;
    }

    .about-intro__text,
    .about-intro__text * {
        font-size: 15px;
    }

    .about-intro__cta {
        width: 100%;
        max-width: none;
        min-height: 67px;
        margin-top: 20px;
        padding: 20px 10px;
        border-radius: 24px 24px 24px 0;
        font-size: 22px;
    }

    .about-intro__cta::after {
        right: 60px;
    }

    .media-panel--advantages .media-panel__layout {
        grid-template-areas:
            'media'
            'content';
    }

    .media-panel--advantages .media-cta__media {
        justify-self: start;
        width: calc(100% - 50px);
        max-width: none;
        height: auto;
        aspect-ratio: 17 / 11;
        border-radius: 24px 24px 0 0;
    }

    .media-panel--advantages .media-cta__content {
        min-height: 0;
        padding: 60px 0 0;
        border-radius: 0 24px 24px 0;
    }

    .media-panel--advantages .media-panel__copy {
        padding-inline: 20px;
    }

    .media-panel--advantages .media-panel__title {
        margin-bottom: 10px;
        font-size: 24px;
        white-space: nowrap;
    }

    .media-panel--advantages .media-panel__body,
    .media-panel--advantages .media-panel__body * {
        font-size: 16px;
    }

    .media-panel--advantages .media-panel__body ul {
        padding-left: 24px;
    }

    .media-panel--advantages .media-panel__action {
        position: relative;
        align-self: flex-end;
        min-height: 74px;
        margin-top: 40px;
        padding: 20px 40px;
        gap: 16px;
        border-radius: 24px 0 24px 0;
        font-size: 18px;
    }

    .media-panel--advantages .media-panel__action .pill-link__icon-box {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
    }

    .media-panel--advantages .media-panel__decoration {
        right: -111px;
        bottom: 0;
        width: 279px;
        height: 321px;
    }

    .media-feature--about-advantages {
        border-radius: 0 34px 34px;
    }

    .media-feature--about-advantages .media-feature__layout {
        gap: 20px;
        padding: 60px 20px;
    }

    .media-feature--about-advantages .media-cta__media {
        width: 100%;
        max-width: none;
        height: auto;
        aspect-ratio: 35 / 26;
        border-radius: 34px 34px 34px 0;
    }

    .media-feature--about-advantages .media-cta__content {
        gap: 20px;
    }

    .media-feature--about-advantages .media-cta__text,
    .media-feature--about-advantages .media-cta__text * {
        font-size: 16px;
    }

    .media-feature--about-advantages .media-feature__watermark {
        z-index: 1;
        top: auto;
        right: 0;
        bottom: 0;
        display: block;
        width: 296px;
        height: 290px;
        overflow: hidden;
        mix-blend-mode: normal;
        opacity: 1;
        background-color: var(--color-brand-violet);
    }

    .media-feature--about-advantages .media-feature__watermark img {
        position: absolute;
        top: -70px;
        left: -23px;
        width: 460px;
        height: 460px;
        max-width: none;
        mix-blend-mode: color-burn;
        opacity: 0.3;
    }

    .media-feature--about-advantages > .about-advantages__final-grid::before,
    .media-feature--about-advantages > .about-advantages__final-grid::after {
        width: 1px;
        border-right: 0;
    }

    .media-feature--about-advantages > .about-advantages__final-grid::before {
        left: calc(100% / 3);
    }

    .media-feature--about-advantages > .about-advantages__final-grid::after {
        left: calc(200% / 3);
    }

    .media-feature--about-advantages .media-cta__link {
        gap: 20px;
        font-size: 18px;
    }

    .media-feature--about-advantages .round-link__circle {
        flex-basis: 54px;
        width: 54px;
        height: 54px;
    }

    .media-feature--about-advantages .round-link__icon-box {
        width: 28px;
        height: 28px;
    }

    .media-feature--about-advantages .round-link__text {
        width: auto;
        max-width: calc(100% - 74px);
    }
}

@media (min-width: 391px) and (max-width: 575px) {
    .about-intro {
        min-height: 0;
    }
}