*, *::before, *::after {
    box-sizing: border-box;
}

/* Hauptcontainer - Hintergrund Bild */
.frame-container.masonry{
    width: 100%;
    padding-bottom: 80px;
    margin: 20px 0 0 0;
}

/* Das Grid */
.grid {    display: flex;    flex-wrap: wrap;    width: 80%;    max-width: 100%;    padding: 0;    margin: 20px auto;    position: relative;  }

/* Sicherstellen, dass Bilder die Grid-Items füllen */
.grid-item {
    box-sizing: border-box;
    flex: 1 1 calc(33.333% - 10px);
    margin-bottom: 10px; /* Abstand zwischen den Elementen */
    position: relative; /* Standard für Masonry-Positionierung */
    float: left; /* Um sicherzustellen, dass die Elemente nebeneinander angezeigt werden */
    z-index: 999;
}

.grid-item img {    width: 100%;    height: auto;   display: flex; opacity: 0.8; transition: filter 0.5s ease;}
.grid-item img:hover {  opacity: 1; }
.grid-item img.active {  opacity: 1; }

@media (min-width: 300px) {
    .frame-container.masonry{        padding-bottom: 10px;     margin: 30px 0 0 0;   }
}


@media (min-width: 768px) {
    .grid {        margin: 100px auto;    }
    .frame-container.masonry{        padding-bottom: 30px;     margin: 50px 0 0 0;   }
    .grid-item {  width: calc(50% - 10px);  padding: 0 10px;  }
        /* Grid-Item-1 zweite Spalte einrücken von Oben */

}


@media (min-width: 992px) {
    .frame-container.masonry{        padding-bottom: 50px;   margin: 20px 0 0 0; }
    .grid-item {  width: calc(33.333% - 10px);  padding: 0 10px;  }

}