.yoppers-page main {
  width: min(100% - 3.2rem, var(--page-max));
}

.yoppers-page .plate--container {
  width: min(100% - 3.2rem, var(--page-max));
}

.yoppers-layout {
  display: grid;
  grid-template-columns: minmax(24rem, 36rem) minmax(0, 1fr);
  gap: 2.4rem 3.2rem;
  align-items: start;
}

.yoppers-col--copy {
  position: relative;
}

.yoppers-col--copy .content-body .paragraph {
  margin-block-end: 0;
}

.yoppers-col--copy .yop-score,
.yoppers-col--copy .yop-who {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  margin-block-start: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-0.6rem);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

.yoppers-col--copy .yop-score {
  z-index: 3;
  max-height: min(72vh, 100%);
  overflow: auto;
}

.yoppers-col--copy .yop-who {
  z-index: 4;
}

.yoppers-col--copy .yop-score.is-open,
.yoppers-col--copy .yop-who.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.yoppers-col--roster .yoppers-list {
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}

.yoppers-list {
  list-style: none;
  margin-block: 0;
  margin-inline: 0;
  padding-block: 0;
  padding-inline: 0;
  display: grid;
  gap: 1.6rem 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  justify-items: center;
}

@media (max-width: 800px) {
  .yoppers-layout {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yoppers-col--copy .yop-score,
  .yoppers-col--copy .yop-who {
    transform: none;
    transition: none;
  }
}