@import "../component-pagination/style.css";
@import "../component-loading/style.css";

.video-list{
    padding: 40px 24px 100px;
    >.render-area{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 40px 24px;
        
        >a{
            position: relative;
            aspect-ratio: 16 / 9;
            overflow: hidden;
            >img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                transform: scale(1);
                transition: transform .3s;
            }
            >.cover{
                position: absolute;
                inset: 0;
                background-color: rgba(0,0,0,0.6);
                display: grid;
                place-content: center;
            }

            &:hover > img{
                transform: scale(1.1);
            }
        }
    }
    >.component-pagination{
        margin-top: 60px;
        justify-content: center;
    }
}

@media screen and (width < 576px) {
    .video-list{
        padding: 0px 24px 60px;
        >.render-area{
            gap: 24px;
        }
        >.component-pagination{
            margin-top: 40px;
        }
    }
}