body {
  justify-content: center;
  align-items: center;
  background: #343748;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 58.4px);
    grid-auto-rows: 56px;
    grid-gap: 2px;
}

.grid .item-grid {
    background: white;
}

.content-member {
    height: 100%;
    position: relative;
}

.content-member:hover {
    cursor: pointer;
}

.content-member p {
    display: none;

    position: absolute;
    color: white;
    text-align: center;
    width: 58.5px;
    max-width: 58.5px;
    padding: 0.15rem .10rem;
    font-size: 0.35rem;

    background: black;
    z-index: 3;
}

.content-member img {
    height: 100%;
    width: 100%;
    object-fit: cover;


}

.grid .item-grid.main {
    background-color: #343748;
    grid-column: span 11;
    grid-row: span 6;
}

.grid .item-grid.main video {
    height: 100%;
    width: 100%;
}

@media (min-width: 320px){
    .grid {
        grid-template-columns: repeat(auto-fill, 69.8px);
        grid-auto-rows: 69px;
    }

    .grid .item-grid.main {
        order: 200;
        grid-column: span 4;
        grid-row: span 3;
    }
}

@media (min-width: 360px){
    .grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, 63.4px);
        grid-auto-rows: 64px;
    }

    .grid .item-grid.main {
        order: 200;
        grid-column: span 5;
        grid-row: span 3;
    }

    h6 {
        font-size: 0.8rem;
    }
}

@media (min-width: 375px){
    .grid {
        grid-template-columns: repeat(auto-fill, 66.4px);
        grid-auto-rows: 67px;
    }
}

@media (min-width: 388px){
    .grid {
        grid-template-columns: repeat(auto-fill, 69.8px);
        grid-auto-rows: 68px;
    }
}

@media (min-width: 410px){
    .grid {
        grid-template-columns: repeat(auto-fill, 61.4px);
        grid-auto-rows: 62px;
    }

    .grid .item-grid.main {
        order: 240;
        grid-column: span 6;
        grid-row: span 4;
    }
}

@media (min-width: 540px){
    .grid .item-grid.main {
        order: 250;
    }
}

@media (min-width: 768px){
    .grid {
        grid-template-columns: repeat(auto-fill, 64.6px);
        grid-auto-rows: 64px;
    }

    .grid .item-grid.main {
        grid-column: span 7;
    }

}

@media (min-width: 820px){
    .grid {
        grid-template-columns: repeat(auto-fill, 69.5px);
        grid-auto-rows: 69px;
    }
}

@media (min-width: 910px){
    .grid {
        grid-template-columns: repeat(auto-fill, 71.5px);
        grid-auto-rows: 71px;
    }

    .grid .item-grid.main {
        order: 500;
        grid-column: span 8;
    }
}

@media (min-width: 1024px){
    .grid {
        grid-template-columns: repeat(auto-fill, 64.15px);
        grid-auto-rows: 64px;

        grid-template-columns: repeat(auto-fill, calc(100%/15));
        grid-auto-rows: calc(100%/17);
        grid-gap: 0px;
    }

    .grid .item-grid.main {
        order: 480;
        grid-column: span 9;
    }
}

@media (min-width: 1200px){
    .grid {
        grid-template-columns: repeat(auto-fill, 66.6px);
        grid-auto-rows: 67px;

        grid-template-columns: repeat(auto-fill, calc(100%/17));
        grid-auto-rows: calc(100%/14);
        grid-gap: 0px;
    }

    .grid .item-grid.main {
        order: 560;
        grid-column: span 7;
    }
}

@media (min-width: 1439px){
    .grid {
        grid-template-columns: repeat(auto-fill, 58.5px);
        grid-auto-rows: 58px;

        grid-template-columns: repeat(auto-fill, calc(100%/23));
        grid-auto-rows: calc(100%/12);
        grid-gap: 0px;
    }

    .grid .item-grid.main {
        order: 750;
        grid-column: span 11;
        grid-row: span 6;
    }
}

/*
@media (min-width: 1850px){
    .grid {
        grid-template-columns: repeat(auto-fill, 76.9px);
        grid-auto-rows: 77px;
    }
}

@media (min-width: 1900px){
    .grid {
        grid-template-columns: repeat(auto-fill, 79.9px);
        grid-auto-rows: 79px;
    }
}

@media (min-width: 2560px){
    .grid {
        grid-template-columns: repeat(auto-fill, 107.5px);
        grid-auto-rows: 108px;
    }

    .grid .item-grid.main {
        order: 750;
        grid-column: span 11;
        grid-row: span 6;
    }
}

@media (min-width: 3072px){
    .grid {
        grid-template-columns: repeat(auto-fill, 129.8px);
        grid-auto-rows: 144px;
    }

    .grid .item-grid.main {
        order: 750;
        grid-column: span 11;
        grid-row: span 6;
    }
}
*/