@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  padding-inline-start: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  scroll-behavior: smooth;
  interpolate-size: allow-keywords;
}
*:focus {
  outline: none;
}

html {
  scroll-behavior: smooth;
  min-height: -webkit-fill-available;
  overflow-x: hidden;
}

body {
  font-family: "Inter", helvetica, sans-serif;
  display: grid;
  grid-template-rows: auto;
  gap: 0;
  min-height: 100dvh;
  background-color: black;
  color: white;
}

.smooth-type, body {
  -moz-osx-font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
}

img, video {
  opacity: 0.8;
}

a {
  color: inherit;
}

.mix-title {
  grid-column: text;
  grid-row: 1;
  z-index: 10;
  transform: rotate(180deg);
  align-content: center;
  pointer-events: none;
  display: block;
}
@media (max-aspect-ratio: 5/8) {
  .mix-title {
    grid-column: full;
    transform: rotate(0deg);
  }
}
.mix-title h2 {
  padding-inline: 0.5em;
  writing-mode: vertical-rl; /* vertical right-to-left */
  font-size: clamp(4rem, 12.5vmin, 12.5vmin);
  font-weight: 300;
  letter-spacing: -0.09em;
  line-height: 85%;
  text-box-edge: cap alphabetic;
  text-box-trim: trim-both;
}
@media (max-aspect-ratio: 5/8) {
  .mix-title h2 {
    writing-mode: sideways-lr;
    padding-inline: 0;
  }
}
.mix-title span {
  display: block;
}
.mix-list {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}
.mix-item {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid;
  grid-template-columns: [full start] 1fr [text-start] minmax(2rem, 10vmin) [image-start] minmax(2rem, 10vmin) [text-end] 60vmin [space-start] minmax(2rem, 10vmin) [image-end] minmax(2rem, 10vmin) [space-end] 1fr [full-end];
  width: 100%;
  height: 100vh;
  background: black;
  color: white;
  padding-block: 10vmin;
  padding-inline: 4vmin;
  overflow: hidden;
}
@media (max-aspect-ratio: 1/1) {
  .mix-item {
    grid-template-columns: 1fr;
    grid-template-columns: [full start] 0 [text-start] 1fr [image-start] 1fr [text-end] 6fr [space-start] 1fr [image-end] 1fr [space-end] 0 [full-end];
  }
}
.mix-media {
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 20px;
  grid-column: image;
  grid-row: 1;
  width: 100%;
  aspect-ratio: 1;
  align-self: center;
  display: block;
}
.mix-audio {
  grid-column: image;
  grid-row: 1;
  align-self: center;
  opacity: 0;
  transform: translateY(1em);
  animation: fadeInUp 0.6s ease-out 0.4s forwards;
}
@media (max-aspect-ratio: 5/8) {
  .mix-audio {
    grid-column: full;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(1em);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.small {
  scale: 0.8;
}
@media (max-aspect-ratio: 5/8) {
  .small {
    scale: 0.9;
  }
}

@view-transition {
  navigation: auto;
}
::view-transition-group(root) {
  animation-duration: 0.5s;
}/*# sourceMappingURL=styles.css.map */