body { background: #10151b; }
.collection-hub {
  max-width: 1440px;
  margin: 0 auto;
  color: #171a1f;
  background: #fff;
}
.collection-hub-hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
  background: #16181d;
}
.collection-hub-media { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.collection-hub-media img { width: 100%; height: 100%; object-fit: cover; }
.collection-hub-media img:first-child { object-position: center 42%; }
.collection-hub-media::after { content: ""; position: absolute; inset: 0; background: rgba(7, 10, 14, .58); }
.collection-hub-copy { position: relative; z-index: 1; width: 100%; padding: 68px 54px 48px; }
.collection-hub-copy p { max-width: 590px; margin: 18px 0 0; color: rgba(255, 255, 255, .8); font-size: 17px; }
.collection-hub-copy h1 { margin: 0; font-size: clamp(52px, 7vw, 92px); line-height: 1; letter-spacing: 0; }
.collection-hub-kicker { margin-bottom: 14px !important; color: #f5c928 !important; font-size: 13px !important; font-weight: 900; }
.collection-hub-stats { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 28px; }
.collection-hub-stats span { padding-top: 8px; border-top: 3px solid #f5c928; font-size: 13px; font-weight: 800; }
.collection-hub-stats strong { display: block; color: #f5c928; font-size: 23px; }

.collection-band {
  min-height: 430px;
  display: grid;
  grid-template-columns: minmax(330px, .88fr) minmax(480px, 1.12fr);
  border-top: 2px solid #20242a;
}
.collection-band-copy { display: flex; flex-direction: column; justify-content: center; padding: 48px 54px; }
.collection-band-label { margin: 0 0 10px; color: #2563a8; font-size: 12px; font-weight: 900; }
.collection-band h2 { margin: 0; font-size: clamp(36px, 4.4vw, 62px); line-height: 1.08; letter-spacing: 0; }
.collection-band-copy > p:not(.collection-band-label) { max-width: 570px; margin: 18px 0 0; color: #626874; }
.collection-band-meta { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 23px; }
.collection-band-meta span { padding-bottom: 3px; border-bottom: 2px solid #35a6b8; font-size: 12px; font-weight: 800; }
.collection-band-link {
  width: fit-content;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  margin-top: 28px;
  padding: 10px 18px;
  border: 2px solid #20242a;
  color: #fff;
  background: #d93d37;
  box-shadow: 4px 4px 0 #20242a;
  font-weight: 900;
  text-decoration: none;
}
.collection-band-media { min-height: 430px; overflow: hidden; background: #edf0f3; }
.collection-band-media img { width: 100%; height: 100%; object-fit: cover; }
.collection-band-snoopy { background: #fffdf8; }
.collection-band-snoopy .collection-band-media { order: -1; background: #f8bf25; }
.collection-band-snoopy .collection-band-media img { object-fit: contain; padding: 22px; }
.collection-band-snoopy .collection-band-label { color: #d92920; }
.collection-band-snoopy .collection-band-link { background: #1759a8; }
.collection-band-pokemon { background: #f3f5f7; }
.collection-band-pokemon .collection-band-media img { object-position: center; }
.collection-hub-footer { padding: 28px 24px; color: rgba(255, 255, 255, .72); background: #16181d; font-size: 12px; text-align: center; }

@media (max-width: 800px) {
  .collection-hub-hero { min-height: 620px; }
  .collection-hub-media { grid-template-columns: 1fr; }
  .collection-hub-media img:first-child { display: none; }
  .collection-hub-copy { padding: 48px 22px 36px; }
  .collection-hub-copy p { font-size: 15px; }
  .collection-band { grid-template-columns: 1fr; }
  .collection-band-copy { padding: 38px 22px 44px; }
  .collection-band-media { min-height: 330px; order: -1; }
}

@media (max-width: 520px) {
  .collection-hub-hero { min-height: 590px; }
  .collection-hub-copy h1 { font-size: 56px; }
  .collection-hub-stats { gap: 18px; }
  .collection-hub-stats strong { font-size: 20px; }
  .collection-band-link { width: 100%; justify-content: center; }
  .collection-band-media { min-height: 280px; }
}