/* Gallerie */      
    
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-block-size: 100vh;
  /* padding: 5vmin; */
}

img {
  block-size: auto;
  max-inline-size: 100%;
  vertical-align: middle;
  
}

/* Embed */

.embed {
  overflow: hidden;
  padding-block-start: 100%;
  position: relative;
}

 

.embed--1-2 {
  padding-top: calc(100% / (1 / 2));
}

.embed--2-1 {
  padding-top: calc(100% / (2 / 1));
}

.embed--2-3 {
  padding-top: calc(100% / (2 / 3));
}

.embed > * {
  height: 100%;
  left: 0;
  object-fit: cover;
  padding: 0.25em;
  position: absolute;
  top: 0;
  width: 100%;
}

/* Gallery  */

.gallery {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(5, 1fr);
  z-index: 1;
}

.gallery__item--h-2 {
  grid-column-end: span 2;
}

.gallery__item--h-3 {
  grid-column-end: span 3;
}

.gallery__item--v-2 {
  grid-row-end: span 2;
}

.gallery__item--v-3 {
  grid-row-end: span 3;
}   

.gallery img:hover {
        background: white;
       } 
 
 
/* großes Bild im Vordergrund*/ 
.trans
{
	transition: all 2s ease;
	-moz-transition: all 2s ease;
	-ms-transition: all 2s ease;
	-o-transition: all 2s ease;
	-webkit-transition: all 2s ease;
}
.lightbox
{
	position: fixed;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.75);
	z-index: 999;
	opacity: 0;
	pointer-events: none;
}
.lightbox img
{
	max-width: 90%;
	max-height: 80%;
	position: relative;
	top: 50%;
    transform: translateY(-50%); 
}
.lightbox:target
{
	outline: none;
	top: 0;
	opacity: 1;
	pointer-events: auto;

}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
  *zoom: 1;
}