/* ============================================================
   LAYOUT COLUMNS
   ============================================================ */

.layout-cols {
    display: grid;
    gap: 20px;
}

.layout-cols > .col {
    min-width: 0;
}

/* Equal column layouts */

.layout-cols.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.layout-cols.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.layout-cols.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Unequal column layouts */

.layout-cols.cols-2-1 {
    grid-template-columns: 2fr 1fr;
}

.layout-cols.cols-1-2 {
    grid-template-columns: 1fr 2fr;
}

.layout-cols.cols-3-1 {
    grid-template-columns: 3fr 1fr;
}

.layout-cols.cols-1-3 {
    grid-template-columns: 1fr 3fr;
}

.layout-cols.cols-3-2 {
    grid-template-columns: 3fr 2fr;
}

.layout-cols.cols-2-3 {
    grid-template-columns: 2fr 3fr;
}

.layout-cols.cols-2-1-1 {
    grid-template-columns: 2fr 1fr 1fr;
}




/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////// LAYOUTS//////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/





/*=========================================================
    LAYOUT 1

    +-------+
    |   1   |
    +-------+
=========================================================*/


.layout-1
{
    width: 100%;
    height: 100%;
}





/*=========================================================
    LAYOUT 2H

    +-------+-------+
    |   1   |   2   |
    +-------+-------+
=========================================================*/

.layout-2h
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 100%;
    height: 100%;
}

.layout-2h-left,
.layout-2h-right
{
    width: 100%;
    height: 100%;
}







/*=========================================================
    LAYOUT 2V

    +-------+
    |   1   |
    +-------+
    |   2   |
    +-------+
=========================================================*/

.layout-2v {
    display: grid;
    width: 100%;
    height: 100%;

    gap: 20px;
    grid-template-rows: 1fr 1fr;
}

.layout-2v-top,
.layout-2v-bottom
{
    width: 100%;
    height: 100%;
    min-height: 0;
}





/*=========================================================
    LAYOUT 3H

    +-------+-------+
    |   1   |   2   |
    |       +-------+
    |       |   3   |
    +-------+-------+
=========================================================*/

.layout-3h
{
    display: grid;
    grid-template-columns: 1fr 1fr;

    width: 100%;
    height: 100%;

    gap: 20px;
}

.layout-3h-left
{
    width: 100%;
    height: 100%;
}

.layout-3h-right
{
    display: grid;

    width: 100%;
    height: 100%;

    gap: 20px;

    grid-template-rows: 1fr 1fr;
}

.layout-3h-right-top,
.layout-3h-right-bottom
{
    width: 100%;
    height: 100%;
    min-height: 0;
}



/*=========================================================
    LAYOUT 3V

    +---------------+
    |       1       |
    +-------+-------+
    |   2   |   3   |
    +-------+-------+
=========================================================*/

.layout-3v
{
    display: grid;

    width: 100%;
    height: 100%;

    gap: 20px;

    grid-template-rows: 1fr 1fr;
}

.layout-3v-top
{
    width: 100%;
    height: 100%;
}

.layout-3v-bottom
{
    display: grid;

    width: 100%;
    height: 100%;

    gap: 20px;

    grid-template-columns: 1fr 1fr;
}

.layout-3v-bottom-left,
.layout-3v-bottom-right
{
    width: 100%;
    height: 100%;
}





/*=========================================================
    LAYOUT 4

    +-------+-------+
    |   1   |   2   |
    +-------+-------+
    |   3   |   4   |
    +-------+-------+
=========================================================*/

.layout-4
{
    display: grid;

    width: 100%;
    height: 100%;

    gap: 20px;

    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.layout-4-item
{
    width: 100%;
    height: 100%;
    min-height: 0;
}





/*=========================================================
    LAYOUT 5A

+-------+-------+
|   1   |   2   |
+-------+-------+

+---+---+---+
| 3 | 4 | 5 |
+---+---+---+
=========================================================*/


.layout-5a
{
    display: grid;

    width: 100%;
    height: 100%;

    gap: 20px;

    grid-template-rows: 1fr 1fr;
}



/* Top Row */

.layout-5a-top
{
    display: grid;

    width: 100%;
    height: 100%;

    gap: 20px;

    grid-template-columns: 1fr 1fr;
}

.layout-5a-top-left,
.layout-5a-top-right
{
    width: 100%;
    height: 100%;
}



/* Bottom Row */

.layout-5a-bottom
{
    display: grid;

    width: 100%;
    height: 100%;

    gap: 20px;

    grid-template-columns: repeat(3, 1fr);
}

.layout-5a-bottom-item
{
    width: 100%;
    height: 100%;
}






/*=========================================================
    LAYOUT 5B

    +---------------+-------+
    |       1       |   2   |
    +-------+-------+-------+
    |   3   |   4   |   5   |
    +-------+-------+-------+
=========================================================*/

.layout-5b
{
    display: grid;

    width: 100%;
    height: 100%;

    gap: 20px;

    grid-template-rows: 1fr 1fr;
}

/* Top Row */

.layout-5b-top
{
    display: grid;

    width: 100%;
    height: 100%;

    gap: 20px;

    grid-template-columns: 2fr 1fr;
}

.layout-5b-top-left,
.layout-5b-top-right
{
    width: 100%;
    height: 100%;
}

/* Bottom Row */

.layout-5b-bottom
{
    display: grid;

    width: 100%;
    height: 100%;

    gap: 20px;

    grid-template-columns: repeat(3, 1fr);
}

.layout-5b-bottom-item
{
    width: 100%;
    height: 100%;
}





/*=========================================================
    LAYOUT 6A

    +-------+-------+-------+
    |   1   |   2   |   3   |
    +-------+-------+-------+
    |   4   |   5   |   6   |
    +-------+-------+-------+
=========================================================*/

.layout-6a
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.layout-6a-item
{
    min-width: 0;
}







/*=========================================================
    LAYOUT 6B

    +-------+-------+-------+
    |       1       |   2   |
    |               +-------+
    |               |   3   |
    +-------+-------+-------+
    |   4   |   5   |   6   |
    +-------+-------+-------+
=========================================================*/

.layout-6b
{
    display: grid;

    width: 100%;
    height: 100%;

    gap: 20px;

    grid-template-rows: 2fr 1fr;
}



/* Top */

.layout-6b-top
{
    display: grid;

    width: 100%;
    height: 100%;

    gap: 20px;

    grid-template-columns: repeat(3, 1fr);
}

.layout-6b-main
{
    grid-column: 1 / span 2;

    width: 100%;
    height: 100%;
}

.layout-6b-right
{
    grid-column: 3;

    display: grid;

    width: 100%;
    height: 100%;

    gap: 20px;

    grid-template-rows: 1fr 1fr;
}

.layout-6b-right-top,
.layout-6b-right-bottom
{
    width: 100%;
    height: 100%;
}



/* Bottom */

.layout-6b-bottom
{
    display: grid;

    width: 100%;
    height: 100%;

    gap: 20px;

    grid-template-columns: repeat(3, 1fr);
}

.layout-6b-bottom-item
{
    width: 100%;
    height: 100%;
}



/*=========================================================
    LAYOUT 7A

    +-------+-------+-------+
    |       1       |   2   |
    +-------+-------+-------+
    |   3   |   4   |   5   |
    +-------+-------+-------+
    |   6   |       7       |
    +-------+-------+-------+
=========================================================*/

.layout-7a
{
    display: grid;

    width: 100%;
    height: 100%;

    gap: 20px;

    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

.layout-7a-item
{
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}


.layout-7a-item-1
{
    grid-column: 1 / span 2;
}

.layout-7a-item-2
{
    grid-column: 3;
}

.layout-7a-item-3
{
    grid-column: 1;
}

.layout-7a-item-4
{
    grid-column: 2;
}

.layout-7a-item-5
{
    grid-column: 3;
}

.layout-7a-item-6
{
    grid-column: 1;
}

.layout-7a-item-7
{
    grid-column: 2 / span 2;
}








/*=========================================================
    LAYOUT 7B

    +-------+-------+-------+-------+
    |               |   4   |   5   |
    |       1       +-------+-------+
    |               |   6   |   7   |
    +-------+-------+-------+-------+
    |       2       |       3       |
    +-------+-------+-------+-------+
=========================================================*/

.layout-7b
{
    display: grid;

    width: 100%;
    height: 100%;

    gap: 20px;

    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

.layout-7b-item
{
    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;
}



.layout-7b-item-1
{
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
}

.layout-7b-item-2
{
    grid-column: 1 / span 2;
    grid-row: 3;
}

.layout-7b-item-3
{
    grid-column: 3 / span 2;
    grid-row: 3;
}

.layout-7b-item-4
{
    grid-column: 3;
    grid-row: 1;
}

.layout-7b-item-5
{
    grid-column: 4;
    grid-row: 1;
}

.layout-7b-item-6
{
    grid-column: 3;
    grid-row: 2;
}

.layout-7b-item-7
{
    grid-column: 4;
    grid-row: 2;
}








/*=========================================================
    LAYOUT 8A

    +-------+-------+-------+-------+
    |   1   |   2   |   3   |   4   |
    +-------+-------+-------+-------+
    |       5       |   6   |   7   |
    |               +-------+-------+
    |               |       8       |
    +-------+-------+-------+-------+
=========================================================*/

.layout-8a
{
    display: grid;

    width: 100%;
    height: 100%;

    gap: 20px;

    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

.layout-8a-item
{
    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;
}



.layout-8a-item-1
{
    grid-column: 1;
    grid-row: 1 / span 2;
}

.layout-8a-item-2
{
    grid-column: 2;
    grid-row: 1 / span 2;
}

.layout-8a-item-3
{
    grid-column: 3;
    grid-row: 1 / span 2;
}

.layout-8a-item-4
{
    grid-column: 4;
    grid-row: 1 / span 2;
}

.layout-8a-item-5
{
    grid-column: 1 / span 2;
    grid-row: 3 / span 2;
}

.layout-8a-item-6
{
    grid-column: 3;
    grid-row: 3;
}

.layout-8a-item-7
{
    grid-column: 4;
    grid-row: 3;
}

.layout-8a-item-8
{
    grid-column: 3 / span 2;
    grid-row: 4;
}








/*=========================================================
    LAYOUT 8B

    +-------+-------+-------+-------+
    |       1       |   2   |   3   |
    |               +-------+-------+
    |               |   4   |   5   |
    +-------+-------+-------+-------+
    |   6   |   7   |       8       |
    |       |       |               |
    +-------+-------+---------------+
=========================================================*/

.layout-8b
{
    display: grid;

    width: 100%;
    height: 100%;

    gap: 20px;

    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr 1fr 1.1fr;
}

.layout-8b-item
{
    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;
}




.layout-8b-item-1
{
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
}

.layout-8b-item-2
{
    grid-column: 3;
    grid-row: 1;
}

.layout-8b-item-3
{
    grid-column: 4;
    grid-row: 1;
}

.layout-8b-item-4
{
    grid-column: 3;
    grid-row: 2;
}

.layout-8b-item-5
{
    grid-column: 4;
    grid-row: 2;
}

.layout-8b-item-6
{
    grid-column: 1;
    grid-row: 3;
}

.layout-8b-item-7
{
    grid-column: 2;
    grid-row: 3;
}

.layout-8b-item-8
{
    grid-column: 3 / span 2;
    grid-row: 3;
}






/*=========================================================
    LAYOUT 9A

    +-------+-------+-------+
    |   1   |   2   |   3   |
    +-------+-------+-------+
    |   4   |   5   |   6   |
    +-------+-------+-------+
    |   7   |   8   |   9   |
    +-------+-------+-------+
=========================================================*/

.layout-9a
{
    display: grid;

    width: 100%;
    height: 100%;

    gap: 20px;

    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

.layout-9a-item
{
    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;
}






/*=========================================================
    LAYOUT 9B

    +-------+-------+-------+
    |   1   |   2   |   3   |
    |       +-------+-------+
    |       |   4   |   5   |
    +-------+-------+-------+
    |   6   |   7   |   8   |
    |       |       +-------+
    |       |       |   9   |
    +-------+-------+-------+
=========================================================*/

.layout-9b
{
    display: grid;

    width: 100%;
    height: 100%;

    gap: 20px;

    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

.layout-9b-item
{
    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;
}




.layout-9b-item-1
{
    grid-column: 1;
    grid-row: 1 / span 2;
}

.layout-9b-item-2
{
    grid-column: 2;
    grid-row: 1;
}

.layout-9b-item-3
{
    grid-column: 3;
    grid-row: 1;
}

.layout-9b-item-4
{
    grid-column: 2;
    grid-row: 2;
}

.layout-9b-item-5
{
    grid-column: 3;
    grid-row: 2;
}

.layout-9b-item-6
{
    grid-column: 1;
    grid-row: 3 / span 2;
}

.layout-9b-item-7
{
    grid-column: 2;
    grid-row: 3 / span 2;
}

.layout-9b-item-8
{
    grid-column: 3;
    grid-row: 3;
}

.layout-9b-item-9
{
    grid-column: 3;
    grid-row: 4;
}







/*=========================================================
    LAYOUT 10A

    +-------+-------+-------+-------+
    |       1       |       2       |
    |               |               |
    +-------+-------+-------+-------+
    |   3   |   4   |   5   |   6   |
    +-------+-------+-------+-------+
    |   7   |   8   |   9   |  10   |
    +-------+-------+-------+-------+
=========================================================*/

.layout-10a
{
    display: grid;

    width: 100%;
    height: 100%;

    gap: 20px;

    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 2fr 1fr 1fr;
}

.layout-10a-item
{
    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;
}




.layout-10a-item-1
{
    grid-column: 1 / span 2;
    grid-row: 1;
}

.layout-10a-item-2
{
    grid-column: 3 / span 2;
    grid-row: 1;
}

.layout-10a-item-3
{
    grid-column: 1;
    grid-row: 2;
}

.layout-10a-item-4
{
    grid-column: 2;
    grid-row: 2;
}

.layout-10a-item-5
{
    grid-column: 3;
    grid-row: 2;
}

.layout-10a-item-6
{
    grid-column: 4;
    grid-row: 2;
}

.layout-10a-item-7
{
    grid-column: 1;
    grid-row: 3;
}

.layout-10a-item-8
{
    grid-column: 2;
    grid-row: 3;
}

.layout-10a-item-9
{
    grid-column: 3;
    grid-row: 3;
}

.layout-10a-item-10
{
    grid-column: 4;
    grid-row: 3;
}







/*=========================================================
    LAYOUT 10B

    +-------+-------+-------+
    |       1       |   2   |
    +-------+-------+-------+
    |       3       |   4   |
    +-------+-------+-------+
    |   5   |   6   |   7   |
    +-------+-------+-------+
    |   8   |   9   |  10   |
    +-------+-------+-------+

    Items 1 and 3 span two columns.
=========================================================*/

.layout-10b
{
    display: grid;

    width: 100%;
    height: 100%;

    gap: 20px;

    grid-template-columns: 1fr 1fr 1.6fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
}

.layout-10b-item
{
    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;
}




.layout-10b-item-1
{
    grid-column: 1 / span 2;
    grid-row: 1;
}

.layout-10b-item-2
{
    grid-column: 3;
    grid-row: 1;
}

.layout-10b-item-3
{
    grid-column: 1 / span 2;
    grid-row: 2;
}

.layout-10b-item-4
{
    grid-column: 3;
    grid-row: 2;
}

.layout-10b-item-5
{
    grid-column: 1;
    grid-row: 3;
}

.layout-10b-item-6
{
    grid-column: 2;
    grid-row: 3;
}

.layout-10b-item-7
{
    grid-column: 3;
    grid-row: 3;
}

.layout-10b-item-8
{
    grid-column: 1;
    grid-row: 4;
}

.layout-10b-item-9
{
    grid-column: 2;
    grid-row: 4;
}

.layout-10b-item-10
{
    grid-column: 3;
    grid-row: 4;
}







/*=========================================================
    LAYOUT 10C

    +-------+-------+-------+
    |   1   |   2   |   3   |
    |       |       +-------+
    |       |       |   4   |
    +---+---+---+---+---+---+
    | 5 | 6 | 7 | 8 | 9 |10 |
    +---+---+---+---+---+---+

=========================================================*/

.layout-10c
{
    display: grid;

    width: 100%;
    height: 100%;

    gap: 20px;

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

}

.layout-10c-item
{
    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;
}



.layout-10c-item-1
{
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
}

.layout-10c-item-2
{
    grid-column: 3 / span 2;
    grid-row: 1 / span 2;
}

.layout-10c-item-3
{
    grid-column: 5 / span 2;
    grid-row: 1;          /* <-- ONLY ROW 1 */
}

.layout-10c-item-4
{
    grid-column: 5 / span 2;
    grid-row: 2;          /* <-- ONLY ROW 2 */
}

.layout-10c-item-5
{
    grid-column: 1;
    grid-row: 3;
}

.layout-10c-item-6
{
    grid-column: 2;
    grid-row: 3;
}

.layout-10c-item-7
{
    grid-column: 3;
    grid-row: 3;
}

.layout-10c-item-8
{
    grid-column: 4;
    grid-row: 3;
}

.layout-10c-item-9
{
    grid-column: 5;
    grid-row: 3;
}

.layout-10c-item-10
{
    grid-column: 6;
    grid-row: 3;
}