/* =============================================================================
   Bild-Karten (gestapelt)
   ========================================================================== */

@scope (.stacking-cards) {
  .service-card {
    position: sticky;
    inset-block-start: 4rem;
    min-height: 24rem;
    display: flex;
    gap: var(--space-m);
    padding: var(--space-xs) var(--space-m) var(--space-xs) var(--space-xs);
    border-radius: var(--radius-l);
    background-color: white;
  }

  .service_img {
    align-self: stretch;
    max-width: 36%;
    aspect-ratio: 402 / 345;
    border-radius: var(--radius-s);
    object-fit: cover;
    overflow: clip;
  }

  .service-card_info {
    flex: 1;
    padding-block: var(--space-xs);
  }

  @media (width <= 991px) {
    .service-card {
      position: relative;
      inset-block-start: 0;
      width: 80%;
      min-height: auto;
      flex-flow: column;
      gap: var(--space-s);
      padding-inline-end: var(--space-xs);
    }

    .service_img {
      max-width: 100%;
      aspect-ratio: 16 / 9;
    }

    .service-card_info {
      padding-block-start: 0;
      padding-inline: var(--space-s);
    }
  }

  @media (width <= 767px) {
    .service-card {
      width: 100%;
    }
  }

  @media (width <= 479px) {
    .service-card_info {
      padding-block-end: 0;
      padding-inline: 0;
    }
  }
}