<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">:root {
  --img_size: 22rem;
  --img_padding: 3rem;
  --font_size: 2rem;
}
@media screen and (max-width: 48em) {
  :root {
    --img_size: 12.5rem;
    --img_padding: 1.5rem;
    --font_size: 1.5rem;
  }
}

html, body {
  height: 100%;
}

body {
  margin: 0;
}

.gallery {
  width: 100%;
  height: 100%;
  background-color: #fff;
  background-image: radial-gradient(#1A237E 23%, transparent 0), radial-gradient(#1A237E 23%, transparent 0);
  background-size: 0.8rem 0.8rem;
  background-position: 0 0, 0.4rem 0.4rem;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}
.gallery__item {
  min-height: calc(var(--img_size) / 2);
  width: var(--img_size);
  height: auto;
  background-color: #fff;
  border: 5px solid #1A237E;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--img_padding);
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  transition: all 0.15s linear;
}
.gallery__item.is-hidden {
  visibility: hidden;
}
.gallery__item:nth-child(odd).is-hidden {
  transform: translate(100%, 100%);
}
.gallery__item:nth-child(even).is-hidden {
  transform: translate(-100%, -100%);
}
.gallery__item__img {
  width: 90%;
  height: 90%;
}

.click-tap {
  min-height: auto;
  background-color: #1A237E;
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-size: var(--font_size);
  padding: calc(var(--img_padding) / 2);
  text-align: center;
}</pre></body></html>