body {
    height: 400vh;
}




#scroll-progress {
    position: fixed;
    bottom: 40px;
    left: 20px;
    width: 200px;
    height: 20px;
    border: 1px solid red;
}

#contenu {
    margin-top: 8vh;
}

.ficcions,
.documentaris,
.talhiers,
.virguetas {
    width: calc((100vw - 80px) / 4);
    height: calc(((100vw) / 4) * 315 / 560);
    /* border: 1px solid; */
    /* width: fit-content; */
    display: inline-block;
    margin: 0;
    margin-right: -0px;
    margin-left: -2px;
    padding: 10px;
}

.ficcions iframe,
.talhiers iframe,
.documentaris iframe,
.virguetas img,
.ficcions video {
    width: calc((100vw - 160px) / 4);
    height: calc(((100vw - 160px) / 4) * 315 / 560);
    border-radius: 20px;
    /* border: 1px solid red; */
}

/* .ficcions {
    border: 3px solid purple;
}
.talhiers {
    border: 3px solid green;
}
.documentaris {
    border: 3px solid yellow;
}
.virguetas {
    border: 3px solid red;
} */



@media (max-aspect-ratio: 100/99) {}