.card {
  .card-image {
    figure {
      position: relative;

      &::before {
        content: "";
        display: block;
        position: absolute;
        inset: 0;
        background: linear-gradient(oklch(from var(--bulma-card-background-color) l c h / 0) 25%, oklch(from var(--bulma-card-background-color) l c h / 1));
        z-index: 1;
        border-start-end-radius: var(--bulma-card-radius);
        border-start-start-radius: var(--bulma-card-radius);
      }
    }
  }

  .card-content {
    position: relative;
    margin-top: -5rem;
    z-index: 2;
    cursor: pointer;
  }

  .card-footer {
    margin-block-start: auto;
  }
}

.custom-layout {
  display: grid;

  @media (width > 750px) {
    grid-template-columns: max(375px, 25vw) 1fr;
  }
}