.spr-game-list {
  position: relative;

  &.grid {
    gap: 0;
  }
}

.spr-page-heading + .spr-game-list {
  padding-block-start: var(--padding-vertical-main);
}

.spr-game-list:has(+ .spr-game-list) {
  margin-block-end: var(--space-small);
}

.spr-game-list--future .spr-game {
  opacity: 0.6;
}

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

.spr-game-list__content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  grid-column: 1 / span 12;
  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);

  .spr-game-list:target & {
    animation: highlight 2s;
  }

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

  @media (min-width: 992px) {
    gap: var(--space-small) 1.5rem;
    padding: var(--size-2);
  }
}

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

  &:only-child {
    width: 100%;
  }

  @media (min-width: 992px) {
    width: calc(50% - 0.75rem);
  }
}

.spr-game-list--teaser {
  .spr-game-list__content {
    align-content: flex-start;
    background-color: var(--color-white);

    > * {
      width: 100%;
    }
  }
}

@keyframes highlight {
  0% {
    background-color: var(--color-secondary-light);
  }
  100% {
    background-color: transparent;
  }
}