.video-preview-bg {
    height: 200px;
}

#videos {
    grid-template-columns: repeat(4, 1fr);
    row-gap: 1vh;
    column-gap: 3vh;
    width: fit-content;
    height: 80vh;
    display: none;
    overflow-y: scroll;
    margin: 0 auto;
    scrollbar-color: #E374CA #6735B2;

    &.show-results {
        display: grid;
    }

    & .video-preview-border:hover {
        filter: drop-shadow(0 0 10px white);
        cursor: pointer;
    }

    & .video-preview-bg.current {
        border: 2px solid gold;
    }
}

#current-video:has(iframe) {
    height: 62vh;
}

@media (max-height: 900px) {
    #current-video:has(iframe) {
        height: 50vh;
    }
}

@media (max-width: 1500px) {
    #current-video:not(:has(iframe)) + #videos {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1400px) {
    #current-video:not(:has(iframe)) + #videos {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 760px) {
    #current-video:not(:has(iframe)) + #videos {
        grid-template-columns: repeat(1, 1fr);
    }
    #character-select-list {
        width: 100%;
    }
}

.video-preview-border, .candidate-video {
    height: 100%;
}

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

#current-video:has(iframe) {
    grid-area: 1 / 1 / 3 / 5;
}

.display-video:has(iframe) {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0.8vh;
}

#current-video:has(iframe) + #videos {
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    display: flex;
    overflow-y: hidden;
    overflow-x: scroll;
    grid-area: 3 / 1 / 3 / 5;
    width: 100%;
    height: fit-content;
}