.card {
  --card-padding: 0px;
  --content-width: 100%;
  --card-background: transparent;
  background-color: var(--card-background);
  transition: background-color 300ms;
}
  .card h3 {
    color: var(--card-heading-color);
  }
  .card .card--body {
    color: var(--text-color);
  }
  .card .card--content {
    max-width: var(--content-width);
    padding-inline: var(--card-padding);
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
  }
  .card .card--date {
    color: var(--text-color);
  }
  .card .card--footer {
    display: grid;
  }
  .card .image-wrapper {
    max-width: calc(var(--content-width) + (var(--card-padding) * 2));
    width: 100%;
    aspect-ratio: 7/4;
  }
  .card .image-wrapper img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
    }
  .card .card--tags {
    display: flex;
    gap: var(--size-3);
  }
  .card[data-variant="basic"] {
    --card-padding: 12px;
    --content-width: 685px;
  }
  .card[data-variant="basic"] .image-wrapper {
      margin-bottom: 1.25rem;
    }
  .card[data-variant="row"] {
    display: flex;
    flex-direction: row;
    gap: 1.25rem;
    --content-width: 100%;
  }
  .card[data-variant="row"] .image-wrapper {
      max-width: 368px;
      height: 100%;
      aspect-ratio: unset;
    }
  .card[data-variant="row"] .card--content {
      padding-block: 1.25rem;
    }
  .card[data-variant="tile"] {
    --card-padding: 24px;
    --content-width: 100%;
    padding: var(--card-padding);
    height: 378px;
  }
  .card[data-variant="tile"]:hover {
      --card-background: var(--secondary-color-40);
    }
  .card[data-variant="tile"]:active {
      --card-background: var(--secondary-color-60);
    }
  .card[data-variant="tile"] .image-wrapper {
      display: none;
    }
  .card[data-variant="tile"] .card--content {
      padding: 0;
      height: 100%;
    }
  .card[data-variant="tile"] .card--footer {
      margin-top: auto;
    }
  .card[data-variant="image_tile"] {
    height: 250px;
    --card-padding: var(--size-10, 40px);
    position: relative;
    overflow: hidden;
  }
  @media (width > 50rem) {
  .card[data-variant="image_tile"] {
      height: 500px
  }
    }
  .card[data-variant="image_tile"]:hover img {
        transform: scale(1.1);
      }
  .card[data-variant="image_tile"] a {
      height: 100%;
      text-decoration: none;
    }
  .card[data-variant="image_tile"] .image-wrapper {
      width: 100%;
      position: absolute;
      z-index: -1;
    }
  .card[data-variant="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[data-variant="image_tile"] .image-wrapper img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
        z-index: -1;
        transition: transform 500ms;
      }
  .card[data-variant="image_tile"] .card--content {
      justify-content: center;
      height: 100%;
    }
  .card[data-variant="image_tile"] .card--content h3 {
        text-align: center;
        color: white;
      }
  .card[data-variant="standard"] {
    --card-padding: 12px;
  }
  .card[data-variant="standard"] .image-wrapper {
      height: 400px;
      width: 100%;
      max-width: 100%;
      aspect-ratio: unset;
    }
  .card[data-variant="standard"] .image-wrapper .contextual-region {
        height: 100%;
      }
  .card[data-variant="standard"] .image-wrapper img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
      }
  .card[data-variant="standard"] .card--content {
      padding-block-start: 1.25rem;
    }
  .card[data-variant="standard"] .card--content h3 {
        margin: 0;
      }
  /* if card contetnt has no children */
  .card:has(.card--content:empty)::after {
      display: block;
      content: attr(data-component-id);
      color: black;
      height: 50px;
      width: auto;
      -moz-text-align-last: center;
           text-align-last: center;
      align-content: center;
    }