/* flexible grid layouts*/

.flex-grid-container {
    display: grid !important;
    gap: 0.5rem 0.5rem;
}

    .flex-grid-container:hover {
        /*min-height: 875px !important;*/
    }

    .flex-grid-container > * {
        overflow: hidden !important;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center !important;
        position: relative;
        text-align: center;
    }

    /*        .flex-grid-container > *:hover {
            grid-column: span 2;
            grid-row: span 2;
        } */

    .flex-grid-container > a > div > span {
        bottom: -1.4rem;
        display: inline-block;
        position: absolute;
        left: 0;
        background-color: rgba(247, 247, 248, 0.4);
        color: #333;
        width: 100%;
        transition: bottom linear 0.25s;
    }

        .flex-grid-container > a > div > span:hover {
            bottom: 0;
            transition: bottom linear 0.25s;
        }


@media (min-width: 576px) {

    .grid-4x2 {
        grid-template-columns: auto auto auto auto !important;
        grid-template-rows: auto auto !important;
    }

    .grid-4x4 {
        grid-template-columns: auto auto auto auto !important;
        grid-template-rows: auto auto auto auto !important;
    }

    .grid-5x2 {
        grid-template-columns: auto auto auto auto auto !important;
        grid-template-rows: auto auto !important;
    }


    .grid-6x4 {
        grid-template-columns: auto auto auto auto auto auto !important;
        grid-template-rows: auto auto auto auto !important;
    }

    .grid-6x6 {
        grid-template-columns: auto auto auto auto auto auto !important;
        grid-template-rows: auto auto auto auto auto auto !important;
    }

    .grid-7x4 {
        grid-template-columns: auto auto auto auto auto auto auto !important;
        grid-template-rows: auto auto auto auto !important;
    }

    .grid-7x6 {
        grid-template-columns: auto auto auto auto auto auto auto !important;
        grid-template-rows: auto auto auto auto auto auto !important;
    }

    .grid-8x6 {
        grid-template-columns: auto auto auto auto auto auto auto auto auto !important;
        grid-template-rows: auto auto auto auto auto auto !important;
    }



}

@media (max-width: 575.98px) {

    .grid-4x2 {
        grid-template-columns: auto auto !important;
        grid-template-rows: auto auto !important;
    }

    .grid-4x4 {
        grid-template-columns: auto auto auto auto !important;
        grid-template-rows: auto auto auto auto !important;
    }

    .grid-5x2 {
        grid-template-columns: auto auto !important;
        grid-template-rows: auto auto auto auto auto !important;
    }


    .grid-6x4 {
        grid-template-columns: auto auto auto auto !important;
        grid-template-rows: auto auto auto auto auto auto !important;
    }

    .grid-7x4 {
        grid-template-columns: auto auto auto auto !important;
        grid-template-rows: auto auto auto auto auto auto auto !important;
    }

    .grid-7x6 {
        grid-template-columns: auto auto auto auto !important;
        grid-template-rows: auto auto auto auto auto auto auto auto auto auto !important;
    }
}


/* Compact Grid*/

.flex-compact-grid-container {
    display: grid !important;
    gap: 0.5rem 0.5rem;
}

    .flex-compact-grid-container > * {
        overflow: hidden !important;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        text-align: center;
    }

    .flex-compact-grid-container > a > div > span {
        bottom: 0;
        display: inline-block;
        position: absolute;
        left: 0;
        background-color: rgba(247, 247, 248, 0.7);
        width: 100%;
    }