/* Only the campaign catalogue (/sbory): keep the first card close to the header. */
@media (max-width: 620px) {
  .public-body .public-campaign-list-hero {
    padding: 0;
  }

  .public-campaign-list-hero .public-collection-hero-grid {
    display: block;
  }

  .public-campaign-list-hero .public-breadcrumbs,
  .public-campaign-list-hero .public-section-kicker,
  .public-campaign-list-hero p,
  .public-campaign-list-hero .public-collection-summary,
  .public-campaign-list .public-collection-filter,
  .public-campaign-list .public-results-head {
    display: none;
  }

  /* Preserve the page heading for assistive technologies without a visible hero. */
  .public-body .public-campaign-list-hero h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .public-body .public-campaign-list {
    padding-top: 12px;
  }

  .public-body .public-campaign-list .public-collection-grid {
    gap: 12px;
  }

  .public-campaign-list .public-card-media {
    height: clamp(130px, 36vw, 160px);
    aspect-ratio: auto;
  }

  .public-campaign-list .public-card-status,
  .public-campaign-list .public-card-featured {
    top: 8px;
    padding: 5px 7px;
    font-size: 9px;
  }

  .public-campaign-list .public-card-status {
    left: 8px;
  }

  .public-campaign-list .public-card-featured {
    right: 8px;
  }

  .public-body .public-campaign-list .public-card-body {
    padding: 12px;
  }

  .public-campaign-list .public-card-body > p {
    -webkit-line-clamp: 3;
  }

  .public-campaign-list .public-progress-block {
    padding: 8px 0 0;
    margin-bottom: 12px;
  }

  .public-campaign-list .public-progress-foot {
    flex-wrap: wrap;
    gap: 3px 9px;
  }
}