:root { --overlay: rgba(0,0,0,.30); }

    /* slide tile (cap at 300x300) */
    .swiper-slide {
      height: 300px;              /* cap */
      max-height: 300px;
      width: 100%;
      border-radius: 20px;
      overflow: hidden;

      position: relative;
      display: grid;
      place-items: center;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    /* 30% overlay */
    .swiper-slide::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--overlay);
      z-index: 1;
    }

    .slide-content {
      position: relative;
      z-index: 2;
      align-content: top;
      text-align: center;
      padding: 5px 5px 80px;
      color: #fff;
      width: 100%;
    }

    .slide-title {
      margin: 0;
      vertical-align: top;
      font-family: Lato, Segoe UI, Roboto, Arial, sans-serif;
      font-weight: 600;
      font-size: 30px;
      color: #ffffff;
      text-shadow: 0 1px 2px rgba(0,0,0);
    }

    /* bottom CTA */
    .slide-cta {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      z-index: 3;
      display: block;
      text-align: center;
      padding: 12px 12px;
      color: #fff;
      text-decoration: none;
      font-weight: 300;
      background: rgba(0,0,0,.50);
      transition: background .2s ease;
    }
    .slide-cta:hover,
    .slide-cta:focus-visible { background: rgba(0,0,0,.60); outline: none; }

    /* no arrows/pagination */
    .swiper-button-prev, .swiper-button-next, .swiper-pagination { display:none !important; }

    /* Ensure slide width never exceeds 300px, but can shrink to fit */
    .swiper-slide {
      width: min(300px, 100%);
    }

    /* keep whole tiles visible; reduce tile size on smaller screens to fit 2-up cleanly */
    @media (max-width: 576px) {
      .swiper-slide { height: 240px; }
    }