@font-face { font-family: "DM Sans"; src: url("/fonts/dm-sans.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "DM Serif Display"; src: url("/fonts/dm-serif-display.woff2") format("woff2"); font-display: swap; }
:root { color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #e9e4d8; color: #152b50; font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
.card { width: min(100vw, 100vh, 1080px); aspect-ratio: 1 / 1; container-type: inline-size; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; background: #ffd84d; }
.card-head { padding: 5.4cqw 6cqw 4.2cqw; background: #152b50; color: #fff; }
.card-head h1 { margin: 0; font-family: "DM Serif Display", Georgia, serif; font-weight: 400; font-size: 8.2cqw; line-height: 1; letter-spacing: -0.02em; }
.card-head p { margin: 1.8cqw 0 0; color: #ffd84d; font-size: 3.5cqw; font-weight: 700; }
.card-list { list-style: none; margin: 0; padding: 3.4cqw 6cqw 0; display: grid; gap: 1.5cqw; align-content: start; }
.card-list li { display: grid; grid-template-columns: 19cqw minmax(0, 1fr); gap: 2.6cqw; align-items: start; padding-bottom: 1.5cqw; border-bottom: 0.3cqw solid rgba(21, 43, 80, 0.2); }
.card-list li:last-child { border-bottom: 0; }
.card-when { font-size: 2.5cqw; font-weight: 700; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.05em; }
.card-title { font-size: 3.6cqw; font-weight: 700; line-height: 1.16; }
.card-free { display: inline-block; margin-left: 1.2cqw; padding: 0.2cqw 1.4cqw; border-radius: 99cqw; background: #2f7a4a; color: #fff; font-size: 2.2cqw; vertical-align: 0.4cqw; }
.card-empty { margin: 0; padding: 6cqw; font-size: 4cqw; }
.card-foot { display: flex; align-items: center; justify-content: space-between; padding: 2.6cqw 6cqw 4.2cqw; font-size: 3.3cqw; font-weight: 700; }
.card-foot svg { width: 7cqw; height: 7cqw; }