.center-custom-block .center-custom-block__items {
  display: grid;
  gap: 12px;
}

.center-custom-block .center-custom-block__items--grid {
  grid-template-columns: repeat(var(--center-block-columns, 2), minmax(0, 1fr));
}

@media (max-width: 700px) {
  .center-custom-block .center-custom-block__items--grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.center-custom-block .center-custom-block__item {
  min-width: 0;
}

.center-custom-block .center-custom-block__item > a > img {
  height: auto;
  max-width: 100%;
}

.center-custom-block .center-promo-banner {
  align-items: center;
  background-color: #0a1120;
  background-image:
    linear-gradient(180deg, rgba(10, 17, 32, 0.68) 0%, rgba(10, 17, 32, 0.9) 100%),
    var(--center-promo-banner-art);
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: cover, cover;
  border: 1px solid #e63950;
  border-radius: 6px;
  box-sizing: border-box;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  text-align: center;
  text-decoration: none;
  transition: border-color 0.2s ease;
  width: 100%;
}

.center-custom-block .center-promo-banner:hover {
  color: #fff;
  text-decoration: none;
}

.center-custom-block .center-promo-banner--app:hover {
  border-color: #cf2d43;
}

.center-custom-block .center-promo-banner--discord {
  background-position: center, 55% center;
  border-color: #5865f2;
}

.center-custom-block .center-promo-banner--discord:hover {
  border-color: #414cc9;
}

.center-custom-block .center-promo-banner__logo,
.center-custom-block .center-promo-banner__icon {
  flex-shrink: 0;
}

.center-custom-block .center-promo-banner__logo {
  height: auto;
  max-width: 100%;
}

.center-custom-block .center-promo-banner__copy {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.center-custom-block .center-promo-banner__title {
  align-items: center;
  color: #fff;
  display: flex;
  font-size: 18px;
  font-weight: 700;
  gap: 8px;
  justify-content: center;
  line-height: 24px;
}

.center-custom-block .center-promo-banner__title--discord {
  color: #0194f6;
}

.center-custom-block .center-promo-banner__sub {
  color: #fff;
  font-size: 14px;
  line-height: 20px;
}

.center-custom-block .center-promo-banner__cta {
  align-items: center;
  background: #e63950;
  border-radius: 4px;
  box-sizing: border-box;
  color: #fff;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
  justify-content: center;
  margin-top: 4px;
  max-width: 280px;
  padding: 10px 18px;
  transition: background 0.2s ease;
  width: 100%;
}

.center-custom-block .center-promo-banner__cta i {
  font-size: 16px;
  font-weight: 400;
}

.center-custom-block .center-promo-banner--discord .center-promo-banner__cta {
  background: #5865f2;
}

.center-custom-block .center-promo-banner--app:hover .center-promo-banner__cta {
  background: #cf2d43;
}

.center-custom-block .center-promo-banner--discord:hover .center-promo-banner__cta {
  background: #414cc9;
}

@media (min-width: 992px) {
  .center-custom-block .center-promo-banner {
    background-image:
      linear-gradient(90deg, rgba(10, 17, 32, 0.5) 0%, rgba(10, 17, 32, 0.82) 25%, #0a1120 48%),
      var(--center-promo-banner-art);
    background-position: center, left top;
    background-size: cover, auto;
    flex-direction: row;
    gap: 24px;
    min-height: 72px;
    padding: 10px 20px;
    text-align: left;
  }

  .center-custom-block .center-promo-banner--discord {
    background-image:
      linear-gradient(90deg, rgba(10, 17, 32, 0.5) 0%, rgba(10, 17, 32, 0.52) 20%, #212143 48%),
      var(--center-promo-banner-art);
    background-position: center, calc(50% - 280px) 14%;
    background-size: cover, 50%;
    gap: 80px;
  }

  .center-custom-block .center-promo-banner__copy {
    align-items: flex-start;
  }

  .center-custom-block .center-promo-banner__title {
    font-size: 20px;
    justify-content: flex-start;
    line-height: 26px;
  }

  .center-custom-block .center-promo-banner__cta {
    margin-left: auto;
    margin-top: 0;
    max-width: none;
    padding: 8px 18px;
    width: auto;
  }
}

/* Blocks marked data-hide-in-app (e.g. the "download the app" banner) are hidden in the
   u.gg app. html.iv-embed-hide-nav is set by the embed detection in Astro's Layout.astro.
   The editorial carousel skips display: none slides, so no empty slide or dot is left. */
html.iv-embed-hide-nav .center-custom-block__item:has([data-hide-in-app]) {
  display: none;
}

/* Old version that hides every center-custom-block on the app:
html.iv-embed-hide-nav .center-custom-block:has(.center-promo-banner) {
  display: none;
}
*/

.center-custom-block #rotating_top_center_ad,
.center-custom-block #rotating_top_right_ad {
  margin-inline: auto;
  max-width: 100%;
  width: 300px;
}

.center-custom-block #rotating_top_center_ad img,
.center-custom-block #rotating_top_right_ad img {
  display: block;
  height: auto;
  max-width: 100%;
}

.center-custom-block .center-custom-block__items--grid:has(> .center-custom-block__item[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}

.center-custom-block:has(.center-custom-block__item:only-child[hidden]) {
  display: none;
}