.info {

    display: flex;
    flex-direction: row;
    height: 120px;
    margin: 50px auto;
    color: #012E40;
    width: 960px;

    & .logo-container {
        width: 120px;
        background: #012E40;
    }

    & .desc {

        padding-left: 20px;
        padding-bottom: 20px;
        flex: 1;

        & h3 {
            margin-top: 0;
        }

        border-bottom: 3px solid #012E40;
        border-left: 3px solid #012E40;

    }

}

.video-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 50px auto;
}

.video-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes égales */
    gap: 1.5rem; /* espace entre les éléments */
    padding: 1rem;
    margin: 0 15rem;

    & .video-desc {
        grid-column: span 2; /* prend 2 colonnes */
        background-color: #024959;
        color: #F2E3D5;
        padding: 1rem;
        border-radius: 8px;
    }

    & .video-series {
        background-color: #012E40;
        color: #F2E3D5;
        padding: 1rem;
        border-radius: 8px;
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    & .video-series:hover {
        transform: scale(1.02);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    & .video-counter {
        background-color: #024959;
        margin-top: 1rem;
        padding: 0.5rem;
        border-radius: 8px;
        font-weight: bold;
        color: #F2E3D5;
    }
}

.video-list-item {

    margin: 0 15rem;

    display: flex;
    flex-direction: column;
    gap: 1rem;

    & .video-list-item-container {
        background-color: #012E40;
        text-align: center;
        border-radius: 8px;
        color: #F2E3D5;
        cursor: pointer;

        transition: transform 0.250s ease, box-shadow 0.250s ease;

        &:hover {
            transform: scale(1.02);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
    }

}