/* components__SpacesPage */
.rooms-note:not(.mc-s) {
    max-width: 62ch;
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .rooms-list:not(.mc-s) {
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
  }

  .room-card:not(.mc-s) {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--space-l);
    align-items: start;
    padding: var(--space-m);
  }

  /* `img` renderuje Foto.astro, więc bez :global() lokalny styl go nie widzi —
     zdjęcie zostawało w 16:9, a zastępnik w 4:3. */
  .room-media:not(.mc-s) img,
  .room-media:not(.mc-s) .mosaic-media:not(.mc-s) {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: calc(var(--radius) - 0.4rem);
  }

  .room-body:not(.mc-s) h2:not(.mc-s) {
    margin-block: 0.6rem var(--space-s);
    font-size: 1.6rem;
  }

  .room-block:not(.mc-s) {
    margin-bottom: var(--space-s);
    font-size: 0.9rem;
  }

  .room-block:not(.mc-s) ul:not(.mc-s) {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0.4rem 0 0;
    padding-left: 1.15rem;
    color: var(--muted);
  }

  .room-block:not(.mc-s) p:not(.mc-s) {
    margin: 0.3rem 0 0;
    color: var(--muted);
    line-height: 1.55;
  }

  .step-card:not(.mc-s) {
    align-items: flex-start;
    padding: var(--card-padding);
  }

  .step-num:not(.mc-s) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: var(--space-xs);
    border-radius: 999px;
    background: var(--teal);
    color: var(--white);
    font-weight: 800;
  }

  .step-card:not(.mc-s) h3:not(.mc-s) {
    margin-bottom: 0.4rem;
    font-size: 1.15rem;
  }

  .step-card:not(.mc-s) p:not(.mc-s) {
    margin: 0;
    color: var(--muted);
    font-size: 0.93rem;
  }

  @media (max-width: 820px) {
    .room-card:not(.mc-s) {
      grid-template-columns: minmax(0, 1fr);
    }
  }