/*
    Block: Scrolljacking Content
    Note: Selectors must start with .block-scrolljacking-content
*/

@layer blocks {
    .block-scrolljacking-content .sticky-content {
        -ms-flex-preferred-size: 34.6%;
            flex-basis: 34.6%;
        position: sticky;
        top: var(--header-height);
    }

    .block-scrolljacking-content .contents-wrapper {
        -ms-flex-preferred-size: 49.17%;
            flex-basis: 49.17%;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .block-scrolljacking-content .content-card {
        padding: 2.5rem;
        background-color: rgb(from var(--c-blue) r g b / .05);
        border: 1px solid rgb(from var(--c-blue) r g b / .15);
    }

    .block-scrolljacking-content .content-card .bs-icon {
        width: .875rem;
        height: .875rem;
    }

    .block-scrolljacking-content .content-card .text-content {
        --gap: 1.875rem;
        margin-top: 2.5rem;
    }

    .block-scrolljacking-content .buttons {
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        margin-top: 2.5rem;
    }

    @media screen and (width <= 920px) {
        .block-scrolljacking-content .main-wrapper {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            gap: 2.5rem;
        }

        .block-scrolljacking-content .sticky-content {
            position: static;
        }
        
        .block-scrolljacking-content .content-card {
            padding: 1.875rem 1.5rem;
        }

        .block-scrolljacking-content .content-card .bs-icon {
            width: .75rem;
            height: .625rem;
        }

        .block-scrolljacking-content .content-card .text-content {
            --gap: 1.25rem;
            margin-top: 1.5rem;
        }
    }
}