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

.video-list {
    >.video-list-instagram>.container,
    >.video-list-youtube>.container {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

.video-list-search {
    padding-top: 80px;

    >div {
        padding: 40px;
        border-radius: 20px;
        background-color: var(--color-secondary-1);
    }
}
#video-list-search {
    display: flex;
    align-items: center;
    padding: 12px 32px;
    border-radius: 999px;
    background-color: white;

    >input {
        flex-grow: 1;
        border: none;
        border-radius: 0px;
        outline: none;
        padding: 0;
        font-weight: 500;
        color: var(--color-gray-1);

        &::placeholder {
            color: var(--color-gray-3);
        }
    }
}

.video-list-instagram>.container {
    >.render-area {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 60px 24px;

        
        >.no-data {
            grid-column: 1 / -1;
            text-align: center;
        }
    }
}
.video-list-instagram-card {
    >.img {
        overflow: hidden;
        aspect-ratio: 9 / 16;
        margin-bottom: 16px;

        >img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s;
        }
    }

    >h4 {
        transition: color 0.3s;
    }

    &:hover {
        >.img>img {
            transform: scale(1.1);
        }

        >h4 {
            color: var(--color-primary-2);
        }
    }
}

.video-list-youtube {
    background-color: var(--color-secondary-1);

    >.container {
        >.render-area {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 60px 24px;

            
            >.no-data {
                grid-column: 1 / -1;
                text-align: center;
            }
        }
    }
}
.video-list-youtube-card {
    >.img {
        overflow: hidden;
        border-radius: 10px;
        aspect-ratio: 16 / 9;
        margin-bottom: 24px;

        >img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s;
        }
    }

    >h4 {
        transition: color 0.3s;
    }

    &:hover {
        >.img>img {
            transform: scale(1.1);
        }

        >h4 {
            color: var(--color-primary-2);
        }
    }
}

@media screen and (width < 1024px) {
    .video-list-search > div{
        padding: 24px;
    }
}

@media screen and (width < 768px) {
    .video-list-instagram>.container > .render-area {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (width < 576px) {
    .video-list {
        >.video-list-instagram>.container,
        >.video-list-youtube>.container {
            padding-top: 60px;
            padding-bottom: 60px;
        }
    }
    .video-list-search {
        padding-top: 60px;
    }
    #video-list-search {
        padding: 8px 20px;
    }
    .video-list-instagram>.container > .render-area,
    .video-list-youtube>.container > .render-area {
        gap: 40px 24px;
    }
}