.card.card--image-tile {
  height: 250px;
  --card-padding: var(--size-10, 40px);
  position: relative;
  overflow: hidden;
}
  @media (width > 50rem) {.card.card--image-tile {
    height: 500px
}
  }
  .card.card--image-tile:hover img {
      transform: scale(1.1);
    }
  .card.card--image-tile a:not([data-dialog-type="dialog"]) {
    text-decoration: none;
    height: 100%;
  }
  .card.card--image-tile .image-wrapper >div{
      height:inherit;
    }
  .card.card--image-tile .image-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
}
  .card.card--image-tile .image-wrapper:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%);
      z-index: 10;
    }
  .card.card--image-tile .image-wrapper img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
      z-index: -1;
      transition: transform 500ms;
    }
  .card.card--image-tile .card--content {
    justify-content: center;
    height: 100%;
  }
  .card.card--image-tile .card--content h3 {
      text-align: center;
      color: white;
    }