/* Ab hier Bilderanimation*/ 

.album {
    margin: auto; }
   

.album__fotos {
   list-style: none;           /* keine Listenpunkte */  
    }
 
    

.album__eintrag {
    float:left;                 /* nach links fließen */
    width: 20%;                 /* 5 pro Zeile*/
    padding: 0.5rem;              /* Innenabstand */
    box-sizing: border-box;     /* Breite schließt Rahmen und Innenabstand ein! */
    font-size: 0.8rem;
          }

.album__link {
    display: block;             /* als Blockelement anzeigen */
    position: relative;         /* dieses Element relativ positionieren, damit enthaltene Elemente an diesem absolut positioniert werden können */
    overflow: hidden;           /* Überlauf nicht anzeigen (für Zoom-Effekt) */
                        
}

.album__foto {
    display: block;             /* als Blockelement anzeigen */
    max-width: 100%;            /* maximal 100% Breite */
    height: auto;               /* Höhe automatisch im korrekten Seitenverhältnis anpassen */
    transition: all 0.5s;       /* Transition über alle veränderbaren Eigenschaften  */
    background-color:rgb(239, 252, 220, 0.4);
}


.album__link:hover .album__foto {
    transform: scale(1.1); /* Transformationseffekt: Vergrößerung*/
}

/* Anzeigebreite bis 1200 Pixel */

@media screen and (max-width: 1200px) {
    .album__eintrag {
        width: 20%;             /* 5 Bilder pro Zeile */
    }
}
/* Anzeigebreite bis 800 Pixel */

@media screen and (max-width: 800px) {
    .album__eintrag {
        width: 25%;             /* 4 Bilder pro Zeile */
    }
}

@media screen and (max-width: 600px) {
    .album__eintrag {
        width: 33%;             /* 3 Bilder pro Zeile */
    }
}

/* Anzeigebreite bis 320 Pixel */

@media screen and (max-width: 360px) {
    .album__eintrag {
        width: 50%;            /* 2 Bilder pro Zeile */
          }
    .album__link {
        max-width: 140px;       /* maximal Bildbreite */
        margin: 0 auto;         /* horizontal zentrieren */
    }
}