/*START:___paragraph___*/
@use "../../vendors/bootstrap" as *;
@use "../../abstracts/mixins" as *;

.paragraph {
  &__grid {
    display: grid;
    grid-template-areas: "title" "img" "paragraph" "cta";
    column-gap: var(--ev-space-xl, 1rem)
  }

  &__image {
    overflow: hidden;
    align-self: center;
    border-radius: var(--ev-border-radius);
  }

  & > *:not(:first-child) {
    margin-top: var(--ev-space-2xl);
  }

  .paragraph__item--Centre .paragraph__image {
    margin-bottom: var(--ev-space-xs-s);
  }

  @include media-breakpoint-up(lg) {
    &__item--Gauche .paragraph__grid:not(.no-img) {
      grid-template-areas: ".. img" "title img" "paragraph img" "cta img" ".. img";
      grid-template-columns: minmax(50%, 1fr) minmax(300px, 600px);
      grid-template-rows: 1fr repeat(3, min-content) 1fr;
    }

    &__item--Droite .paragraph__grid:not(.no-img) {
      grid-template-areas: "img .." "img title" "img paragraph" "img cta" "img ..";
      grid-template-columns: minmax(300px, 600px) minmax(50%, 1fr);
      grid-template-rows: 1fr repeat(3, min-content) 1fr;
    }
  }
}

/*END:___paragraph___*/