/*
|--------------------------------------------------------------------------
| JUST FOR YOU
|--------------------------------------------------------------------------
*/

:root {
    --jfy-primary:
        #ff587d;

    --jfy-primary-hover:
        #e9476c;

    --jfy-primary-soft:
        #fff1f5;
}


/*
|--------------------------------------------------------------------------
| SECTION
|--------------------------------------------------------------------------
*/

.fv-jfy-section {
    padding:
        20px 0
        34px;

    background:
        #f5f5f5;
}


/*
|--------------------------------------------------------------------------
| CONTAINER
|--------------------------------------------------------------------------
*/

.fv-jfy-container {
    width:
        min(
            1190px,
            calc(
                100% - 32px
            )
        );

    margin-inline:
        auto;
}


/*
|--------------------------------------------------------------------------
| TITLE
|--------------------------------------------------------------------------
*/

.fv-jfy-container
> h2 {
    margin:
        0 0 9px;

    color:
        #343434;

    font-size:
        23px;

    line-height:
        1.25;

    font-weight:
        500;
}


/*
|--------------------------------------------------------------------------
| GRID
|--------------------------------------------------------------------------
*/

.fv-jfy-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            6,
            minmax(
                0,
                1fr
            )
        );

    gap:
        18px 10px;
}


/*
|--------------------------------------------------------------------------
| LOAD MORE
|--------------------------------------------------------------------------
*/

.fv-jfy-load-more-wrap {
    display: flex;

    align-items:
        center;

    justify-content:
        center;

    padding-top:
        38px;
}


/*
|--------------------------------------------------------------------------
| LOAD MORE BUTTON
|--------------------------------------------------------------------------
*/

.fv-jfy-load-more {
    width:
        min(
            390px,
            100%
        );

    min-height:
        43px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        var(
            --jfy-primary
        );

    border-radius:
        2px;

    outline: none;

    background:
        transparent;

    color:
        var(
            --jfy-primary
        );

    font-family:
        inherit;

    font-size:
        12px;

    font-weight:
        600;

    cursor: pointer;

    transition:
        background-color
            0.17s ease,
        color
            0.17s ease,
        border-color
            0.17s ease,
        transform
            0.17s ease;
}


/*
|--------------------------------------------------------------------------
| BUTTON HOVER
|--------------------------------------------------------------------------
*/

.fv-jfy-load-more:hover {
    border-color:
        var(
            --jfy-primary-hover
        );

    background:
        var(
            --jfy-primary
        );

    color:
        #ffffff;
}


/*
|--------------------------------------------------------------------------
| BUTTON ACTIVE
|--------------------------------------------------------------------------
*/

.fv-jfy-load-more:active {
    transform:
        scale(
            0.995
        );
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (
    max-width: 1050px
) {

    .fv-jfy-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(
                    0,
                    1fr
                )
            );
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (
    max-width: 760px
) {

    /*
    |--------------------------------------------------------------------------
    | SECTION
    |--------------------------------------------------------------------------
    */

    .fv-jfy-section {
        padding:
            14px 0
            95px;
    }


    /*
    |--------------------------------------------------------------------------
    | CONTAINER
    |--------------------------------------------------------------------------
    */

    .fv-jfy-container {
        width:
            100%;

        padding:
            0 10px;
    }


    /*
    |--------------------------------------------------------------------------
    | TITLE
    |--------------------------------------------------------------------------
    */

    .fv-jfy-container
    > h2 {
        margin-bottom:
            9px;

        font-size:
            18px;
    }


    /*
    |--------------------------------------------------------------------------
    | GRID
    |--------------------------------------------------------------------------
    */

    .fv-jfy-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        gap:
            8px;
    }


    /*
    |--------------------------------------------------------------------------
    | LOAD MORE
    |--------------------------------------------------------------------------
    */

    .fv-jfy-load-more-wrap {
        padding-top:
            25px;
    }


    .fv-jfy-load-more {
        min-height:
            40px;
    }

}


/*
|--------------------------------------------------------------------------
| REDUCED MOTION
|--------------------------------------------------------------------------
*/

@media (
    prefers-reduced-motion:
        reduce
) {

    .fv-jfy-load-more {
        transition:
            none;
    }

}