* {
    box-sizing: border-box;
}

html {
    height: 100%;
    width: 100%;
}

html {
    display: grid;
    place-items: center;
}

body {
    margin: 0;
    max-height: 100dvh;
}

main {
    max-height: 100dvh;

    border-inline: solid 1px black;

    display: grid;
    grid-template-columns: repeat(var(--cols-amt, 4), 1fr);
}

main, video, img {
    max-width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0;
}

video, img {
    width: 100%;
    transition: 2500ms all linear;
    animation: slidein;
}