.container-background {
    min-height: 100vh;
    background-color: #232323;
    padding-top: 7rem;
    padding-bottom: calc( 5rem + 10% );
}

.container-background h1 {
    color: #fff;
    font-family: 'Josefin Sans', sans-serif;
    font-size: calc(32px + 1.5vw);
    font-weight: 400;
    margin-bottom: 3%;
}

.container-background h1 span {
    font-weight: 900;
    font-style: italic;
}

.container-background p {
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: calc(20px + 0.35vw);
    font-weight: 300;
}

.wrapper-text {
    padding: 2rem 8rem;
    width: 80%;
}

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 items per row by default */
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
    padding: 2rem 8rem;
}

.carre-container {
    box-sizing: border-box;
    flex: 1 0 calc(33.33% - 27px);
    margin: 10px;
    background-color: #393939;
    text-align: center;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-bottom: 8px;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.carre-container video {
    width: 100%;
    height: 100%;
}

.carre-container h3 {
    font-family: 'Open Sans', sans-serif;
    font-size: calc(20px + 0.35vw);
    font-weight: 700;
    margin-left: 15px;
}


.carre-container h4 {
    font-family: 'Open Sans', sans-serif;
    font-size: calc(16px + 0.25vw);
    font-weight: 200;
    font-style: italic;
    margin-left: 15px;

}

.portrait {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0%;
}


@media screen and (max-width: 1400px) {
    .grid {
        grid-template-columns: repeat(3, 1fr); /* 3 items per row on desktop */
    }
}

@media screen and (max-width: 968px) {
    .grid {
        grid-template-columns: repeat(2, 1fr); /* 2 items per row on iPad */
        padding: 0;
        width: 80%;
        margin: auto;
    }
    .wrapper-text {
        padding: 0;
        width: 80%;
        margin: auto;
    }

}

@media screen and (max-width: 680px) {
    .grid {
        grid-template-columns: repeat(1, 1fr); /* 1 item per row on mobile */
    }
}

@media screen and (max-width: 768px) {
    .container-background {
        padding-bottom: calc( 12rem + 38% );
    }
}