/* Centre each landing column while allowing comfortable small-screen wrapping. */
.simple-landing {
  align-items: center;
  min-height: min(660px, calc(100svh - 180px));
}
.simple-landing-intro,
.simple-landing-feature-column {
  width: 100%;
  margin-inline: auto;
  align-self: center;
}
.simple-landing-feature-column {
  max-width: 540px;
}
.simple-landing-intro h1 {
  white-space: normal;
  text-wrap: balance;
}
.simple-landing-intro > p {
  text-wrap: pretty;
}
@media (max-width: 900px) {
  .simple-landing {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 40px;
  }
  .simple-landing-intro,
  .simple-landing-feature-column {
    max-width: 640px;
  }
}
@media (max-width: 430px) {
  .simple-landing-features article h2 {
    flex-wrap: wrap;
  }
  .simple-landing-features article {
    min-width: 0;
  }
}

/* Keep the original card size and distribute spare space evenly. */
body.gateway:not(.server-gateway) main:has(.simple-landing) {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
  box-sizing: border-box;
}
body.gateway .simple-landing {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
  grid-template-columns: minmax(0, min(44vw, 640px)) minmax(0, min(33vw, 474px));
  justify-content: space-evenly;
  column-gap: 0;
}
body.gateway .simple-landing-intro,
body.gateway .simple-landing-feature-column {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  justify-self: center;
}
@media (max-width: 900px) {
  body.gateway:not(.server-gateway) main:has(.simple-landing) {
    padding-inline: 24px;
  }
  body.gateway .simple-landing {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
  }
  body.gateway .simple-landing-intro {
    max-width: 640px;
  }
  body.gateway .simple-landing-feature-column {
    max-width: 474px;
  }
}

/* Real Discord banners only; servers without a banner stay blank. */
.reference-server-directory .server-card-banner { background: #22262e; overflow: hidden; }
.reference-server-directory .server-card-banner img { display: block; width: 100%; height: 100%; object-fit: cover; }