.cv {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, auto);
    grid-column-gap: var(--gap-small);
    grid-row-gap: var(--gap-small);
}

.cv div {
    border-radius: var(--border-radius);
}

.cv-1 {
    grid-area: 1 / 1 / 6 / 2;
    display: flex;
    flex-direction: column;
    gap: var(--gap-small);
}

.cv-3 {
    grid-area: 1 / 2 / 2 / 3;
}

.cv-4 {
    grid-area: 2 / 2 / 3 / 3;
}

.cv-5 {
    grid-area: 3 / 2 / 4 / 3;
}

.cv-6 {
    grid-area: 4 / 2 / 5 / 3;
}

.cv-7 {
    grid-area: 5 / 2 / 6 / 3;
}








.title {
    font-size: max(1.4dvw, 16px);
    font-weight: var(--fw-bold);
}

.subtitle {
    font-size: max(1.1dvw, 12px);
    font-weight: var(--fw-medium);
}

.italic {
    font-style: italic;
    font-size: max(1dvw, 10px);
}





.profil-picture {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;

    background-image:
        var(--project-gradient-profil-front),
        url(../assets/img/homepage/profil.webp),
        var(--project-gradient-profil-background);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    padding-bottom: 5%;

    font-family: var(--font-title);
    font-weight: var(--fw-bold);
    text-align: center;
}





.school-display {
    height: 100%;
    grid-area: 5 / 1 / 6 / 2;
    background-image: var(--project-gradient-profil-background);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-medium);
    padding: var(--padding-big);
}

.school {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gap-small);
}

.school-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--gap-small);
}

.school p {
    color: var(--color-white);
}





.experience {
    display: flex;
    flex-direction: column;
    padding: var(--padding-big);
    background-color: var(--color-white);
}

.experience div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}






.skills {
    grid-column-gap: var(--gap-small);
    grid-row-gap: var(--gap-small);
}






.skills {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
}

.skills div {
    background-color: var(--color-white);
    padding: var(--padding-big);
    border-radius: var(--border-radius);
}

.skills-1 {
    grid-area: 1 / 1 / 2 / 2;
}

.skills-2 {
    grid-area: 1 / 2 / 2 / 3;
}

.skills-3 {
    grid-area: 1 / 3 / 2 / 4;
}

.skills-4 {
    grid-area: 2 / 1 / 3 / 2;
}

.skills-5 {
    grid-area: 2 / 2 / 3 / 3;
}

.skills-6 {
    grid-area: 2 / 3 / 3 / 4;
}


.skills-list {
    display: flex;
    flex-direction: row;
    gap: 5%;
}

.skills-list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.skills-list img {
    width: 32px;
    height: 32px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 6px;
    filter: drop-shadow(0 0 0.50rem #00000059);
}

.skills-list p {
    text-align: center;
    font-size: max(1dvw, 10px);
}



















.bande-presentation {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: var(--gap-small);

    padding: var(--padding-big);
    border-radius: var(--border-radius);
    background-color: var(--color-white);
}



.climbing,
.theater,
.boardgame,
.videogame {
    grid-column-gap: var(--gap-small);
    grid-row-gap: var(--gap-small);
}



.climbing {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, auto);
}

.climbing-1 {
    grid-area: 1 / 1 / 4 / 3;
    height: 100%;
}

.climbing-2 {
    grid-area: 1 / 3 / 2 / 5;
}

.climbing-3 {
    grid-area: 2 / 3 / 3 / 4;
    height: 100%;
}

.climbing-4 {
    grid-area: 2 / 4 / 3 / 5;
    height: 100%;
}

.climbing-5 {
    grid-area: 3 / 3 / 4 / 4;
    height: 100%;
}

.climbing-6 {
    grid-area: 3 / 4 / 4 / 5;
    height: 100%;
}









.theater,
.boardgame {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, auto);
}

.theater-1,
.boardgame-1 {
    grid-area: 1 / 1 / 2 / 3;
}

.theater-2,
.boardgame-2 {
    grid-area: 2 / 1 / 3 / 2;
    height: 100%;
}

.theater-3,
.boardgame-3 {
    grid-area: 2 / 2 / 3 / 3;
    height: 100%;
}

.theater-4,
.boardgame-4 {
    grid-area: 3 / 1 / 4 / 2;
    height: 100%;
}

.theater-5,
.boardgame-5 {
    grid-area: 3 / 2 / 4 / 3;
    height: 100%;
}

.theater-6,
.boardgame-6 {
    grid-area: 1 / 3 / 4 / 5;
    height: 100%;
}












.videogame {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, auto);
}

.videogame img {
    height: 100%;
}

.videogame-1 {
    grid-area: 1 / 1 / 5 / 3;
}

.videogame-2 {
    grid-area: 1 / 3 / 2 / 5;
}

.videogame-3 {
    grid-area: 2 / 3 / 3 / 4;
}

.videogame-4 {
    grid-area: 2 / 4 / 3 / 5;
}

.videogame-5 {
    grid-area: 3 / 3 / 4 / 4;
}

.videogame-6 {
    grid-area: 3 / 4 / 4 / 5;
}

.videogame-7 {
    grid-area: 4 / 3 / 5 / 4;
}

.videogame-8 {
    grid-area: 4 / 4 / 5 / 5;
}
















@media (max-width: 768px) {
    .experience div {
        flex-direction: column;
        gap: var(--gap-small);
    }

    .school-title {
        flex-direction: column;
        gap: var(--gap-small);
    }

    .skills {
        display: flex;
        flex-direction: column;
        gap: var(--gap-small);
    }

}