:root {
  --camp-yellow: #ecff00;
  --camp-gray: #4f4f4f;
  --camp-white: #ffffff;
  --page-width: 390px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--camp-white);
  color: var(--camp-gray);
  font-family: "Yu Gothic", "YuGothic", "Noto Sans JP", system-ui, sans-serif;
}

body {
  display: flex;
  justify-content: center;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

.page-shell {
  width: min(100%, var(--page-width));
  min-height: 100vh;
  background: var(--camp-yellow);
  overflow: hidden;
}

.desktop-layout {
  width: min(100%, var(--page-width));
  background: var(--camp-yellow);
}

.desktop-stage {
  display: none;
}

@media (max-width: 899px) {
  html,
  body {
    width: 100%;
    overflow-x: hidden;
    background: var(--camp-yellow);
  }

  body {
    display: block;
  }

  .desktop-layout,
  .page-shell {
    width: 100%;
    max-width: none;
  }

  .hero {
    height: auto;
  }
}

.site-header {
  display: grid;
  place-items: center;
  height: 56px;
  background: var(--camp-yellow);
}

.header-logo {
  display: block;
  width: min(298px, calc(100% - 52px));
  height: auto;
}

.hero {
  position: relative;
  width: 100%;
  height: 447px;
  aspect-ratio: 1560 / 1788;
  background: var(--camp-white);
  overflow: hidden;
}

.hero-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.hero-date {
  position: absolute;
  left: 5.0%;
  top: 6.3%;
  z-index: 3;
  display: block;
  width: 36.4%;
  height: auto;
  pointer-events: none;
}

.hero-partner-logo {
  position: absolute;
  left: 65.3%;
  top: 6.2%;
  z-index: 3;
  display: block;
  width: 19.9%;
  height: auto;
  pointer-events: none;
}

.hero-battery {
  position: absolute;
  left: 89.0%;
  top: 7.6%;
  z-index: 3;
  display: block;
  width: 4.0%;
  height: auto;
  pointer-events: none;
}

.hero-logo {
  position: absolute;
  left: 5.1%;
  top: 12.4%;
  width: 89.7%;
  aspect-ratio: 712 / 172;
  z-index: 3;
}

.hero-float {
  position: absolute;
  z-index: 2;
  display: block;
  opacity: 0;
  transform: translateY(28px);
  animation: heroFloatIn 760ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  pointer-events: none;
}

.hero-stone {
  left: 23.1%;
  top: 48.2%;
  width: 60.8%;
  height: auto;
  animation-delay: 720ms;
}

.hero-sprite {
  aspect-ratio: var(--sprite-ratio);
}

.sprite-frame {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.sprite-frame-b {
  opacity: 0;
  animation: spriteBlink 1200ms steps(1, end) infinite;
  animation-delay: var(--blink-delay, 0ms);
}

.sprite-frame-a {
  animation: spriteBlinkBase 1200ms steps(1, end) infinite;
  animation-delay: var(--blink-delay, 0ms);
}

.hero-kumo {
  --sprite-ratio: 422 / 144;
  --blink-delay: 1700ms;
  left: 3.7%;
  top: 58.5%;
  width: 27.1%;
  animation-delay: 980ms;
}

.hero-bulb {
  --sprite-ratio: 92 / 174;
  --blink-delay: 1500ms;
  left: 47.1%;
  top: 37.5%;
  width: 5.9%;
  animation-delay: 860ms;
}

.hero-coin {
  --sprite-ratio: 204 / 84;
  --blink-delay: 1900ms;
  left: 74.0%;
  top: 84.2%;
  width: 13.1%;
  animation-delay: 1180ms;
}

.hero-coin .sprite-frame-a {
  animation: none;
}

.hero-coin .sprite-frame-b {
  display: none;
  animation: none;
}

.hero-line {
  height: auto;
  animation-name: heroFloatIn, lineStepShift;
  animation-duration: 760ms, 980ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1), steps(1, end);
  animation-fill-mode: forwards, both;
  animation-iteration-count: 1, infinite;
}

.hero-line-01 {
  left: 33.3%;
  top: 48.5%;
  width: 5.1%;
  animation-delay: 1240ms, 2020ms;
}

.hero-line-02 {
  left: 58.3%;
  top: 46.6%;
  width: 3.6%;
  animation-delay: 1320ms, 2100ms;
}

.hero-line-03 {
  left: 25.6%;
  top: 80.0%;
  width: 3.3%;
  animation-delay: 1400ms, 2180ms;
}

.hero-line-04 {
  left: 45.3%;
  top: 70.5%;
  width: 3.2%;
  animation-delay: 1480ms, 2260ms;
}

.hero-line-05 {
  left: 45.3%;
  top: 73.7%;
  width: 3.2%;
  animation-delay: 1560ms, 2340ms;
}

.hero-line-06 {
  left: 66.4%;
  top: 87.0%;
  width: 3.2%;
  animation-delay: 1640ms, 2420ms;
}

.hero-arrow {
  height: auto;
  animation-name: heroFloatIn, lineStepShift;
  animation-duration: 760ms, 980ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1), steps(1, end);
  animation-fill-mode: forwards, both;
  animation-iteration-count: 1, infinite;
}

.hero-light {
  height: auto;
  animation-name: heroFloatIn, lightBlink;
  animation-duration: 760ms, 1600ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1), steps(1, end);
  animation-fill-mode: forwards, both;
  animation-iteration-count: 1, infinite;
}

.hero-arrow-01 {
  left: 18.1%;
  top: 45.1%;
  width: 5.3%;
  animation-delay: 1220ms, 2000ms;
}

.hero-arrow-02 {
  left: 33.5%;
  top: 41.2%;
  width: 3.2%;
  animation-delay: 1300ms, 2080ms;
}

.hero-arrow-03 {
  left: 61.2%;
  top: 35.6%;
  width: 4.6%;
  animation-delay: 1380ms, 2160ms;
}

.hero-arrow-04 {
  left: 68.6%;
  top: 44.7%;
  width: 3.2%;
  animation-delay: 1460ms, 2240ms;
}

.hero-arrow-05 {
  left: 32.7%;
  top: 73.7%;
  width: 3.2%;
  animation-delay: 1540ms, 2320ms;
}

.hero-arrow-07 {
  left: 65.8%;
  top: 78.9%;
  width: 5.8%;
  animation-delay: 1620ms, 2400ms;
}

.hero-arrow-08 {
  left: 31.3%;
  top: 94.6%;
  width: 4.6%;
  animation-delay: 1700ms, 2480ms;
}

.hero-light-01-a {
  left: 63.1%;
  top: 65.8%;
  width: 1.5%;
  animation-delay: 1320ms, 2300ms;
}

.hero-light-01-b {
  left: 37.2%;
  top: 88.4%;
  width: 1.5%;
  animation-delay: 1500ms, 2500ms;
}

.hero-light-01-c {
  left: 18.3%;
  top: 80.4%;
  width: 1.5%;
  animation-delay: 1680ms, 2680ms;
}

.hero-light-02-a {
  left: 41.4%;
  top: 46.5%;
  width: 2.6%;
  animation-delay: 1440ms, 2440ms;
}

.hero-light-02-b {
  left: 26.9%;
  top: 68.1%;
  width: 2.6%;
  animation-delay: 1620ms, 2620ms;
}

.hero-light-03-a {
  left: 69.6%;
  top: 58.5%;
  width: 4.1%;
  animation-delay: 1560ms, 2560ms;
}

.hero-new-game {
  left: 80.1%;
  top: 28.9%;
  width: 15.1%;
  aspect-ratio: 236 / 31;
  animation-delay: 1180ms;
}

.hero-new-game img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.hero-new-game-text {
  clip-path: inset(0 0 0 11%);
}

.hero-new-game-triangle {
  clip-path: inset(0 89% 0 0);
  animation: lightBlink 1600ms steps(1, end) infinite;
  animation-delay: 2300ms;
}

.hero-vertical-text {
  left: 78.5%;
  top: 35.9%;
  width: 11.0%;
  height: auto;
  animation-delay: 1260ms;
}

.hero-mouse {
  left: 92.8%;
  top: 45.0%;
  width: 2.4%;
  height: auto;
  animation-delay: 1340ms;
}

.partner-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 57px;
  background: var(--camp-gray);
}

.partner-strip img {
  display: block;
  width: 190px;
  max-width: 70%;
  height: auto;
}

.about-section {
  padding: 20px 18px 26px;
  background: var(--camp-yellow);
  opacity: 0;
  transform: translateY(32px);
  animation: sectionFloatIn 900ms cubic-bezier(0.22, 1, 0.36, 1) 1500ms forwards;
}

.about-card {
  position: relative;
  padding: 26px 24px 28px;
  color: var(--camp-gray);
}

.about-card::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(var(--camp-gray), var(--camp-gray)) 28px 0 / calc(100% - 56px) 4px no-repeat,
    linear-gradient(var(--camp-gray), var(--camp-gray)) 28px calc(100% - 4px) / calc(100% - 56px) 4px no-repeat,
    linear-gradient(var(--camp-gray), var(--camp-gray)) 0 28px / 4px calc(100% - 56px) no-repeat,
    linear-gradient(var(--camp-gray), var(--camp-gray)) calc(100% - 4px) 28px / 4px calc(100% - 56px) no-repeat;
}

.about-card::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(var(--camp-gray), var(--camp-gray)) 0 24px / 4px 4px no-repeat,
    linear-gradient(var(--camp-gray), var(--camp-gray)) 4px 20px / 4px 4px no-repeat,
    linear-gradient(var(--camp-gray), var(--camp-gray)) 8px 16px / 4px 4px no-repeat,
    linear-gradient(var(--camp-gray), var(--camp-gray)) 12px 12px / 4px 4px no-repeat,
    linear-gradient(var(--camp-gray), var(--camp-gray)) 16px 8px / 4px 4px no-repeat,
    linear-gradient(var(--camp-gray), var(--camp-gray)) 20px 4px / 4px 4px no-repeat,
    linear-gradient(var(--camp-gray), var(--camp-gray)) 24px 0 / 4px 4px no-repeat,
    linear-gradient(var(--camp-gray), var(--camp-gray)) calc(100% - 4px) 24px / 4px 4px no-repeat,
    linear-gradient(var(--camp-gray), var(--camp-gray)) calc(100% - 8px) 20px / 4px 4px no-repeat,
    linear-gradient(var(--camp-gray), var(--camp-gray)) calc(100% - 12px) 16px / 4px 4px no-repeat,
    linear-gradient(var(--camp-gray), var(--camp-gray)) calc(100% - 16px) 12px / 4px 4px no-repeat,
    linear-gradient(var(--camp-gray), var(--camp-gray)) calc(100% - 20px) 8px / 4px 4px no-repeat,
    linear-gradient(var(--camp-gray), var(--camp-gray)) calc(100% - 24px) 4px / 4px 4px no-repeat,
    linear-gradient(var(--camp-gray), var(--camp-gray)) calc(100% - 28px) 0 / 4px 4px no-repeat,
    linear-gradient(var(--camp-gray), var(--camp-gray)) 0 calc(100% - 28px) / 4px 4px no-repeat,
    linear-gradient(var(--camp-gray), var(--camp-gray)) 4px calc(100% - 24px) / 4px 4px no-repeat,
    linear-gradient(var(--camp-gray), var(--camp-gray)) 8px calc(100% - 20px) / 4px 4px no-repeat,
    linear-gradient(var(--camp-gray), var(--camp-gray)) 12px calc(100% - 16px) / 4px 4px no-repeat,
    linear-gradient(var(--camp-gray), var(--camp-gray)) 16px calc(100% - 12px) / 4px 4px no-repeat,
    linear-gradient(var(--camp-gray), var(--camp-gray)) 20px calc(100% - 8px) / 4px 4px no-repeat,
    linear-gradient(var(--camp-gray), var(--camp-gray)) 24px calc(100% - 4px) / 4px 4px no-repeat,
    linear-gradient(var(--camp-gray), var(--camp-gray)) calc(100% - 4px) calc(100% - 28px) / 4px 4px no-repeat,
    linear-gradient(var(--camp-gray), var(--camp-gray)) calc(100% - 8px) calc(100% - 24px) / 4px 4px no-repeat,
    linear-gradient(var(--camp-gray), var(--camp-gray)) calc(100% - 12px) calc(100% - 20px) / 4px 4px no-repeat,
    linear-gradient(var(--camp-gray), var(--camp-gray)) calc(100% - 16px) calc(100% - 16px) / 4px 4px no-repeat,
    linear-gradient(var(--camp-gray), var(--camp-gray)) calc(100% - 20px) calc(100% - 12px) / 4px 4px no-repeat,
    linear-gradient(var(--camp-gray), var(--camp-gray)) calc(100% - 24px) calc(100% - 8px) / 4px 4px no-repeat,
    linear-gradient(var(--camp-gray), var(--camp-gray)) calc(100% - 28px) calc(100% - 4px) / 4px 4px no-repeat;
}

.about-title {
  display: flex;
  justify-content: center;
  margin: 0 0 17px;
  line-height: 0;
}

.about-title img {
  display: block;
  width: 108px;
  height: auto;
}

.lead,
.event-details {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

.lead {
  width: 297px;
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
}

.dot-divider {
  height: 2px;
  width: 297px;
  max-width: 100%;
  margin: 20px auto;
  background-image: repeating-linear-gradient(90deg,
      var(--camp-gray) 0,
      var(--camp-gray) 5px,
      transparent 5px,
      transparent 9px);
}

.event-details {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0 auto;
  width: 297px;
  max-width: 100%;
  text-align: left;
}

.event-row {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.event-label {
  width: 84px;
  flex: none;
  text-align: right;
  white-space: nowrap;
}

.event-value {
  display: block;
  width: 213px;
  flex: none;
  overflow-wrap: anywhere;
  word-break: normal;
}

.rule-line {
  display: flex;
  align-items: flex-start;
}

.rule-number {
  flex: none;
  width: 12px;
  white-space: nowrap;
}

.rule-line>span:last-child {
  display: block;
  width: 201px;
}

.entry-button {
  position: relative;
  display: block;
  width: min(100%, 280px);
  height: 50px;
  margin: 27px auto 0;
  padding: 0;
  overflow: hidden;
}

.entry-button-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 31px;
  background: var(--camp-yellow);
  color: var(--camp-gray);
}

.footer-logo {
  width: 326px;
  max-width: 100%;
  margin-bottom: 24px;
}

.footer-logo-animated {
  position: relative;
  aspect-ratio: 712 / 172;
  overflow: hidden;
}

.footer-logo-part {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform, clip-path;
}

.footer-logo-part img {
  display: block;
  width: 100%;
  height: 100%;
}

.logo-dena {
  clip-path: inset(0 60% 60% 0);
}

.logo-summer {
  clip-path: inset(0 0 50.3% 41.7%);
}

.logo-game {
  left: 0;
  top: 48.7%;
  right: auto;
  bottom: auto;
  width: 40.8%;
  height: 51.3%;
  clip-path: inset(0 100% 0 0);
  transform: none;
  overflow: hidden;
}

.logo-game img {
  position: absolute;
  display: block;
  left: 0;
  top: -94.9%;
  width: 245.1%;
  height: 194.9%;
}

.logo-game-bg {
  display: none;
}

.logo-camp {
  clip-path: inset(48.7% 0 0 43.2%);
}

.footer-logo-animated.is-visible .logo-dena {
  animation: logoFloatUp 720ms cubic-bezier(0.22, 1, 0.36, 1) 120ms forwards;
}

.footer-logo-animated.is-visible .logo-summer {
  animation: logoFloatUp 720ms cubic-bezier(0.22, 1, 0.36, 1) 260ms forwards;
}

.footer-logo-animated.is-visible .logo-game {
  animation: logoGameMaskReveal 680ms cubic-bezier(0.25, 0.1, 0.25, 1) 920ms forwards;
}

.footer-logo-animated.is-visible .logo-game-bg {
  animation: none;
}

.footer-logo-animated.is-visible .logo-camp {
  animation: logoFloatUp 720ms cubic-bezier(0.22, 1, 0.36, 1) 520ms forwards;
}

.footer-partners {
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-partners img {
  display: block;
  width: 254px;
  max-width: 88%;
  height: auto;
  margin-bottom: 24px;
}

.footer-info {
  width: 326px;
  max-width: 100%;
  margin-bottom: 24px;
}

.workshop-name,
.organizers {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

.workshop-name {
  margin-bottom: 4px;
  text-align: left;
}

.organizers {
  display: flex;
  align-items: flex-start;
  text-align: left;
}

.organizer-labels,
.organizer-names {
  display: flex;
  flex-direction: column;
}

.organizer-labels {
  width: 42px;
  flex: none;
  text-align: right;
  white-space: nowrap;
}

.organizer-names {
  width: calc(100% - 42px);
}

.copyright {
  display: grid;
  place-items: center;
  height: 50px;
  background: var(--camp-gray);
  color: var(--camp-yellow);
  font-size: 12px;
  font-weight: 700;
}

@keyframes logoFloatUp {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes logoGameMaskReveal {
  0% {
    opacity: 1;
    clip-path: inset(0 100% 0 0);
  }

  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes sectionFloatIn {
  0% {
    opacity: 0;
    transform: translateY(32px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroFloatIn {
  0% {
    opacity: 0;
    transform: translateY(28px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lineStepShift {

  0%,
  49.9% {
    translate: 0 0;
  }

  50%,
  100% {
    translate: 0 -5px;
  }
}

@keyframes lightBlink {

  0%,
  49.9% {
    visibility: visible;
  }

  50%,
  100% {
    visibility: hidden;
  }
}

@keyframes spriteBlink {

  0%,
  49.9% {
    opacity: 0;
  }

  50%,
  100% {
    opacity: 1;
  }
}

@keyframes spriteBlinkBase {

  0%,
  49.9% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

@media (min-width: 900px) {

  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  body {
    display: block;
    background: var(--camp-yellow);
  }

  .desktop-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--page-width);
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
  }

  .desktop-stage {
    position: relative;
    display: block;
    min-width: 0;
    height: 100dvh;
    overflow: hidden;
    background: var(--camp-yellow);
  }

  .desktop-bg {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100.2%;
    height: 156.75%;
    object-fit: cover;
    object-position: left top;
    pointer-events: none;
  }

  .desktop-content {
    position: absolute;
    left: 80px;
    top: 80px;
    z-index: 2;
    width: min(68.8%, 612px);
    color: var(--camp-gray);
  }

  .desktop-date {
    display: block;
    width: min(45.8%, 280px);
    height: auto;
    margin-bottom: min(3vh, 24px);
    opacity: 0;
    transform: translateY(18px);
    animation: logoFloatUp 720ms cubic-bezier(0.22, 1, 0.36, 1) 40ms forwards;
  }

  .desktop-logo {
    position: relative;
    width: min(101.7%, 622px);
    aspect-ratio: 712 / 172;
    margin-left: -10px;
    margin-bottom: min(3vh, 24px);
    overflow: hidden;
  }

  .desktop-partners {
    display: block;
    width: min(47.7%, 292px);
    height: auto;
    margin-bottom: min(5vh, 40px);
    opacity: 0;
    transform: translateY(18px);
    animation: logoFloatUp 720ms cubic-bezier(0.22, 1, 0.36, 1) 760ms forwards;
  }

  .desktop-catch {
    margin: 0 0 min(3vh, 24px);
    color: var(--camp-gray);
    font-family: "DotGothic16", "Yu Gothic", "YuGothic", "Noto Sans JP", system-ui, sans-serif;
    font-size: clamp(24px, 2.5vw, 32px);
    line-height: 1.5;
    letter-spacing: 0.08em;
    opacity: 0;
    transform: translateY(24px);
    animation: sectionFloatIn 780ms cubic-bezier(0.22, 1, 0.36, 1) 980ms forwards;
  }

  .desktop-copy {
    width: min(84.5%, 517px);
    margin: 0;
    color: var(--camp-gray);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    opacity: 0;
    transform: translateY(24px);
    animation: sectionFloatIn 780ms cubic-bezier(0.22, 1, 0.36, 1) 1160ms forwards;
  }

  .desktop-credit {
    position: absolute;
    left: 80px;
    bottom: 80px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: min(68.8%, 612px);
    margin: 0;
    color: var(--camp-gray);
    font-size: clamp(10px, 0.95vw, 12px);
    font-weight: 700;
    line-height: 1.6;
    opacity: 0;
    transform: translateY(24px);
    animation: sectionFloatIn 780ms cubic-bezier(0.22, 1, 0.36, 1) 1340ms forwards;
  }

  .page-shell {
    width: var(--page-width);
    height: 100dvh;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    box-shadow: none;
    scrollbar-gutter: stable;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-logo-part {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .hero-float {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .hero-line {
    translate: 0 0;
  }

  .about-section {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .desktop-date,
  .desktop-partners,
  .desktop-catch,
  .desktop-copy,
  .desktop-credit {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .sprite-frame-b {
    animation: none;
  }

  .sprite-frame-a {
    animation: none;
  }

  .logo-game {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }

  .logo-game-bg {
    transform: scaleX(1);
  }
}

@media (min-width: 760px) and (max-width: 899px) {
  body {
    background: #e8e8e8;
  }

  .page-shell {
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.12);
  }
}

@media (max-width: 360px) {
  .about-section {
    padding-inline: 12px;
  }

  .about-card {
    padding-inline: 18px;
  }

  .lead,
  .event-details,
  .workshop-name,
  .organizers {
    font-size: 12px;
  }

  .event-details div {
    grid-template-columns: 74px minmax(0, 1fr);
  }
}