:root {
  --image-width: 100svw;
  --image-height: calc(var(--image-width) * 9 / 16);
  --film-padding: calc(var(--image-width) * 7.5 / 100);
}

html {
  background-color: var(--spectrum-global-color-gray-100);
}

main {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: auto;
  margin-left: auto;
  width: var(--image-width);
  min-height: 100svh;
  background-color: var(--spectrum-global-color-gray-100);
}

.glide__track {
  box-shadow: 0 -3px 10px rgba(14, 14, 14, 0.15), 0 8px 15px rgba(14, 14, 14, 0.25);
}

.glide__slides {
  padding-top: var(--film-padding);
  padding-bottom: var(--film-padding);
  background-color: var(--spectrum-global-color-gray-75);
}

.glide__slide,
.title,
.title::after {
  transition-duration: 1350ms;
  transition-timing-function: ease-in-out;
}

.glide__slide {
  border-radius: 20px;
  overflow: hidden;
  transition-property: filter;
  will-change: filter;
}

.glide--animating .glide__slide {
  filter: sepia(0.125) brightness(1.75);
}

.glide__slide > img {
  width: var(--image-width);
  height: var(--image-height);
  object-fit: cover;
}

.glide__bullets {
  position: absolute;
  top: calc(50svh + var(--image-height) / 2 - var(--film-padding) / 4);
  margin-top: -1.25px;
  width: 100%;
  height: 2.5px;
  text-align: center;
}

.glide__bullet {
  width: 5.5px;
  height: 100%;
  padding: 0;
  background-color: var(--spectrum-global-color-gray-300);
  border: none;
  vertical-align: top;
  transition: opacity 650ms ease-in;
  will-change: opacity;
}

.glide__bullet:last-of-type {
  display: none;
}

.glide__bullet:first-of-type,
.glide__bullet:nth-last-of-type(2) {
  width: 7px;
}

.glide__bullet:first-of-type {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.glide__bullet:nth-last-of-type(2) {
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}

.glide__bullet--active,
.glide__bullet--active ~ .glide__bullet {
  opacity: 0.15;
  /* animation: bullet-fade-in 1350ms ease-in-out 600ms !important; */
}

.title {
  position: absolute;
  top: calc(50svh + var(--image-height) / 2 + var(--film-padding) * 2.5);
  left: 0;
  margin-top: -10px;
  width: 100%;
  padding-right: var(--film-padding);
  padding-left: var(--film-padding);
  color: var(--spectrum-global-color-gray-500);
  text-align: center;
  line-height: 20px;
  font-family: system-ui;
  font-weight: 200;
  font-size: 15px;
  letter-spacing: -0.015625em;
  transition-property: opacity;
  will-change: opacity;
}

.title::after {
  content: '▶';
  position: absolute;
  top: calc(var(--film-padding) * 2);
  left: 50%;
  display: inline-block;
  margin-top: -11.5px;
  margin-left: -11.5px;
  width: 23px;
  height: 23px;
  padding-left: 1px;
  color: var(--spectrum-global-color-gray-500);
  line-height: 21px;
  font-size: 12px;
  border: 1px solid var(--spectrum-global-color-gray-500);
  border-radius: 50%;
  opacity: 0.5;
  transition-property: opacity;
  transition-delay: 600ms;
  will-change: opacity;
}

.title--vanish,
.title--vanish::after {
  opacity: 0;
}

@media (min-width: 480px) {

  :root {
    --image-width: 480px;
  }

  html {
    background-color: var(--spectrum-global-color-gray-75);
  }

  main {
    box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1) inset, 0 8px 15px rgba(0, 0, 0, 0.2) inset;
  }

}