:root {
    --rowNum: 1;
    --colNum: 1;
    --gridHeight: calc(100vh / var(--rowNum) - 5px * (var(--rowNum) - 1) / var(--rowNum));
  }

body
{
    background-color: black;
}
.wrapper
{
display:grid;
grid-template-columns: repeat(var(--colNum),auto);
grid-template-rows: repeat(var(--rowNum), var(--gridHeight));
align-items: center;
justify-items: center;
grid-column-gap: 3px;
grid-row-gap: 3px;

}

.grid-item {
    grid-column-start: auto;
    grid-row-start: auto;
    width: 100%;
    height: 100%;
}

@media only screen and (max-device-width: 480px) {
    .grid-item {
        grid-column-start: auto;
        grid-row-start: auto;
        width: 100%;
        height: 100%;
        object-fit: fill;
    }

    :root {
        --rowNum: 1;
        --colNum: 1;
        --gridHeight: calc(75vh / var(--rowNum));
      }
}