/* Stable screenshot gallery layout. This file loads after the base stylesheet. */
.screenshot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto;
  gap: 18px;
}

.screenshot-feature,
.screenshot-card-tall,
.screenshot-card-player {
  grid-column: auto;
  grid-row: auto;
}

.screenshot-card-player {
  display: block;
}

.screenshot-card img,
.screenshot-feature img,
.screenshot-card-tall img,
.screenshot-card-player img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: contain;
  background: #f3f5f8;
}

.screenshot-card figcaption {
  min-height: 82px;
}

.live-display {
  padding-top: 105px;
}

.display-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 60px;
  align-items: start;
}

.display-card {
  margin: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 24px rgba(27, 49, 42, .06);
}

.display-card-wide {
  grid-column: span 1;
}

.display-card-pitch {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
}

.display-card img {
  display: block;
  width: 100%;
  height: 255px;
  object-fit: contain;
  background: #f3f5f8;
}

.display-card-pitch img {
  height: 260px;
}

.display-card figcaption {
  padding: 15px 17px;
}

.display-card figcaption strong,
.display-card figcaption span {
  display: block;
}

.display-card figcaption strong {
  color: var(--ink);
  font: 600 15px 'Space Grotesk', sans-serif;
}

.display-card figcaption span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.package-summary {
  margin: 20px 0 28px !important;
  color: var(--lime) !important;
  font-size: 15px !important;
  font-weight: 700;
  line-height: 1.5 !important;
}

.included-group {
  border-top: 1px solid #4a806d;
}

.included-group strong {
  display: block;
  padding: 18px 0 7px;
  color: var(--lime);
  font: 600 15px 'Space Grotesk', sans-serif;
}

.included-group span {
  padding: 9px 0;
  border-top: 0;
  color: #e2eee8;
  font-size: 11px;
  line-height: 1.45;
}

.included-group span:before {
  content: '✓';
  margin-right: 11px;
  color: var(--lime);
}

.package-note {
  display: block;
  margin-top: 17px;
  color: #a4c2b5;
  font-size: 10px;
  line-height: 1.5;
}

.proof-grid {
  align-content: start;
}

.proof-tile {
  position: relative;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}

.proof-tile-link {
  color: inherit;
}

.proof-tile-link:hover,
.proof-tile-link:focus-visible {
  border-color: var(--orange);
  box-shadow: 0 10px 24px rgba(27, 49, 42, .09);
  transform: translateY(-3px);
}

.proof-tile-link b {
  position: absolute;
  right: 20px;
  top: 20px;
  color: var(--orange);
  font-size: 16px;
}

.proof-tile-technology {
  background: #f0f5ec;
}

.proof-tile-media {
  background: #fff4ed;
}

.proof-socials {
  grid-column: 1 / -1;
  grid-row: 5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 6px;
}

.proof-tile-latest {
  grid-column: 2;
  grid-row: 4;
}

/* Newest tournament first: BPL 6, BPL 5, BPL 4, BPL 3. */
.proof-grid > :nth-child(5) {
  grid-column: 2;
  grid-row: 4;
}

.proof-grid > :nth-child(6) {
  grid-column: 1;
  grid-row: 4;
}

.proof-grid > :nth-child(7) {
  grid-column: 2;
  grid-row: 3;
}

.proof-grid > :nth-child(9) {
  grid-column: 1;
  grid-row: 3;
}

.proof-socials p {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  color: var(--orange);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.proof-socials a {
  display: block;
  padding: 18px;
  background: var(--green);
  color: white;
  transition: transform .2s, background .2s;
}

.proof-socials a:hover,
.proof-socials a:focus-visible {
  background: #0d4939;
  transform: translateY(-3px);
}

.proof-socials strong,
.proof-socials span {
  display: block;
}

.proof-socials strong {
  font: 600 15px 'Space Grotesk', sans-serif;
}

.proof-socials span {
  margin-top: 6px;
  color: #c6dcd1;
  font-size: 10px;
}

@media (max-width: 500px) {
  .proof-tile-latest {
    grid-column: auto;
    grid-row: auto;
  }

  .proof-grid > :nth-child(5),
  .proof-grid > :nth-child(6),
  .proof-grid > :nth-child(7),
  .proof-grid > :nth-child(9) {
    grid-column: auto;
    grid-row: auto;
  }

  .proof-socials {
    grid-row: auto;
  }

  .proof-socials {
    grid-template-columns: 1fr;
  }

  .proof-socials p {
    grid-column: auto;
  }
}

@media (max-width: 800px) {
  .display-card-pitch {
    display: block;
  }
}

@media (max-width: 500px) {
  .live-display {
    padding-top: 75px;
  }

  .display-grid {
    grid-template-columns: 1fr;
    gap: 13px;
    margin-top: 40px;
  }

  .display-card-wide,
  .display-card-pitch {
    grid-column: auto;
  }

  .display-card img,
  .display-card-pitch img {
    height: auto;
  }
}

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

@media (max-width: 500px) {
  .screenshot-grid {
    grid-template-columns: 1fr;
  }

  .screenshot-card img,
  .screenshot-feature img,
  .screenshot-card-tall img,
  .screenshot-card-player img {
    height: auto;
    max-height: none;
  }

  .screenshot-card figcaption {
    min-height: 0;
  }
}