.gallery-container {
display: flex;
height: 80vh;
overflow: hidden;
align-items: center;
justify-content: center;
}

.gallery-wrapper {
display: flex;
width: 100%;
height: 60vh;
gap: 10px;
}

.image-column {
flex: 0.3;
transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
position: relative;
cursor: pointer;
border-radius: 10px;
}

/* Die aktive Spalte */
.image-column.expanded {
flex: 2.5;
}

.gallery-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
pointer-events: none; /* Verhindert Drag-Probleme */
}

/* Responsive Design: Tablet */
@media (max-width: 900px) {
.gallery-container {
margin-left: 5%;
margin-right: 5%;
}
.gallery-wrapper {
flex-direction: column;
height: 70vh;
}
.image-column.expanded {
flex: 4;
}
}

/* Responsive Design: Mobile */
@media (max-width: 600px) {
.gallery-wrapper {
height: 75vh;
}
.image-column.expanded {
flex: 3;
}
}

function expandColumn(element) {
// Entferne ‚expanded‘ von allen Spalten
const columns = document.querySelectorAll(„.image-column“);
columns.forEach((col) => {
col.classList.remove(„expanded“);
});
// Füge ‚expanded‘ zur aktuellen Spalte hinzu
element.classList.add(„expanded“);
}

// Unterstützung für Klick auf Mobilgeräten
document.querySelectorAll(„.image-column“).forEach((column) => {
column.addEventListener(„click“, function () {
expandColumn(this);
});
});