/* ===== Base ===== */
:root{
  --red:#e53935;
  --red-dark:#d22f2b;
  --text:#111;
  --muted:#666;
  --white:#fff;
  --shadow: 0 18px 40px rgba(0,0,0,.18);
  --radius: 42px;

  --max: 1080px;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
  color:var(--text);
  background: var(--red);
}

/* ===== Header ===== */
.header{
  background: linear-gradient(0deg, var(--red) 0%, #f14b47 100%);
  padding: 18px 22px;
}

/* ===== Page ===== */
.page{
  padding: 22px 22px 44px;
}

/* ===== Viewport ===== */
.viewport{
  max-width: 900px;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  height: auto;
}

.viewport > a{
  display:block;
  height:100%;
}

/* card */
.card{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--bg) center/cover no-repeat;
  display:block;
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  .page{
    padding: 16px 16px 36px;
  }
  .viewport{
    aspect-ratio: 4 / 3;
  }
}