.spr-game-detail {
  position: relative;
  margin-block: var(--padding-vertical-small);

  &.grid {
    gap: 0;
  }
}

.spr-game-detail__heading {
  grid-column: 1 / span 4;

  .spr-section-heading__container > span {
    white-space: nowrap;
  }

  @media (min-width: 992px) {
    grid-column: 2 / span 10;
  }
}

.spr-game-detail__content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  grid-column: 1 / span 4;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  padding: var(--space-small) 0.625rem;
  border: 0.0625rem solid var(--color-gray-20);
  border-radius: 0.5rem;
  box-shadow: var(--shadow-1);

  @media (min-width: 600px) {
    gap: var(--space-small);
    padding: var(--size-1);
  }

  @media (min-width: 992px) {
    grid-column: 1 / span 12;
    gap: var(--space-small) 1.5rem;
    padding: 0;
  }

  @media (min-width: 1400px) {
    grid-column: 2 / span 10;
    padding: var(--size-2);
  }
}

.spr-game-detail:has(iframe) .spr-game-detail__content .spr-game {
  margin-block-end: var(--space-small);
}

.spr-game-detail__content > * {
  width: 100%;
}

.spr-game-detail__iframe {
  grid-column: 1 / span 12;

  iframe {
    width: 100%;
    height: auto;
    min-height: 38rem;
    border: 0;

    @media (min-width: 444px) {
      min-height: 40rem;
    }

    @media (min-width: 687px) {
      min-height: 31rem;
    }

    @media (min-width: 992px) {
      min-height: 30rem;
    }
  }
}

.spr-game-detail--no-board .spr-game-detail__iframe {
  iframe {
    min-height: 60rem;
  }
}