#moduform__about-header_anniversary.moduform_50th {
  padding-top: 2rem;
  position: relative;
}
#moduform__about-header_anniversary.moduform_50th .fireworks-container {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  top: 0;
}
#moduform__about-header_anniversary.moduform_50th .fireworks-container .firework {
  width: var(--size);
  height: var(--size);
  position: absolute;
  transform: translate(-50%, -50%);
}
#moduform__about-header_anniversary.moduform_50th .fireworks-container .firework .inner {
  width: 100%;
  height: 100%;
  position: relative;
}
#moduform__about-header_anniversary.moduform_50th .fireworks-container .firework:first-of-type {
  top: 33%;
  left: 57.1428571429%;
  --size: 8vw;
  --delay: 0s;
}
#moduform__about-header_anniversary.moduform_50th .fireworks-container .firework:nth-of-type(2) {
  top: 80%;
  left: 57.1428571429%;
  --size: 10vw;
  --delay: 0s;
}
#moduform__about-header_anniversary.moduform_50th .fireworks-container .firework:nth-of-type(3) {
  top: 35%;
  left: 80%;
  --size: 7vw;
  --delay: 0s;
}
#moduform__about-header_anniversary.moduform_50th .fireworks-container .firework:nth-of-type(4) {
  top: 60%;
  left: 85.7142857143%;
  --size: 9vw;
  --delay: 0s;
}
@keyframes move {
  from {
    translate: 0px 0px;
    opacity: 0;
  }
  to {
    translate: calc(var(--size) * var(--x)) calc(var(--size) * var(--y));
    opacity: 1;
  }
}
@keyframes fade {
  from {
    translate: calc(var(--size) * var(--x)) calc(var(--size) * var(--y));
    opacity: 1;
  }
  to {
    translate: calc(var(--size) * var(--x)) calc(var(--size) * var(--y));
    opacity: 0;
  }
}
#moduform__about-header_anniversary.moduform_50th .fireworks-container .firework.active .inner div {
  opacity: 0;
  position: absolute;
  width: calc(var(--size) / 15.625);
  height: calc(var(--size) / 15.625);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-name: move, fade;
  animation-duration: 0.3s, 0.5s;
  animation-delay: calc(var(--delay) + 0s), calc(var(--delay) + 0.75s);
  animation-timing-function: steps(6, end) ease-out, linear;
  animation-fill-mode: forwards, forwards;
  translate: calc(var(--size) * var(--x)) calc(var(--size) * var(--y));
  background-color: var(--color);
  box-shadow: rgba(0, 0, 0, 0.05) 1px 1px 5px;
}
#moduform__about-header_anniversary.moduform_50th h1 {
  text-align: center;
  font-family: "ModuSans Semibold", sans-serif;
  margin-bottom: 0.5rem;
  font-weight: normal;
}
#moduform__about-header_anniversary.moduform_50th h2 {
  text-align: center;
  font-family: "Forma DJR Mono Reg";
  font-display: swap;
  font-style: normal;
  font-weight: normal;
  font-size: 1.5rem;
  margin-bottom: 3rem;
}

#moduform__about-header-container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 0;
}

#moduform__mobile-about-header-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-gap: 0;
  display: none;
}

.tile-container {
  width: 100%;
  aspect-ratio: 1/1;
  perspective: 1000px;
  cursor: pointer;
}

.tile-container:hover .front.moduform__yellow {
  background-color: #EFD720;
}
.tile-container:hover .front.moduform__teal {
  background-color: #00B3D5;
}
.tile-container:hover .front.moduform__blue {
  background-color: #0085C7;
}
.tile-container:hover .front.moduform__green {
  background-color: #09A221;
}
.tile-container:hover .front.moduform__red {
  background-color: #D31C12;
}
.tile-container:hover .front.moduform__pink {
  background-color: #EBA7D7;
}
.tile-container:hover .front.moduform__orange {
  background-color: #E88D15;
}

.tile-container.large {
  grid-row: span 2;
  grid-column: span 2;
}

.tile-container > div {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

.tile-container > div.flip {
  transform: rotateY(180deg);
  transition: transform 0.75s;
}

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back {
  transform: rotateY(180deg);
  background-size: cover;
}

@media screen and (max-width: 767px) {
  #moduform__about-header-container {
    display: none;
  }
  #moduform__mobile-about-header-container {
    display: grid;
  }
  #moduform__about-header_anniversary.moduform_50th .fireworks-container .firework:first-of-type {
    top: 62%;
    left: 33.3%;
    --size: 20vw;
    --delay: 0s;
  }
  #moduform__about-header_anniversary.moduform_50th .fireworks-container .firework:nth-of-type(2) {
    top: 60%;
    left: 85%;
    --size: 21vw;
    --delay: 0s;
  }
  #moduform__about-header_anniversary.moduform_50th .fireworks-container .firework:nth-of-type(3) {
    top: 84%;
    left: 25%;
    --size: 19vw;
    --delay: 0s;
  }
  #moduform__about-header_anniversary.moduform_50th .fireworks-container .firework:nth-of-type(4) {
    top: 48%;
    left: 55%;
    --size: 22vw;
    --delay: 0s;
  }
}/*# sourceMappingURL=about-header-component-style.css.map */