/*
==========================================================
FantasyFanzone Layout
Version: 4.1
==========================================================
*/

/*========================================================
CONTAINER
========================================================*/

.ffz-container{
    width:min(
        var(--ffz-container),
        calc(100% - 48px)
    );

    margin-inline:auto;
}

/*========================================================
SECTIONS
========================================================*/

.ffz-section{
    position:relative;

    padding-block:
        var(--ffz-section-padding);
}

/*========================================================
GRID
========================================================*/

.ffz-grid{
    display:grid;

    gap:var(--ffz-grid-gap);
}

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

.ffz-grid-3{
    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );
}

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

/*========================================================
FLEX HELPERS
========================================================*/

.ffz-flex{
    display:flex;
}

.ffz-flex-center{
    display:flex;

    align-items:center;
    justify-content:center;
}

.ffz-flex-between{
    display:flex;

    align-items:center;
    justify-content:space-between;
}

.ffz-flex-column{
    display:flex;

    flex-direction:column;
}

/*========================================================
WIDTH HELPERS
========================================================*/

.ffz-full-width{
    width:100%;
}

.ffz-min-width-0{
    min-width:0;
}

/*========================================================
TABLET
========================================================*/

@media(max-width:1024px){

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

    .ffz-grid-3{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }
}

/*========================================================
MOBILE
========================================================*/

@media(max-width:768px){

    .ffz-container{
        width:
            calc(100% - 32px);
    }

    .ffz-grid-2,
    .ffz-grid-3,
    .ffz-grid-4{
        grid-template-columns:1fr;
    }
}

/*========================================================
SMALL MOBILE
========================================================*/

@media(max-width:480px){

    .ffz-container{
        width:
            calc(100% - 24px);
    }

    .ffz-grid{
        gap:20px;
    }
}