.meeting-main-grid {
}

.main-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.grid-view {
    display: grid;
    grid-template-columns: repeat(12, minmax(0px, 1fr));
    grid-template-rows: repeat(12, minmax(0px, 1fr));
    padding: 5px;
    gap: 10px;
    width: 90%;
    max-width: 1500px; /* Htane panta sta 1700px auto*/
    max-height: 100%;
    margin: 10%;
}

.grid-tile {
    color: white;
    position: relative;
    width: 100%;
    /* max-height: 80vh; */
    box-shadow: 0 3px 2px -1px rgba(0,0,0,.2), 0 6px 5px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
}

.container {
    padding-bottom: 56.25%;
}

.video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
}

.contentVideo {
    object-fit: contain;
}


#tile-0, #spotlightTile-0 {
    grid-column: var(--grid-column-0);
    grid-row: var(--grid-row-0);
}

#tile-1, #spotlightTile-1 {
    grid-column: var(--grid-column-1);
    grid-row: var(--grid-row-1);
}

#tile-2, #spotlightTile-2 {
    grid-column: var(--grid-column-2);
    grid-row: var(--grid-row-2);
}

#tile-3, #spotlightTile-3 {
    grid-column: var(--grid-column-3);
    grid-row: var(--grid-row-3);
}

#tile-4, #spotlightTile-4 {
    grid-column: var(--grid-column-4);
    grid-row: var(--grid-row-4);
}

#tile-5, #spotlightTile-5 {
    grid-column: var(--grid-column-5);
    grid-row: var(--grid-row-5);
}

#tile-6, #spotlightTile-6 {
    grid-column: var(--grid-column-6);
    grid-row: var(--grid-row-6);
}

#tile-7, #spotlightTile-7 {
    grid-column: var(--grid-column-7);
    grid-row: var(--grid-row-7);
}

#tile-8, #spotlightTile-8 {
    grid-column: var(--grid-column-8);
    grid-row: var(--grid-row-8);
}

#tile-9, #spotlightTile-9 {
    grid-column: var(--grid-column-9);
    grid-row: var(--grid-row-9);
}

#tile-10, #spotlightTile-10 {
    grid-column: var(--grid-column-10);
    grid-row: var(--grid-row-10);
}

#tile-11, #spotlightTile-11 {
    grid-column: var(--grid-column-11);
    grid-row: var(--grid-row-11);
}

#tile-12, #spotlightTile-12 {
    grid-column: var(--grid-column-12);
    grid-row: var(--grid-row-12);
}

#tile-13, #spotlightTile-13 {
    grid-column: var(--grid-column-13);
    grid-row: var(--grid-row-13);
}

#tile-14, #spotlightTile-14 {
    grid-column: var(--grid-column-14);
    grid-row: var(--grid-row-14);
}

#tile-15, #spotlightTile-15 {
    grid-column: var(--grid-column-15);
    grid-row: var(--grid-row-15);
}

/* ==================================== */
/*      MEDIA QUERIES FOR HEIGHT        */
/* ==================================== */
 /*@media only screen and (max-height: 500px) {
    .grid-view {
      max-width: 500px;
    }
}*/ 

@media only screen and (max-height: 300px) {
    .grid-view {
        max-width: 300px;
        gap: 5px;
    }

    .grid-tile {
        max-height: 50vh;
    }
}

/* ==================================== */
/*        MEDIA QUERIES FOR BOTH        */
/* ==================================== */
@media only screen and (max-width: 500px) and (min-height: 560px) {

    #tile-0 {
        grid-column: var(--grid-column-0-mobile);
        grid-row: var(--grid-row-0-mobile);
    }

    #tile-1 {
        grid-column: var(--grid-column-1-mobile);
        grid-row: var(--grid-row-1-mobile);
    }

    #tile-2 {
        grid-column: var(--grid-column-2-mobile);
        grid-row: var(--grid-row-2-mobile);
    }

    #tile-3 {
        grid-column: var(--grid-column-3-mobile);
        grid-row: var(--grid-row-3-mobile);
    }

    #tile-4 {
        grid-column: var(--grid-column-4-mobile);
        grid-row: var(--grid-row-4-mobile);
    }

    #tile-5 {
        grid-column: var(--grid-column-5-mobile);
        grid-row: var(--grid-row-5-mobile);
    }

    #tile-6 {
        grid-column: var(--grid-column-6-mobile);
        grid-row: var(--grid-row-6-mobile);
    }

    #tile-7 {
        grid-column: var(--grid-column-7-mobile);
        grid-row: var(--grid-row-7-mobile);
    }

    #tile-8 {
        grid-column: var(--grid-column-8-mobile);
        grid-row: var(--grid-row-8-mobile);
    }

    #tile-9 {
        grid-column: var(--grid-column-9-mobile);
        grid-row: var(--grid-row-9-mobile);
    }

    #tile-10 {
        grid-column: var(--grid-column-10-mobile);
        grid-row: var(--grid-row-10-mobile);
    }

    #tile-11 {
        grid-column: var(--grid-column-11-mobile);
        grid-row: var(--grid-row-11-mobile);
    }

    #tile-12 {
        grid-column: var(--grid-column-12-mobile);
        grid-row: var(--grid-row-12-mobile);
    }

    #tile-13 {
        grid-column: var(--grid-column-13-mobile);
        grid-row: var(--grid-row-13-mobile);
    }

    #tile-14 {
        grid-column: var(--grid-column-14-mobile);
        grid-row: var(--grid-row-14-mobile);
    }

    #tile-15 {
        grid-column: var(--grid-column-15-mobile);
        grid-row: var(--grid-row-15-mobile);
    }
}