/* #BASE */

html {
  font-size: 62.5%;
  margin: 0;
  padding: 0;
}

body {
  font-size: 12px;
  font-family: "Arial", sans-serif;
  min-height: 100vh;
	min-height: 100dvh;
  margin: 0;
  text-transform: uppercase;
}

h2 {
  font-size: 12px;
  font-weight: 400;
  margin: 0 16px 16px;
  padding: 0;
}

figure {
  margin: 0;
  padding: 0;
}

img {
  height: auto;
  width: 100%;
  max-width: 100%;
}

.copy {
  margin: 0 16px 64px;
}

/* #KEEN SLIDER */

.keen-slider {
  display: flex;
  align-content: flex-start;
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
  user-select: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}

.keen-slider .keen-slider__slide {
  min-height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* #GALLERY */

/**
 * My overrides for the Keen Slider gallery.
 *
 * 1. Remove `overflow: hidden` from the slider and add it to the parent. This
 *    allows the slider to align with the grid but also bleed off the edges of
 *    the page.
 * 2. Align container with the global grid.
 */

.gallery {
  margin-bottom: 64px;
  overflow: hidden; /* [1] */
  padding: 0 16px; /* [2] */
}

.gallery .keen-slider {
  overflow: visible; /* [1] */
}

/**
 * As the widths for each slide are set in Javascript. We add widths to slides
 * before `.keen-slider` has loaded to keep the layout consistent and help with
 * the Cumulative Layout Shift (CLS) and performance.
 */

.keen-slider:not(.loaded) {
  gap: 8px;
}

.keen-slider:not(.loaded) .keen-slider__slide {
  flex-shrink: 0;
  width: calc((100vw / 1.5) - 24px);
}

@media (min-width: 48em) {
  .keen-slider:not(.loaded) .keen-slider__slide {
    width: calc((100vw - 48px) / 3);
  }
}

@media (min-width: 64rem) {
  .keen-slider:not(.loaded) .keen-slider__slide {
    width: calc((100vw - 56px) / 4);
  }
}

/* #PIXEL LOAD */

/**
 * Add a pixelated effect to images while the load.
 */

.pixel-load {
  overflow: hidden;
  position: relative;
}

.pixel-load__preload img {
  image-rendering: pixelated;
  position: absolute;
  inset: 0;
  opacity: 1;
  pointer-events: none;
}

.loaded .pixel-load__preload img {
  animation: loaded 0.32s 0.16s steps(1, end) both;
}

@keyframes loaded {
  0% {
    scale: 2;
  }
  33% {
    scale: 1.5;
  }
  66% {
    scale: 1;
  }
  100% {
    opacity: 0;
    z-index: 1;
  }
}