main {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

main>h1 {
    align-self: center;
}

.recent_project_section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.container_cover {
    width: 100%;
    max-width: 928px;
    max-height: 523px;
    aspect-ratio: 16 / 9;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 8px;
    border: 3px solid #0D0D0D;
    box-shadow: 5px 5px 0px #0D0D0D, 5px 5px 0 1px #F5F5F5;
    transition: 0.3s ease-in-out;
    cursor: pointer;
    position: relative;
}

.card_piv>.container_cover {
    background-image: url(../img/cover_piv.jpg);
}

.card_discobuzz>.container_cover {
    background-image: url(../img/cover_discobuzz.jpg);
}

.card_showreel>.container_cover {
    background-image: url('../img/cover_showreel.jpg');
}

.card_dcrypto>.container_cover {
    background-image: url('../img/cover_dcrypto.jpg');
}

.card_youtube_thumbnail>.container_cover {
    background-image: url('../img/Cover_thumbnail.jpg');
}

.card_poster_f1>.container_cover {
    background-image: url('../img/cover_affiche_canal_+.jpg');
}
.card_poster_fondation_maif>.container_cover {
    background-image: url('../img/Cover_le_reveil_de_la_raison.png');
}

.card_piv>.container_cover:hover {
    background-image: radial-gradient(circle, rgba(37, 37, 37, 0.6) 0%, rgba(37, 37, 37, 0.6) 100%), url('../img/cover_piv.jpg');
    transition: background-image 0.3 linear;
}

.card_discobuzz>.container_cover:hover {
    background-image: radial-gradient(circle, rgba(37, 37, 37, 0.6) 0%, rgba(37, 37, 37, 0.6) 100%), url('../img/cover_discobuzz.jpg');
    transition: background-image 0.3s linear;
}

.card_showreel>.container_cover:hover {
    background-image: radial-gradient(circle, rgba(37, 37, 37, 0.6) 0%, rgba(37, 37, 37, 0.6) 100%), url('../img/cover_showreel.jpg');
    transition: background-image 0.3s linear;
}

.card_dcrypto>.container_cover:hover {
    background-image: radial-gradient(circle, rgba(37, 37, 37, 0.6) 0%, rgba(37, 37, 37, 0.6) 100%), url('../img/cover_dcrypto.jpg');
    transition: background-image 0.3s linear;
}

.card_youtube_thumbnail>.container_cover:hover {
    background-image: radial-gradient(circle, rgba(37, 37, 37, 0.6) 0%, rgba(37, 37, 37, 0.6) 100%), url('../img/Cover_thumbnail.jpg');
    transition: background-image 0.3s linear;
}

.card_poster_f1>.container_cover:hover {
    background-image: radial-gradient(circle, rgba(37, 37, 37, 0.6) 0%, rgba(37, 37, 37, 0.6) 100%), url('../img/cover_affiche_canal_+.jpg');
    transition: background-image 0.3s linear;
}
.card_poster_fondation_maif>.container_cover:hover {
    background-image: radial-gradient(circle, rgba(37, 37, 37, 0.6) 0%, rgba(37, 37, 37, 0.6) 100%), url('../img/Cover_le_reveil_de_la_raison.png');
    transition: background-image 0.3s linear;
}

.card_piv {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.container_cover>svg {
    opacity: 0;
    transition: 0.3s ease-in-out;
    position: absolute;
    font-size: 4rem;
    color: #F5F5F5;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.container_cover:hover {
    box-shadow: none;
    transform: translate(5px, 5px);
    background-size: 100%;
}

.container_cover:hover>svg {
    opacity: 1;
}


.card_discobuzz {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.card_showreel {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.card_dcrypto {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: 0.3s ease-in-out;
}

.card_youtube_thumbnail {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: 0.3s ease-in-out;
}

.card_poster_f1 {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: 0.3s ease-in-out;
}
.card_poster_fondation_maif{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: 0.3s ease-in-out;
}

p>span {
    font-family: Sora;
    font-size: 1rem;
    font-weight: bold;
}

@media screen and (min-width:768px) {
    .recent_project_section {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2.5rem;
    }

    .card_piv,
    .card_discobuzz,
    .card_showreel,
    .card_dcrypto,
    .card_youtube_thumbnail,
    .card_poster_f1,
    .card_poster_fondation_maif {
        width: 40%;
    }
}