/*
 * Luv, Mud — 404 page (sections/luvmud-404.liquid, assets/luvmud-404.js)
 *
 * The stage is a size container: everything inside it (puddle, character, bubble, question marks, mud drops) is laid
 * out in cqw so the little scene scales as one picture. The character sits in a "well" whose bottom edge is clipped
 * along the front of the puddle's waterline, so diving just means sliding down inside it.
 */

.l404-section {
  --l404-ink: #17233a;
  --l404-cream: #fff9f0;
  --l404-lime: #c4d96b;
  --l404-pink: #f36881;
  --l404-orange: #fb7e3b;
  --l404-teal: #64bfc2;
  --l404-blue: #5993f1;
  --l404-mud: #7d5130;
  --l404-mud-dark: #6b4426;
  --l404-free-height: calc(100vh - var(--announcement-bar-height, 0px) - var(--header-height, 0px));
}

@supports (height: 100svh) {
  .l404-section {
    --l404-free-height: calc(100svh - var(--announcement-bar-height, 0px) - var(--header-height, 0px));
  }
}

.l404 {
  position: relative;
  display: block;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
  min-height: max(32rem, var(--l404-free-height));
  padding: 2.5rem max(16px, var(--container-gutter, 16px));
  color: var(--l404-ink);
  background:
    radial-gradient(90% 30% at 50% 104%, rgb(240 222 192 / 0.9), rgb(240 222 192 / 0) 70%),
    radial-gradient(40% 35% at 88% 6%, rgb(255 240 168 / 0.75), rgb(255 240 168 / 0) 70%),
    linear-gradient(180deg, #d7eef6 0%, #e8f5f1 38%, var(--l404-cream) 72%);
}

/* --- Sky decoration --------------------------------------------------------------------------------------------- */

.l404__sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.l404__cloud {
  position: absolute;
  width: 11rem;
  aspect-ratio: 2.4;
  background:
    radial-gradient(circle at 30% 62%, #fff 0 22%, transparent 23%),
    radial-gradient(circle at 52% 42%, #fff 0 30%, transparent 31%),
    radial-gradient(circle at 74% 60%, #fff 0 22%, transparent 23%),
    radial-gradient(ellipse 46% 26% at 52% 74%, #fff 0 98%, transparent 100%);
  filter: drop-shadow(0 4px 0 rgb(23 35 58 / 0.06));
  opacity: 0.95;
}

.l404__cloud--1 { top: 9%; left: 4%; }
.l404__cloud--2 { top: 4%; left: 46%; width: 7rem; opacity: 0.8; }
.l404__cloud--3 { top: 28%; right: 3%; width: 8.5rem; opacity: 0.85; }

/* Little mud splats on the ground */
.l404__splat {
  position: absolute;
  width: 1.4rem;
  aspect-ratio: 1.6;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #8e5f3a, var(--l404-mud-dark) 70%);
  opacity: 0.55;
}

.l404__splat--1 { bottom: 9%; left: 6%; }
.l404__splat--2 { bottom: 5%; left: 11%; width: 0.7rem; }
.l404__splat--3 { bottom: 7%; right: 8%; width: 1rem; }

/* --- Layout ----------------------------------------------------------------------------------------------------- */

.l404__inner {
  display: grid;
  grid-template-areas: "intro" "stage" "outro";
  justify-items: center;
  align-content: center;
  gap: 1.1rem;
  max-width: 74rem;
  min-height: calc(max(32rem, var(--l404-free-height)) - 5rem);
  margin-inline: auto;
  text-align: center;
}

.l404__intro { grid-area: intro; }
.l404__stage { grid-area: stage; }
.l404__outro { grid-area: outro; }

@media screen and (min-width: 900px) {
  .l404 {
    padding-inline: max(16px, var(--container-gutter, 16px), 5vw);
  }

  .l404__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "intro stage" "outro stage";
    grid-template-rows: auto auto;
    justify-items: start;
    align-items: end;
    column-gap: clamp(2rem, 5vw, 5rem);
    row-gap: 1.5rem;
    text-align: start;
  }

  .l404__outro {
    align-self: start;
  }
}

/* --- Text ------------------------------------------------------------------------------------------------------- */

.l404__sticker {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.55em 0.9em 0.5em;
  border: 2px solid var(--l404-ink);
  border-radius: 0.7em;
  background: var(--l404-cream);
  box-shadow: 0 3px 0 var(--l404-ink), 0 6px 14px rgb(23 35 58 / 0.18);
  color: var(--l404-ink);
  font-family: var(--text-font-family);
  font-weight: 700;
  font-size: var(--text-sm, 0.8125rem);
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  rotate: -3deg;
}

/* Bubbly lettering, same recipe as the hero headline */
.l404__heading {
  --l404-heading-size: calc(clamp(2.4rem, 1.1rem + 3vw, 4.3rem) * var(--text-heading-size-factor, 1));
  max-width: 13ch;
  margin: 0;
  font-family: var(--heading-font-family);
  font-weight: var(--l404-word-weight, 700);
  font-style: var(--heading-font-style, normal);
  font-size: min(var(--l404-heading-size), calc(var(--l404-free-height) * 0.12));
  line-height: 1.06;
  letter-spacing: 0.02em;
  text-transform: none;
  text-wrap: balance;
  color: var(--l404-lime);
  -webkit-text-stroke: 0.12em var(--l404-ink);
  paint-order: stroke fill;
  text-shadow: 0.03em 0.07em 0 var(--l404-ink), 0.03em 0.12em 0.18em rgb(23 35 58 / 0.25);
}

.l404__text {
  max-width: 30rem;
  margin: 0 0 1.4rem;
  font-size: var(--text-lg, 1rem);
  line-height: 1.45;
  color: rgb(23 35 58 / 0.85);
}

.l404__text > :first-child { margin-top: 0; }
.l404__text > :last-child { margin-bottom: 0; }

/* --- Clay buttons ------------------------------------------------------------------------------------------------ */

.l404__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.9rem 1rem;
  padding-bottom: 4px;
}

@media screen and (min-width: 900px) {
  .l404__actions {
    justify-content: flex-start;
  }
}

.l404 .l404__actions .button {
  border: 2px solid var(--l404-ink);
  box-shadow: 0 4px 0 var(--l404-ink), 0 8px 16px rgb(23 35 58 / 0.2);
  transform-origin: 50% 100%;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.l404 .l404__actions .button:not(.button--outline) {
  padding: 0.85rem 2rem;
  font-size: calc(var(--text-base, 0.875rem) * 1.08);
}

.l404 .l404__actions .button--outline {
  --initial-gradient: linear-gradient(var(--l404-cream), var(--l404-cream));
  color: var(--l404-ink);
  background-size: 101% 101%, 0 101%;
}

.l404 .l404__actions .button:hover {
  color: var(--l404-ink);
  border-color: var(--l404-ink);
  background-position: var(--initial-background-position);
  background-size: 101% 101%, 0 101%;
  transform: translateY(-1px);
  box-shadow: 0 5px 0 var(--l404-ink), 0 10px 18px rgb(23 35 58 / 0.22);
}

.l404 .l404__actions .button:active {
  transform: translateY(3px) scale(1.04, 0.92);
  box-shadow: 0 1px 0 var(--l404-ink), 0 3px 8px rgb(23 35 58 / 0.18);
}

/* --- Stage ------------------------------------------------------------------------------------------------------- */

.l404__stage {
  position: relative;
  container-type: inline-size;
  width: min(100%, 24rem, calc(var(--l404-free-height) * 0.54));
  min-width: min(100%, 16.5rem);
  aspect-ratio: 1 / 0.92;
}

@media screen and (min-width: 900px) {
  .l404__stage {
    width: min(34rem, 44vw, calc((var(--l404-free-height) - 5rem) / 0.92));
    min-width: 22rem;
  }
}

/* Speech bubble (top left, tail pointing at the character's head) */
.l404__bubble {
  position: absolute;
  top: 1cqw;
  left: 0;
  z-index: 4;
  width: 58cqw;
  padding: 3.2cqw 4.2cqw;
  border: max(2px, 0.6cqw) solid var(--l404-ink);
  border-radius: 6cqw;
  background: #fff;
  box-shadow: 0 1cqw 0 var(--l404-ink), 0 2.4cqw 4cqw rgb(23 35 58 / 0.15);
  transform-origin: 70% 100%;
  rotate: -2deg;
}

.l404__bubble::after {
  content: "";
  position: absolute;
  right: 12cqw;
  bottom: -4.2cqw;
  width: 6cqw;
  height: 6cqw;
  border: inherit;
  border-width: 0 max(2px, 0.6cqw) max(2px, 0.6cqw) 0;
  border-bottom-right-radius: 1.4cqw;
  background: #fff;
  box-shadow: 0.8cqw 0.8cqw 0 0 var(--l404-ink);
  transform: rotate(30deg) skew(-12deg, -12deg);
}

.l404__bubble-text {
  margin: 0;
  font-family: var(--heading-font-family);
  font-weight: 600;
  font-size: max(0.875rem, 4.6cqw);
  line-height: 1.22;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
  color: var(--l404-ink);
}

/* Floating question marks over the head */
.l404__questions {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.l404__q {
  position: absolute;
  font-family: var(--heading-font-family);
  font-weight: var(--l404-word-weight, 700);
  line-height: 1;
  color: var(--l404-lime);
  -webkit-text-stroke: 0.14em var(--l404-ink);
  paint-order: stroke fill;
  text-shadow: 0.04em 0.08em 0 var(--l404-ink);
  transition: opacity 0.25s ease, scale 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.l404__q--1 { left: 62cqw; top: 26cqw; font-size: 9cqw; color: var(--l404-pink); rotate: -12deg; }
.l404__q--2 { left: 72cqw; top: 12cqw; font-size: 13cqw; color: var(--l404-lime); rotate: 10deg; }
.l404__q--3 { left: 86cqw; top: 25cqw; font-size: 8cqw; color: var(--l404-orange); rotate: 18deg; }

.l404.is-diving .l404__q {
  opacity: 0;
  scale: 0.3;
}

.l404.is-diving .l404__q--2 { transition-delay: 0.05s; }
.l404.is-diving .l404__q--3 { transition-delay: 0.1s; }

/* Puddle: layered mud browns with a glossy sky reflection, sitting in a halo of damp ground */
.l404__puddle {
  position: absolute;
  left: 4cqw;
  right: 4cqw;
  bottom: 4cqw;
  height: 23cqw;
  z-index: 1;
}

.l404__puddle::before,
.l404__puddle::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, var(--l404-mud), var(--l404-mud-dark) 80%);
  box-shadow: 0 0 0 1.4cqw rgb(150 108 70 / 0.22);
}

/* Side lobes so the puddle isn't a perfect ellipse */
.l404__puddle::before { left: -3cqw; bottom: 2.5cqw; width: 30cqw; height: 13cqw; rotate: -6deg; }
.l404__puddle::after { right: -2.5cqw; bottom: 1cqw; width: 26cqw; height: 12cqw; rotate: 8deg; }

.l404__puddle-back {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 44% 56% 52% 48% / 55% 45% 55% 45%;
  background:
    radial-gradient(ellipse 20% 13% at 24% 30%, rgb(255 255 255 / 0.6), rgb(255 255 255 / 0) 70%),
    radial-gradient(ellipse 7% 5% at 79% 26%, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0) 70%),
    radial-gradient(ellipse 3% 2.4% at 70% 70%, rgb(255 255 255 / 0.45), rgb(255 255 255 / 0) 70%),
    radial-gradient(ellipse 45% 30% at 50% 30%, rgb(196 226 238 / 0.32), rgb(196 226 238 / 0) 70%),
    radial-gradient(ellipse 72% 64% at 50% 40%, #8f5d37 0%, var(--l404-mud) 40%, var(--l404-mud-dark) 72%, #5b3920 100%);
  box-shadow:
    inset 0 1cqw 1.2cqw rgb(40 22 10 / 0.35),
    inset 0 -0.6cqw 0.8cqw rgb(170 120 80 / 0.35),
    0 0 0 1.4cqw rgb(150 108 70 / 0.22),
    0 0 0 3cqw rgb(150 108 70 / 0.08);
}

/* Tiny satellite puddles */
.l404__puddle-back::before,
.l404__puddle-back::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #8f5d37, var(--l404-mud-dark) 75%);
}

.l404__puddle-back::before { left: -3cqw; bottom: -3.4cqw; width: 6cqw; height: 2.6cqw; border-radius: 55% 45% 50% 50%; }
.l404__puddle-back::after { right: 4cqw; bottom: -4.2cqw; width: 3.6cqw; height: 1.6cqw; }

/* The character's well: clipped along the front of the waterline, so it can sink into the puddle */
.l404__well {
  position: absolute;
  inset: 0 0 14cqw;
  z-index: 2;
  pointer-events: none;
  clip-path: polygon(
    -20% -40%, 120% -40%, 120% calc(100% - 3cqw),
    73% calc(100% - 3cqw), 68.4% calc(100% - 1.2cqw), 63.8% calc(100% - 0.6cqw), 59.2% calc(100% - 0.25cqw),
    54.6% calc(100% - 0.06cqw), 50% 100%, 45.4% calc(100% - 0.06cqw), 40.8% calc(100% - 0.25cqw),
    36.2% calc(100% - 0.6cqw), 31.6% calc(100% - 1.2cqw), 27% calc(100% - 3cqw), -20% calc(100% - 3cqw)
  );
}

.l404__char {
  position: absolute;
  left: 27cqw;
  bottom: -2.4cqw;
  width: 46cqw;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.l404__char:focus-visible {
  outline: none;
}

.l404__char:focus-visible .l404__mini {
  filter: drop-shadow(0 0 0.4rem rgb(255 255 255)) drop-shadow(0 0 0.15rem var(--l404-ink));
}

.l404__char-move {
  position: relative;
  display: block;
  transform-origin: 50% 92%;
}

.l404 .l404__mini {
  width: 100%;
  transform-origin: 50% 100%;
}

/* Muddy bottom (and splats after a dive), masked to the character's own silhouette; it creeps higher each dive */
.l404__char-move::before,
.l404__char-move::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask: var(--l404-art) center / 100% 100% no-repeat;
  mask: var(--l404-art) center / 100% 100% no-repeat;
}

.l404__char-move::after {
  background:
    radial-gradient(ellipse 11% 3.6% at 22% calc(100% - var(--l404-mudline, 16%)), rgb(107 68 38 / 0.96) 0 66%, rgb(107 68 38 / 0) 72%),
    radial-gradient(ellipse 8% 4.6% at 41% calc(100% - var(--l404-mudline, 16%) - 0.4%), rgb(107 68 38 / 0.96) 0 66%, rgb(107 68 38 / 0) 72%),
    radial-gradient(ellipse 13% 3% at 62% calc(100% - var(--l404-mudline, 16%)), rgb(107 68 38 / 0.96) 0 66%, rgb(107 68 38 / 0) 72%),
    radial-gradient(ellipse 7% 4.2% at 82% calc(100% - var(--l404-mudline, 16%) - 0.3%), rgb(107 68 38 / 0.96) 0 66%, rgb(107 68 38 / 0) 72%),
    radial-gradient(ellipse 60% 9% at 50% calc(100% - var(--l404-mudline, 16%) + 4%), rgb(176 128 88 / 0.35), rgb(176 128 88 / 0) 70%),
    linear-gradient(0deg, #5d3a1f 0, rgb(107 68 38 / 0.96) calc(var(--l404-mudline, 16%) - 0.8%), rgb(107 68 38 / 0) calc(var(--l404-mudline, 16%) + 0.4%));
  transition: --l404-mudline 0.6s ease;
}

.l404__char-move::before {
  z-index: 1;
  background:
    radial-gradient(ellipse 4% 3.4% at 26% 62%, var(--l404-mud-dark) 0 70%, transparent 100%),
    radial-gradient(ellipse 2.4% 2% at 33% 55%, var(--l404-mud-dark) 0 70%, transparent 100%),
    radial-gradient(ellipse 3.4% 3% at 70% 30%, var(--l404-mud-dark) 0 70%, transparent 100%),
    radial-gradient(ellipse 2% 1.8% at 64% 24%, var(--l404-mud-dark) 0 70%, transparent 100%),
    radial-gradient(ellipse 3% 2.6% at 78% 66%, var(--l404-mud-dark) 0 70%, transparent 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.l404.is-muddy .l404__char-move::before {
  opacity: 0.9;
}

/* The waist ripple hides while the character is under */
.l404.is-diving .l404__puddle-front {
  opacity: 0;
  transition: opacity 0.2s ease 0.3s;
}

.l404 .l404__mini.is-sad .lm-mini__frown { transition-delay: 0.05s; }

/* Front lip of mud around the character's waist */
.l404__puddle-front {
  position: absolute;
  left: 24cqw;
  width: 52cqw;
  bottom: 12.4cqw;
  height: 8.4cqw;
  z-index: 3;
  pointer-events: none;
}

.l404__puddle-front::before,
.l404__puddle-front::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.8cqw solid transparent;
  border-bottom-color: var(--l404-mud);
}

/* Glossy highlight along the bulge of mud hugging the character */
.l404__puddle-front::after {
  inset: 0.9cqw 3cqw auto;
  height: 100%;
  border-width: 0.55cqw;
  border-color: transparent transparent rgb(255 236 214 / 0.42);
}

.l404__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 0.7cqw solid rgb(176 128 88 / 0.85);
  opacity: 0;
}

/* Mud drops and blub bubbles (created by the script) */
.l404__drops {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.l404__drop {
  position: absolute;
  left: 50cqw;
  bottom: 17cqw;
  width: var(--s, 3cqw);
  aspect-ratio: 1;
  margin: calc(var(--s, 3cqw) / -2);
  border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
  background: radial-gradient(circle at 34% 30%, #b07c52 0 12%, #8a5a36 30%, var(--l404-mud-dark) 70%, #4e2f19);
  box-shadow: 0 0.3cqw 0 rgb(40 22 10 / 0.25);
}

.l404__blub {
  position: absolute;
  left: 50cqw;
  bottom: 17cqw;
  width: var(--s, 3cqw);
  aspect-ratio: 1;
  margin: calc(var(--s, 3cqw) / -2);
  border-radius: 50%;
  border: 0.45cqw solid #a4744b;
  background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / 0.7) 0 14%, rgb(160 112 74 / 0.6) 30%, rgb(125 81 48 / 0.85));
}

/* "psst… tap me!" sticker */
.l404__hint {
  position: absolute;
  right: 0;
  bottom: 47cqw;
  z-index: 4;
  margin: 0;
  padding: 0.5em 0.75em;
  border: 2px solid var(--l404-ink);
  border-radius: 0.8em;
  background: var(--l404-lime);
  box-shadow: 0 3px 0 var(--l404-ink);
  font-family: var(--heading-font-family);
  font-weight: 600;
  font-size: max(0.75rem, 3.4cqw);
  line-height: 1;
  white-space: nowrap;
  color: var(--l404-ink);
  rotate: 7deg;
  pointer-events: none;
  transition: opacity 0.3s ease, scale 0.3s ease;
}

.l404.has-dived .l404__hint {
  opacity: 0;
  scale: 0.6;
}

/* --- Peeking friend ---------------------------------------------------------------------------------------------- */

.l404__peek {
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 0;
  width: clamp(5.5rem, 9vw, 9rem);
  pointer-events: none;
}

.l404__peek-move {
  display: block;
  transform: translateX(115%);
  transform-origin: 100% 100%;
}

.l404 .l404__peek-mini {
  width: 100%;
}

/* --- Motion ------------------------------------------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  .l404__q {
    animation: l404-bob 2.6s ease-in-out infinite;
  }

  .l404__q--2 { animation-delay: -0.9s; animation-duration: 3s; }
  .l404__q--3 { animation-delay: -1.7s; animation-duration: 2.3s; }

  .l404__char-move {
    animation: l404-sway 4.2s ease-in-out infinite;
  }

  .l404__char:hover .l404__char-move {
    animation-duration: 1.4s;
  }

  .l404__hint {
    animation: l404-nudge 2.4s ease-in-out infinite;
  }

  .l404__cloud {
    animation: l404-drift 22s ease-in-out infinite alternate;
  }

  .l404__cloud--2 { animation-duration: 28s; animation-delay: -9s; }
  .l404__cloud--3 { animation-duration: 25s; animation-delay: -4s; }

  .l404__bubble {
    animation: l404-float 5s ease-in-out infinite;
  }
}

@keyframes l404-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -2.4cqw; }
}

@keyframes l404-sway {
  0%, 100% { transform: rotate(-2.5deg) scale(1, 1); }
  25% { transform: rotate(0deg) scale(1.015, 0.985); }
  50% { transform: rotate(2.5deg) scale(1, 1); }
  75% { transform: rotate(0deg) scale(0.99, 1.01); }
}

@keyframes l404-nudge {
  0%, 70%, 100% { translate: 0 0; }
  80% { translate: 0 -0.35rem; }
  90% { translate: 0 0.05rem; }
}

@keyframes l404-drift {
  from { translate: -1.5rem 0; }
  to { translate: 1.5rem 0; }
}

@keyframes l404-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -0.8cqw; }
}

@property --l404-mudline {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 16%;
}

@media (prefers-reduced-motion: reduce) {
  .l404 .l404__actions .button {
    transition: none;
  }

  .l404 .l404__actions .button:active {
    transform: translateY(2px);
  }

  .l404__peek {
    display: none;
  }

  .l404__q,
  .l404__hint,
  .l404__char-move::after {
    transition: none;
  }
}

/* --- Phones ------------------------------------------------------------------------------------------------------ */

@media screen and (max-width: 899px) {
  .l404 {
    padding-block: 1.25rem 2rem;
  }

  .l404__heading {
    --l404-heading-size: calc(clamp(1.9rem, 1.1rem + 3.6vw, 3rem) * var(--text-heading-size-factor, 1));
    max-width: 14ch;
    margin-inline: auto;
  }

  .l404__sticker {
    margin-bottom: 0.7rem;
  }

  .l404__text {
    margin: 0 auto 1rem;
    font-size: var(--text-base, 0.875rem);
  }

  .l404 .l404__actions {
    gap: 0.75rem 0.6rem;
  }

  .l404 .l404__actions .button:not(.button--outline),
  .l404 .l404__actions .button {
    padding: 0.75rem 1.15rem;
    font-size: var(--text-sm, 0.8125rem);
  }

  .l404__cloud--1 { width: 7rem; top: 5%; }
  .l404__cloud--2 { display: none; }
  .l404__cloud--3 { width: 6rem; top: 44%; }
}

@media screen and (max-width: 899px) and (max-height: 700px) {
  .l404__text {
    display: none;
  }
}