.page > .mobile-page,
.mobile-ui {
  display: none;
}

@media (max-width: 767px) {
  .page {
    width: 100%;
    max-width: 440px;
    --mu: calc(100cqw / 440);
  }

  .page > *:not(.mobile-page):not(.mobile-ui) {
    display: none !important;
  }

  .page > .mobile-page {
    display: block;
    width: 100%;
    height: auto;
  }

  .mobile-ui {
    display: block;
    font-family: "Figtree", system-ui, sans-serif;
    line-height: 1.25;
  }

  .m {
    position: absolute;
    z-index: 5;
    left: calc(var(--x) * var(--mu));
    top: calc(var(--y) * var(--mu));
    width: calc(var(--w) * var(--mu));
    height: calc(var(--h) * var(--mu));
  }

  .m-hit {
    display: block;
    padding: 0;
    border: 0;
    border-radius: calc(10 * var(--mu));
    background: transparent;
    color: transparent;
    font-size: 0;
    cursor: pointer;
  }

  .mobile-ui :focus-visible {
    outline: 2px solid #111;
    outline-offset: 2px;
  }

  .m-menu {
    z-index: 6;
    display: flex;
    flex-direction: column;
    padding: calc(10 * var(--mu)) calc(30 * var(--mu)) calc(18 * var(--mu));
    background: #000;
  }

  .m-menu[hidden] { display: none; }

  .m-menu a {
    padding: calc(10 * var(--mu)) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: calc(18 * var(--mu));
    text-decoration: none;
  }

  .m-menu a:last-child { border-bottom: 0; }
  .m-menu a[aria-current="page"] { font-weight: 700; }
  .m-menu :focus-visible { outline-color: #fff; }

  .m-pill {
    padding: 0;
    border: 0;
    border-radius: 100px;
    background: #e9e9e9;
    cursor: pointer;
    transition: background-color 0.25s ease;
  }

  .m-pill img {
    display: block;
    width: 100%;
    height: 100%;
    transition: filter 0.25s ease;
  }

  .m-pill[aria-pressed="true"] { background: #000; }
  .m-pill[aria-pressed="true"] img { filter: invert(1); }

  .m-card {
    overflow: hidden;
    border-radius: calc(29 * var(--mu)) calc(20 * var(--mu));
    background: linear-gradient(var(--top) calc(244 * var(--mu)), var(--bottom) 0);
    color: #fff;
    text-align: center;
    transition: background 0.3s ease;
  }

  .m-card .m { z-index: auto; }

  .m-art,
  .m-copy {
    position: absolute;
    inset: 0;
  }

  .m-art,
  .m-copy { animation: m-swap 0.35s ease both; }

  .m-shadow {
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
  }

  .m-art img {
    display: block;
    object-fit: fill;
  }

  .m-pack {
    filter: drop-shadow(calc(9.6 * var(--mu)) 0 calc(9.6 * var(--mu)) rgba(0, 0, 0, 0.2));
  }

  .m-pack.is-front {
    transform: rotate(var(--r));
  }

  .m-copy h2 {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(297 * var(--mu));
    margin: 0;
    font-size: calc(25 * var(--mu));
    font-weight: 700;
    line-height: calc(32 * var(--mu));
    text-transform: uppercase;
  }

  .m-copy p {
    position: absolute;
    left: calc(73 * var(--mu));
    width: calc(235 * var(--mu));
    top: calc(341 * var(--mu));
    margin: 0;
    font-size: calc(16 * var(--mu));
    font-weight: 300;
    line-height: calc(21 * var(--mu));
    text-transform: capitalize;
  }

  .m-buy {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    background: #000;
    color: #fff;
    font-size: calc(16 * var(--mu));
    text-decoration: none;
  }

  .m-loved {
    color: #111;
    text-align: center;
  }

  .m-loved h2,
  .m-loved p { margin: 0; }

  .m-loved h2 {
    font-size: calc(32 * var(--mu));
    font-weight: 800;
    line-height: calc(36 * var(--mu));
    letter-spacing: -0.01em;
    text-transform: uppercase;
  }

  .m-loved p {
    margin-top: calc(12 * var(--mu));
    font-size: calc(14 * var(--mu));
    line-height: calc(18 * var(--mu));
  }

  .m-contact {
    color: #fff;
    font-style: normal;
  }

  .m-contact a {
    display: block;
    color: inherit;
    font-size: calc(15 * var(--mu));
    line-height: calc(31 * var(--mu));
    text-decoration: none;
  }

  .m-contact :focus-visible { outline-color: #fff; }

  @keyframes m-swap {
    from { opacity: 0; transform: translateY(calc(10 * var(--mu))); }
    to { opacity: 1; transform: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .m-art,
    .m-copy { animation: none; }
  }
}