@layer utilities {
    .bg-stripped{
        background-position-x: center;
    }
    .bg-gray-stripped{
        background-image: url("../img/bg-gray-stripe-r.png");
    }

    @media all and (min-width: 1440px) {
        .bg-stripped {
            background-position-x: center;
        }
    }
}

@layer components {

    .recruitment-block {
        width: 100%;
        max-width: 1440px;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: row;
        gap: 32px;
        margin: 0 auto;
    }

    /*.recruitment-block {*/
    /*    --bg-stripped-width: 1px;*/
    /*    --bg-stripped-count: 11;*/
    /*    --color: var(--border-neutral-secondary);*/
    /*    --background-color: var(--bg-neutral-secondary);*/
    /*    background: linear-gradient(90deg, var(--background-color) calc(100% - var(--bg-stripped-width)), var(--color) 0);*/
    /*    background-size: calc((1440px - var(--bg-stripped-count) * var(--bg-stripped-width)) / (var(--bg-stripped-count) + 1) + var(--bg-stripped-width)) 100%;*/
    /*}*/

    .recruitment-block > .recruitment-column {
        flex: 1;
    }
    .recruitment-block .recruitment-block-container {
        flex: 1;

    }
    @media (max-width: 1024px) {
        .recruitment-block {
            padding: 1rem 0;
        }
        .recruitment-block .recruitment-block-container {
            flex: 2;
        }
    }

    @media (min-width: 1024px) {
        .recruitment-block {
            aspect-ratio: 9/5;
        }

    }
    @media (max-width: 576px) {
        .recruitment-block :is(.animation-controls,.animation-controls-toggle, .recruitment-scrolling-content) {
            display: none!important;
        }
    }

    .recruitment-block .recruitment-scrolling-content > div {
        animation: recruitment-scroll-up 20s linear infinite;
    }

    .recruitment-block .recruitment-scrolling-content > img {
        border-radius: var(--radius-base-4);
    }

    .recruitment-block .recruitment-scrolling-content > div {
        position: relative;
        width: 100%;
        height: 253%;
        container-type: inline-size;
    }

    .recruitment-block .recruitment-scrolling-content > div > img {
        --x: 0;
        --y: 0;
        --w: 0.3783;

        top: calc(100% * var(--y));
        left: calc(100% * var(--x));

        width: calc(100cqw * var(--w));

        position: absolute;
        object-fit: cover;
        border-radius: var(--radius-base-4);
    }


    .recruitment-block > :nth-child(1 of .recruitment-column) > .animation > img {
        &:nth-child(9n+1) {
            --x: 0.8288;
            --y: 0;
            --w: 0.1711;
        }

        &:nth-child(9n+2) {
            --x: 0;
            --y: 0.0039;
            --w: 0.3783;
        }

        &:nth-child(9n+3) {
            --x: 0.2072;
            --y: 0.1824;
            --w: 0.3783;
        }

        &:nth-child(9n+4) {
            --x: 0.0360;
            --y: 0.3667;
            --w: 0.1711;
        }

        &:nth-child(9n+5) {
            --x: 0.4504;
            --y: 0.4137;
            --w: 0.3783;
        }

        &:nth-child(9n+6) {
            --x: 0.8288;
            --y: 0.5907;
            --w: 0.1711;
        }

        &:nth-child(9n+7) {
            --x: 0;
            --y: 0.5946;
            --w: 0.3783;
        }

        &:nth-child(9n+8) {
            --x: 0.2072;
            --y: 0.7731;
            --w: 0.3783;
        }

        &:nth-child(9n+9) {
            --x: 0.0360;
            --y: 0.9574;
            --w: 0.1711;
        }
    }

    .recruitment-block > :nth-child(2 of .recruitment-column) > .animation > img {
        &:nth-child(9n+1) {
            --x: 0.2522;
            --y: 0;
            --w: 0.3783;
        }

        &:nth-child(9n+2) {
            --x: 0.5227;
            --y: 0.1507;
            --w: 0.3783;
        }

        &:nth-child(9n+3) {
            --x: 0;
            --y: 0.1898;
            --w: 0.1711;
        }

        &:nth-child(9n+4) {
            --x: 0.5227;
            --y: 0.3198;
            --w: 0.1711;
        }

        &:nth-child(9n+5) {
            --x: 0;
            --y: 0.4349;
            --w: 0.3783;
        }

        &:nth-child(9n+6) {
            --x: 0.2522;
            --y: 0.6223;
            --w: 0.3783;
        }

        &:nth-child(9n+7) {
            --x: 0.5227;
            --y: 0.7736;
            --w: 0.3783;
        }

        &:nth-child(9n+8) {
            --x: 0;
            --y: 0.8121;
            --w: 0.1711;
        }

        &:nth-child(9n+9) {
            --x: 0.6522;
            --y: 0.9421;
            --w: 0.1711;
        }
    }

    .recruitment-block .recruitment-block-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 32px;
        container: inline-size;
    }


    .recruitment-block .recruitment-block-container-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
        margin: 0 auto;
        gap: 24px;
        text-wrap: balance;
    }

    .recruitment-block .recruitment-block-container-text > div {
        padding: 0 clamp(0px, 6.91vw - 47px, 53px);
    }


    .recruitment-block .recruitment-block-container-buttons {
        display: flex;
        gap: 12px;
    }

    @keyframes recruitment-scroll-up {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(-100%);
        }
    }
}