.card {
  &.rounded-5 {
    --bs-card-border-radius: var(--bs-border-radius-xxl);
  }

  &.rounded-4 {
    --bs-card-border-radius: var(--bs-border-radius-xl);
  }

  &.rounded-3 {
    --bs-card-border-radius: var(--bs-border-radius-lg);
  }

  &.rounded-2 {
    --bs-card-border-radius: var(--bs-border-radius-md);
  }

  &.rounded-1 {
    --bs-card-border-radius: var(--bs-border-radius-sm);
  }

  &.rounded-circle {
    --bs-card-border-radius: 50%;
  }

  &.rounded-pill {
    --bs-card-border-radius: 50rem;
  }

  &.border-5 {
    --bs-card-border-width: 5px;
  }

  &.border-4 {
    --bs-card-border-width: 4px;
  }

  &.border-3 {
    --bs-card-border-width: 3px;
  }

  &.border-2 {
    --bs-card-border-width: 2px;
  }

  &.border-1 {
    --bs-card-border-width: 1px;
  }

  --bs-card-inner-border-radius: calc(var(--bs-card-border-radius) - var(--bs-card-border-width));

  .card-img-top {
    border-top-left-radius: calc(var(--bs-card-border-radius) - var(--bs-card-border-width));
    border-top-right-radius: calc(var(--bs-card-border-radius) - var(--bs-card-border-width));
  }

  &:not(.card--horizontal) {
    .card-img-top {
      aspect-ratio: 16 / 9;
      object-fit: cover;
    }
  }

  &.card--horizontal {
    flex-direction: row;
    align-items: center;
    overflow: hidden;

    .card-image-container {
      width: 30%;
      height: 100%;
      flex-shrink: 0;
    }

    .card-img-top {
      position: absolute;
      left: 0;
      top: 0;
      width: 30%;
      height: 100%;
      border-top-right-radius: 0;
      border-bottom-left-radius: calc(var(--bs-card-border-radius) - var(--bs-card-border-width));
      object-fit: cover;
    }

    .field--name-field-media-image {
      width: 100%;
      height: 100%;
    }
  }

  &.fit-image {
    &:not(.card--horizontal) {
      .card-img-top {
        object-fit: contain;
      }
    }

    &.card--horizontal {
      .card-img-top {
        object-fit: contain;
        height: 100%;
      }

      &.image-center {
        .card-img-top {
          object-position: center;
        }
      }

      &.image-top {
        .card-img-top {
          object-position: top;
        }
      }

      &.image-bottom {
        .card-img-top {
          object-position: bottom;
        }
      }
    }
  }
}

.card-body {
  color: var(--bs-secondary);
  min-width: 55%;
}

a.card:hover {
  text-decoration: none;
}

.card-link {
  display: block;
  margin-top: 1em;
  color: var(--bs-primary);
}