/* Responsive rules */
@media screen and (max-width: 40em) {
  .sm-hidden {
    display: none;
  }
  .grid {
    display: grid;
  }
  .sm-col-1 {
    grid-template-columns: 1fr;
  }
  .sm-col-2 {
    grid-template-columns: 1fr 1fr;
  }
  .sm-col-3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .sm-row-1 {
    grid-template-rows: 1fr;
  }
  .sm-row-2 {
    grid-template-rows: 1fr 1fr;
  }
  .sm-row-3 {
    grid-template-rows: 1fr 1fr 1fr;
  }
  .grid-item-square {
    grid-row-start: unset;
    grid-row-end: unset;
  }
  .bg-face-white {
    background-size: 150%;
    background-position: center;
  }
}
/* Big screens */
@media screen and (min-width: 1640px) {
  body {
    font-size: 1.4em;
  }
  .marquee-small {
    font-size: 1.2em;
    padding-top: 0.03em;
  }
  .scroll-x {
    --text-width: 13rem;
  }
  .scroll-x-large {
    --text-width: 25.5rem;
  }
}

@media screen and (min-width: 2000px) {
  body {
    font-size: 2em;
  }
  .marquee-small {
    font-size: 1.4em;
    padding-top: 0.2em;
  }
  .scroll-x {
    --text-width: 20rem;
  }
  .scroll-x-large {
    --text-width: 43rem;
  }
}