* {
	 box-sizing: border-box;
}
/* font */
/* body */
 img {
	 max-width: 100%;
}

/* sprite svg */
 .sprite-svg {
	 display: none;
}

/* images wrapper */
 .wrapper {
	 display: block;
	 width: 100%;
	 max-width: 1200px;
	 columns: 1;
	 column-gap: 0;
	 break-inside: avoid;
	 margin: 20px 2rem 50px;
}
 @media (min-width: 600px) {
	 .wrapper {
		 columns: 2;
	}
}
 @media (min-width: 800px) {
	 .wrapper {
		 columns: 3;
	}
}
 .grid-image {
	 float: left;
	 width: 100%;
	 padding: 4px;
}
 .grid-image img {
	 width: 100%;
}
 .zoom-wrapper {
   display: none;
   position: fixed;
   left: 0;
   top: 0;
   bottom: 0;
   width: 100%;
   overflow: auto;
   background-color: rgb(0 15 159 / 0.9);
   z-index: 2;
}
 .zoom-wrapper:target {
	 display: flex;
}
 @keyframes top-animation {
	 from {
		 top: -100px;
		 opacity: 0;
	}
	 to {
		 top: 0px;
		 opacity: 1;
	}
}
 .zoom-wrapper__image {
	 position: relative;
	 width: 80%;
	 max-width: 1000px;
   padding-top: 6rem;
	 /*height: 100%;*/
	 margin: auto;
	 display: flex;
	 /*justify-content: center;*/
	 align-items: center;
	/* animation */
	 animation-name: top-animation;
	 animation-duration: 0.5s;
}

img {
    vertical-align: baseline;
}

 .cell {
	 box-flex: 1;
	 flex: 1 1 auto;
}

.zoom-image {
  max-height: 80vh;
  max-width: 80vh;
}

/* arrow navigation */
 .navigation-arrow {
	 position: fixed;
	 top: 50%;
	 transform: translateY(-50%);
	 perspective: 1000px;
	 perspective-origin: 100% 50%;
}
 .navigation-arrow__left {
	 left: 0;
}
 .navigation-arrow__next {
	 right: 0;
}
 .navigation-arrow__image {
	 position: absolute;
	 width: 100px;
	 height: 100px;
	 overflow: hidden;
	 transition: transform 0.3s;
}
 .navigation-arrow__prev .navigation-arrow__image {
	 left: 40px;
	 transform: rotateY(90deg);
	 transform-origin: 0% 50%;
}
 .navigation-arrow__next .navigation-arrow__image {
	 right: 40px;
	 transform: rotateY(-90deg);
	 transform-origin: 100% 50%;
}
 .navigation-arrow__image img {
	 width: 100%;
	 height: 100%;
	 object-fit: cover;
}
 .navigation-arrow__prev:hover .navigation-arrow__image, .navigation-arrow__next:hover .navigation-arrow__image {
	 transform: rotateY(0deg);
}
 .navigation-arrow__icon {
	 position: relative;
	 display: block;
	 width: 40px;
	 height: 100px;
	 padding: 15px;
	 background-color: #000f9f;
}
 .navigation-arrow__icon svg.icon {
	 top: 50%;
	 transform: translateY(-50%);
	 fill: white;
	 position: relative;
	 stroke-width: 2;
	 stroke: white;
}

.navigation-arrow__icon svg.icon:hover {
  fill: #00ff00;
  stroke: #00ff00;
}
 .zoom-wrapper__close {
	 position: fixed;
	 top: 10px;
	 right: 10px;
	 z-index: 1;
	 color: #fff;
	 font-size: 40px;
	 text-decoration: none;
	 text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
}

.zoom-wrapper__close a:hover {
  color: #00ff00;
  text-decoration: none;
}

.zoom-wrapper__image p {
  position: absolute;
  top: 0;
  padding: 0.5rem 0 0 0rem;;
}

.zoom-wrapper video {
  max-width: 100%;
  max-height: 47rem;
}

@media only screen and (max-width: 700px) {
  .zoom-image {
    max-height: 100%;
    max-width: 100%;
 }
}