.community-bands {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 12px;
}
.community-band {
  --band-art: url('/assets/community-tournament-embroidery.webp');
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: clamp(230px, 20vw, 290px);
  overflow: hidden;
  border: 1px solid #a77a41;
  background-color: #160c0d;
  background-image:
    linear-gradient(90deg, rgba(17, 7, 9, .06), rgba(17, 7, 9, .54) 29%, rgba(17, 7, 9, .72) 50%, rgba(17, 7, 9, .54) 71%, rgba(17, 7, 9, .06)),
    var(--band-art),
    var(--band-art),
    url('/assets/ti26-brocade.png');
  background-position: center, left center, right center, center;
  background-size: cover, auto 100%, auto 100%, 520px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  box-shadow: inset 0 0 0 4px rgba(15, 6, 7, .87), 0 18px 36px rgba(0, 0, 0, .24);
  color: #fff1d7;
  text-align: center;
}
.community-band--ranking { --band-art: url('/assets/community-ranking-embroidery.webp'); }
.community-band__campaign-art {
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 0;
  width: 39%;
  height: 100%;
  object-fit: cover;
  opacity: .78;
  -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 55%, transparent 100%);
}
.community-band__copy {
  position: relative;
  z-index: 1;
  width: min(100%, 760px);
  padding: 34px 20px;
}
.community-band__eyebrow {
  display: block;
  margin-bottom: 10px;
  color: #f5cc84;
  font: 800 .8rem/1.2 var(--font-display, 'Barlow Condensed', sans-serif);
  letter-spacing: .22em;
  text-shadow: 0 2px 4px #000;
  text-transform: uppercase;
}
.community-band__title {
  margin: 0;
  color: #fff1d7;
  font: 800 clamp(2rem, 4.15vw, 3.55rem)/.97 Georgia, 'Times New Roman', serif;
  letter-spacing: -.035em;
  text-wrap: balance;
  text-shadow: 0 2px 1px #1b0808, 0 5px 15px #000;
}
.community-band__title::after {
  content: '◆';
  display: block;
  margin: 12px auto 6px;
  color: #e7b96a;
  font: 600 .65rem/1 Georgia, serif;
  text-shadow: 0 0 8px #aa5d28;
}
.community-band__summary {
  max-width: 610px;
  margin: 0 auto 16px;
  color: #f5e8d0;
  font: 500 clamp(.96rem, 1.6vw, 1.1rem)/1.4 var(--font-ui, Arial, sans-serif);
  text-shadow: 0 2px 8px #000;
  text-wrap: pretty;
}
.community-band__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  min-width: 160px;
  padding: 9px 20px;
  border: 1px solid #efd188;
  background: rgba(18, 9, 9, .78);
  color: #ffe59f;
  font: 800 .93rem/1.1 var(--font-display, 'Barlow Condensed', sans-serif);
  letter-spacing: .045em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.community-band__button::after { content: '›'; margin-left: 14px; font-size: 1.35em; line-height: .75; }
.community-band__button:not(.community-band__button--disabled):is(:hover, :focus-visible) {
  border-color: #fff1b9;
  background: #6a3525;
  transform: translateY(-1px);
}
.community-band__button--disabled { opacity: .7; }
.community-band__draft-badge {
  position: absolute;
  z-index: 3;
  top: 11px;
  right: 11px;
  padding: 6px 9px;
  border: 1px solid #dec487;
  background: #171112;
  color: #fff1d7;
  font: 800 .7rem/1 var(--font-display, 'Barlow Condensed', sans-serif);
  letter-spacing: .05em;
  text-transform: uppercase;
}
@container (max-width: 590px) {
  .community-band { min-height: 290px; }
  .community-band__title { font-size: clamp(1.75rem, 7cqw, 2.5rem); }
  .community-band__copy { padding: 40px 18px 28px; }
  .community-band__campaign-art { width: 100%; opacity: .32; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
  .community-band__draft-badge { top: 7px; right: 7px; }
}
@media (max-width: 680px) {
  .community-bands { gap: 8px; }
  .community-band { min-height: 290px; }
  .community-band__copy { padding: 40px 18px 28px; }
  .community-band__campaign-art { width: 100%; opacity: .32; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .community-band__button { transition: none; }
}