/* BLOCK: Value Proposition */

@media screen and (width > 620px) {
    .block-value-proposition {
        min-height: 100vh;
    }

    .block-value-proposition :is(.wrap,.main-wrapper) {
        height: 100%;
    }

    .block-value-proposition .main-wrapper {
        display: flex;
        gap: 1.875rem;
    }

    .block-value-proposition .main-content {
        flex-basis: 100%;
        padding: 6.25rem 5.3125rem 5rem 5rem;
        display: grid;
        gap: 2.5rem 1rem;
        transition: 600ms cubic-bezier(0.77, 0, 0.29, 1);
        transition-property: color, background-color;
    }

    .block-value-proposition .main-content :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .btn, .swiper-pagination) {
        transition: color 600ms cubic-bezier(0.77, 0, 0.29, 1);
    }

    .block-value-proposition .image-content {
        position: relative;
        flex-basis: 70%;
        overflow: hidden;
    }

    .block-value-proposition .image-content img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: translateY(calc(-100% - 1.875rem));
    }

    .block-value-proposition .image-content img.has-transition {
        transition: transform 600ms cubic-bezier(0.77, 0, 0.29, 1);
    }

    .block-value-proposition .image-content img.active {
        transform: translateY(0);
    }

    .block-value-proposition .image-content img.active ~ img {
        transform: translateY(calc(100% + 1.875rem));
    }

    .block-value-proposition :is(.text-content,.cta-buttons) {
        transition: opacity 600ms cubic-bezier(0.77, 0, 0.29, 1);
    }

    .block-value-proposition :is(.text-content,.cta-buttons):not(.active) {
        opacity: 0;
        pointer-events: none;
        user-select: none;
    }

    .block-value-proposition .text-content {
        grid-column: 1 / span 2;
        grid-row: 1;
    }

    .block-value-proposition .text-content > :not(:last-child) {
        margin-bottom: 3.75rem;
    }

    .block-value-proposition .cta-buttons {
        grid-column: 2;
        grid-row: 2;
        justify-content: flex-end;
        align-items: flex-end;
    }

    .block-value-proposition .swiper-pagination {
        grid-column: 1;
        grid-row: 2;
        flex-direction: column;
        justify-content: flex-end;
    }

    .block-value-proposition .swiper-pagination-bullet {
        transition: background-color 600ms cubic-bezier(0.77, 0, 0.29, 1);
    }
}

@media screen and (width > 620px) and (width <= 920px) {
    .block-value-proposition .main-wrapper {
        gap: 1rem;
    }

    .block-value-proposition .main-content {
        padding: 2.5rem 1.5rem;
    }

    .block-value-proposition .image-content {
        flex-basis: 100%;
    }
}

@media screen and (width <= 620px) {
    .block-value-proposition .main-wrapper {
        display: flex;
        flex-direction: column;
        gap: 0.9375rem;
    }

    .block-value-proposition .image-content {
        width: 100%;
        height: auto;
        aspect-ratio: 342 / 220;
    }

    .block-value-proposition .image-content img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .block-value-proposition .main-content {
        padding: 2.5rem 1.5rem;
    }

    .block-value-proposition .main-content .text-content:not(:last-child) {
        margin-bottom: 2.5rem;
    }
}