/* Font title */
.single-project-title {
    font-family: inherit;
    font-size: 10px;           
    margin-top: 10px;
    text-align: center;  
    width: 100%;
}

/* Container */
.project-page {
    display: flex;
    flex-direction: column;
    gap: 200px; 
    max-width: 100%;
    margin: 0 auto;
    padding: 120px 50px;
}

/* Grid setup */
.row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    width: 100%;
}

.media-container {
    text-align: right;
    width: 100%;
}

.media-container img,
.media-container video {
    width: 100%;
    height: auto;
    display: block;
}

/* Twee afbeeldingen naast elkaar */
.row.two-images {
    display: grid;
    gap: 40px;          
    justify-content: center;
}

/* Grid voor single images */
.row-6 .media-container { 
    grid-column: 4 / 10;
}

.row-8 .media-container {
    grid-column: 5 / 9;
}

.row-12 .media-container {
    grid-column: 3 / 11;
}

/* Grid voor two-images per row-type */
.row-6.two-images .media-container {
    grid-column: span 3; /* 2x3 = 6 kolommen van row-6 */
}

.row-8.two-images .media-container {
    grid-column: span 4; /* 2x4 = 8 kolommen van row-8 */
}

.row-12.two-images .media-container {
    grid-column: span 6; /* 2x6 = 12 kolommen van row-12 */
}


/* Media queries */
@media (max-width: 1024px) {
    .row-6 .media-container,
    .row-8 .media-container,
    .row-12:not(.two-images) .media-container {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .row.two-images .media-container {
        grid-column: 1 / -1; /* onder elkaar op mobiel */
    }
}