//
// Basic card
// ----------------------------
@import "../global";

.card--basic {
  --card-basic-padding: 1.5rem;
  --card-basic-border-radius: 0;
  --card-basic-background-color: #{$violet-lightest};
  --card-basic-vertical-image-width: 300px;

  border-radius: var(--card-basic-border-radius);
  background-color: var(--card-basic-background-color);

  &-content {
    padding: var(--card-basic-padding);
  }

  &-image {
    position: relative;

    img {
      width: 100%;
      height: auto;
    }

    .card--basic-date {
      font-size: 0.875rem;
    }
  }

  &-title {
    margin-bottom: 1rem;

    a {
      font-size: 1.5rem;
      color: $black;
      font-weight: $font-weight-bold;
    }
  }

  &-link {
    font-weight: $font-weight-bold;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  // Default links
  .links {
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;

    a {
      font-weight: $font-weight-bold;
      letter-spacing: 0.05em;
    }
  }

  &--vertical {
    margin-bottom: 2rem;

    @include media-breakpoint-up(md) {
      display: flex;

      .card--basic-image {
        flex-shrink: 0;
        width: var(--card-basic-vertical-image-width);

        img {
          @include object-cover;
        }
      }
    }
  }
}
