/* Styles for Latest Video and Articles Sections */
#latest-video-container,
#articles-container {
    display: flex;
    flex-direction: column;
    row-gap: 0.5em;
    margin: 1em;
}

#latest-video-iframe {
    width: 60%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0.2em solid rgb(26, 31, 44);
    align-self: center;
}

/* Styles for article list */
#articles-list {
    display: flex;
    flex-direction: column;
    row-gap: 1em;
    margin: 1em;
}

.article-list-item {
    background-color: rgb(26, 31, 44);
    padding: 1em;
    box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
    color: white;
    transition: all 0.2s ease-in-out;
}

.article-list-item:hover {
    background-color: rgb(36, 41, 54);
    cursor: pointer;
    margin-left: 0.2em;
    transition: all 0.2s ease-in-out;
}

@media (max-width: 768px) {
    #latest-video-iframe {
        width: 100%;
    }

    #latest-video-container,
    #articles-container {
        margin: 0.5em;
    }

    #articles-list {
        margin: 0.2em;
    }
}