@layer vendor {
  .block--cards {
    .block--cards__cards {
      display: grid;
      grid-template-columns: 1fr;

      /* TODO: Improve this, currently 768px will try to place 4 cards next to each other */
      @media (min-width: 768px) {
        &[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
        &[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
        &[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
      }
    }

    .block--cards__card {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(4, auto);
      grid-template-areas:
        "image"
        "title"
        "body"
        "button";
    }

    .block--cards__card-img {
      grid-area: image;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .block--cards__card-title {
      grid-area: title;
    }

    .block--cards__card-body {
      grid-area: body;
    }

    .block--cards__card-button {
      grid-area: button;
    }
  }
}