@import url(https://fonts.bunny.net/css?family=asap:200,500,800);

body { font-size: 100%; font-family: 'Asap', sans-serif; font-weight: 200; color: #333; line-height: 1.5em; background: #f7f7f7; margin: 0; padding: 0; }

h1 { font-size: 2em; font-weight: 200; font-size: 1.2em; }
.center { text-align: center; }

header { display: flex; justify-content: space-between; align-items: flex-end; }
header, .content, footer { padding: 1.5em 5vw 0; }
footer { border-top: 1px solid #ccc; background: #f5f5f5; box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2); margin-top: 3em; padding-bottom: 1.5em; font-size: 0.9em; }

button { background: transparent; position: relative; }

button.grid { box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs, 1)); height: 21px; width: 21px; border: 2px solid transparent; box-shadow: 0 0 0 2px #999; }

button.grid::after, button.grid::before { content: ""; display: block; box-sizing: border-box; position: absolute; width: 17px; height: 7px; border-right: 7px solid #999; border-left: 7px solid #999; top: 0; left: 0; transition: border-right ease-out 0.2s; }
button.grid::before { top: 10px; transition: top ease-in 0.2s; }

button.grid:hover { box-shadow: 0 0 0 2px #333; }
button.grid:hover::after, button.grid:hover::before { border-right: 10px solid #333; border-left: 7px solid #333; height: 10px; }
button.grid:hover::before { top: 7px; }

button.slider { box-sizing: border-box; overflow: hidden; display: block; transform: scale(var(--ggs, 1)); height: 18px; width: 25px; box-shadow: 2px 0 0 0 #999, -2px 0 0 0 #999; border-top: 2px solid transparent; border-bottom: 2px solid transparent; border-left: none; border-right: none; }
button.slider::after { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 14px; background: #999; }

@keyframes nextSlide {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.1; }
};

button.slider:hover { box-shadow: 2px 0 0 0 #333, -2px 0 0 0 #333; }
button.slider:hover::after { background: #333; animation: nextSlide 1s infinite; opacity: 1; }

figure button, figure i { display: none; }

.control { display: flex; justify-content: flex-end; }

.images { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 2em 0 0; margin-bottom: 3em; }
.images figure { position: relative; margin: 0; padding: 0; width: 22%; aspect-ratio: 1; border-radius: 4px; overflow: hidden; margin: 2em 0; }
.images img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 100%; width: auto; transition: height ease-out 0.2s; }
.images img.portrait { height: auto; width: 100%; transition: width ease-out 0.2s; }

.images figure:hover { box-shadow: inset 0px 0px 16px rgba(0,0,0,0.2); }
.images figure:hover img { height: 110%; z-index: -1; }
.images figure:hover img.portrait { width: 110%; height: auto; }

.images figure.lightbox { position: fixed; top: 0; left: 0; z-index: 3; width: 100vw; height: 100vh; margin: 0; box-sizing: border-box; box-shadow: none; backdrop-filter: blur(16px); }
.images figure.lightbox img { width: 80%; height: auto; border-radius: 4px; box-shadow: 0 0 6px rgba(0, 0, 0, 0.2); }
.images figure.lightbox img.portrait { height: 80%; width: auto; }

figure.lightbox button { box-sizing: border-box; position: absolute; top: 1em; right: 1em; display: block; transform: scale(var(--ggs, 1)); width: 28px; height: 28px; border: 2px solid; border-radius: 46px; }
figure.lightbox button::after, figure.lightbox button::before { content: ""; display: block; box-sizing: border-box; position: absolute; width: 16px; height: 2px; background: #333; transform: rotate(45deg); border-radius: 5px; top: 11px; left: 4px; }
figure.lightbox button::after { transform: rotate(-45deg); }

/* figure.lightbox i { } */

.images.slider { display: block; position: relative; height: 100vh; }

.images.slider figure { position: absolute; margin: 0; top: 0; left: 0; width: 100%; height: 100vh; border-radius: 0; opacity: 0; transition: opacity ease-in 1s; }
.images.slider figure:hover { box-shadow: none; }
.images.slider img { transition: width ease-out 1s; width: 100%; height: auto; }
.images.slider img.portrait { transition: height ease-out 1s; }

.images.slider .active { opacity: 1; }
.images.slider .active img { width: 120%; }
.images.slider .active img.portrait { width: auto; height: 120%; }

header figure { width: 300px; margin: 0; }

@media screen and (max-width: 1300px) {
  .images figure { width: 30%; }
}

@media screen and (max-width: 720px) {
  .images figure { width: 48%; }
}

@media screen and (max-width: 630px) {
  header { flex-direction: column; align-items: center; }
  div.images { margin-top: 0.5em; }
}