/*START:___article overview___*/
@use "../../abstracts/mixins" as *;
@use "../../vendors/bootstrap" as *;
.article--overview {
  .article__group {
    display: grid;
    gap: var(--ev-space-2xl);

    &-title {
      background-color: var(--ev-primary, var(--ev-dark));
      text-align: center;
      padding-block: var(--ev-article-group-title-padding-xs, 0.5rem)
        var(--ev-article-group-title-padding-xe, 1rem);
      padding-inline: var(--ev-article-group-title-padding-y, 1rem);
      border-radius: var(
        --ev-article-group-title-border-radius,
        var(--ev-border-radius)
      );

      & > * {
        color: var(--ev-heading-color, white);
        margin-block: 0;
      }
    }
  }

  .article__item {
    display: grid;
    grid-template-areas: "subtitle" "title" "img" "description" "cta";
    column-gap: calc(var(--ev-gutter-x, 1rem) * 2);

    & > *:not(:last-child) {
      margin: 0 0 1em 0;
    }

    .title {
      grid-area: title;
    }

    .subtitle {
      grid-area: subtitle;
    }

    &-image {
      grid-area: img;
      border: var(--ev-image-border-width, 1px)
        var(--ev-image-border-style, solid)
        var(--ev-image-border-color, transparent);

      @include media-breakpoint-up(lg) {
        box-shadow: var(--ev-image-box-shadow, none);
        border-radius: var(--ev-image-border-radius, var(--ev-border-radius));
        overflow: hidden;
      }
    }

    &-description {
      grid-area: description;
    }

    &-cta {
      grid-area: cta;
    }
  }

  @include media-breakpoint-up(lg) {
    .article__item--Gauche:not(.no-img),
    .article__item--Alternance:not(.no-img):nth-child(2n) {
      grid-template-areas: ".. img" "subtitle img" "title img" "description img" "cta img" ".. img";
    }

    .article__item--Droite:not(.no-img),
    .article__item--Alternance:not(.no-img):nth-child(2n + 1) {
      grid-template-areas: "img .." "img subtitle" "img title" "img description" "img cta" "img .. ";
    }
  }
}
/*END:___article overview___*/
