.pong {
  @media (min-width: 1000px) {
    display: grid;
    grid-template-areas: '. left right';
    --left-columns: 20;
    grid-template-columns:
      calc(((100vw - var(--max)) / 2) + var(--2)) calc(
        var(--1) * var(--left-columns)
      )
      1fr;
    @media (max-width: 1152px) {
      --left-columns: 12;
    }
  }
  margin: var(--vertical-outer) 0;
}

.pong__intro {
  grid-area: left;
  display: flex;
  flex-direction: column;
  @media (max-width: 999px) {
    padding: var(--2);
  }
}

.pong__nav {
  margin-top: auto;
  padding: var(--2) var(--2) 0;
  @media (max-width: 999px) {
    display: none;
  }
}

.pong__set {
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: var(--1);
  white-space: normal;
  padding: 0 var(--2);
  @media (max-width: 900px) {
    display: contents;
  }
}

.pong__item {
  display: inline-grid;
  grid-template-areas: 'only';
  background: var(--color-dark-bg);
  color: var(--color-dark-fg);
  --link-hover-color: var(--color-dark-fg);
  border-radius: var(--curvynes);
  aspect-ratio: 20 / 26;
  @media (max-width: 900px) {
    margin-left: var(--1);
    max-width: calc(var(--1) * 15);
    &:first-child {
      margin-left: var(--2);
    }
  }
}

.pong__image {
  grid-area: only;
}

.pong__overlay {
  grid-area: only;
  display: flex;
}

.pong__item-title {
  margin: auto auto 0 0;
  grid-area: only;
  padding: var(--1);
  font-size: 1.33333333rem;
  line-height: 1.2;
  hyphens: auto;
}

.pong__image img {
  width: 100%;
  aspect-ratio: 20/26;
  object-fit: cover;
  border-radius: var(--curvynes);
  vertical-align: bottom;
}
.pong__main {
  grid-area: right;
  min-width: 0;
}

.pong__sets {
  white-space: nowrap;
  overflow: auto;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
  position: relative;
  @media (min-width: 2000px) {
    max-width: calc(var(--1) * 60);
  }
  @media (min-width: 1000px) {
    mask-image: linear-gradient(
      to right,
      transparent,
      black var(--2),
      black calc(100% - var(--2)),
      transparent 100%
    );
  }
}

.pong__link {
  text-decoration: none;
}

.pong__link--active {
  &::before {
    opacity: 0;
  }
}

.pong__title {
  margin-top: 0;
}

.pong__footer {
  margin-top: var(--2);
}