.ImageCard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  margin: 0 0 20px;
  transition: box-shadow 0.2s;
}@media screen and (min-width: 769px) {.ImageCard {
    margin: 0 10px 20px;
}
  }.ImageCard:hover figcaption {
    opacity: 1;
    transition: 0.2s opacity;
  }.ImageCard figcaption {
    z-index: 2;
    right: 0;
    left: auto;
  }

@media screen and (min-width: 1026px) {
    .CardList--default .ImageCard:hover .ImageCard-content {
      background-color: rgba(33, 33, 33, 0.5);
    }

    .CardList--default .ImageCard:hover .ImageCard-headline {
      top: 50%;
      right: 50%;
      bottom: auto;
      left: auto;
      width: -moz-max-content;
      width: max-content;
      height: -moz-max-content;
      height: max-content;
      background: transparent;
      transform: translate(50%, -50%);
    }

      .CardList--default .ImageCard:hover .ImageCard-headline h3 {
        padding: 0;
        background: transparent;
      }
}

.ImageCard-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: transparent;
}

.ImageCard-content h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem;
    text-transform: uppercase;
    word-break: break-word;
  }

.CardList--default .ImageCard-headline,
  .CardList--default .ImageCard-text {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
  }

.CardList--default .ImageCard-headline h3 {
      width: 100%;
      padding: 80px 20px 20px;
      background: linear-gradient(0deg, rgba(33, 33, 33, 1) 0%, rgba(33, 33, 33, 0) 100%);
    }

.CardList--default .ImageCard-headline h3::after {
        content: '';
        position: relative;
        top: -5px;
        left: -10px;
        display: inline-block;
        width: 25px;
        height: 25px;
        font-size: 1.25rem;
        background-image: url('../Images/DecorativeImage.svg');
        background-repeat: no-repeat;
      }

.CardList--small .ImageCard-image .ImageCard-content::after {
      color: #ffffff;
    }

.CardList--small a {
    color: var(--font-clr-primary);

    img {
      transition: transform 0.2s ease-in-out;
    }
  }

.CardList--small a:hover {
      img {
        transform: scale(1.1);
      }
    }

.CardList--small .ImageCard-content {
    padding: 20px 15px;
    transition: background 0.2s ease-in-out;
  }

.CardList--small .ImageCard-content:hover {
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
      color: #ffffff;
    }

.CardList--small .ImageCard-content::after {
      content: '\f054';
      position: absolute;
      right: 15px;
      bottom: 20px;
      font-family: 'Font Awesome 6 Pro';
      font-size: 1.4375rem;
      font-weight: 700;
    }

.CardList--small .ImageCard-content h3 {
      margin-bottom: 8px;
    }

.ImageCard.ImageCard-image .ImageCard-content .ImageCard-headline,
.ImageCard.ImageCard-image .ImageCard-content .ImageCard-text {
  color: #ffffff;
}

figure {
  min-width: 100px;
  min-height: 68px;
}