@layer components {
@media (max-width: 1023px) {
  .obj-phone {
    width: 100%;
    max-width: 640px;

    margin-inline: auto;
  }

  .obj-phone > svg {
    display: block;
    width: 100%;
    height: auto;
  }

  .obj-phone--bleed {
    max-width: none;
    width: calc(100% + 2 * var(--gutter));
    margin-inline: calc(-1 * var(--gutter));
  }
}

@media (max-width: 1023px) {
  .mob-rail {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;

    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 40px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 40px), transparent 100%);
  }

  .mob-rail > * { scroll-snap-align: start; }

  .mob-rail::-webkit-scrollbar { height: 4px; }
  .mob-rail::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 2px;
  }
  .mob-rail::-webkit-scrollbar-track { background: transparent; }

  .mob-rail-cue {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .mob-rail-cue::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, var(--border-strong), transparent);
  }
}

@media (min-width: 1024px) {
  .mob-rail-cue { display: none; }
}

@media (min-width: 1024px) {
  .mob-rail--wrap { display: contents; }
}
}