/*START:___intro___*/
@use "../../vendors/bootstrap" as *;
@use "../../abstracts/mixins" as *;
@use "../../base/utils" as *;

.intro__container.d-grid {
  grid-template-areas: "content" "img";
  grid-template-columns: 1fr;
  padding-inline: var(--ev-grid-gutter);
  padding-bottom: var(--ev-grid-gutter);
}

@include media-breakpoint-up(md) {
  .intro__container.d-grid {
    grid-template-areas: ".. content .." ".. img ..";
    grid-template-columns:
      1fr calc(
        clamp(
            var(--ev-grid-min-width, 20rem),
            var(--ev-grid-preferred-width, 80%),
            var(--ev-grid-max-width, 62rem)
          ) - var(--ev-grid-gutter) * 2
      )
      1fr;
  }
}

@include media-breakpoint-up(lg) {
  .intro__container.d-grid {
    --img-width: 31.5vw;
    grid-template-areas: ".. content img img";
    padding-inline: 0;
    grid-template-columns:
      1fr calc(
        clamp(
            var(--ev-grid-min-width, 20rem),
            var(--ev-grid-preferred-width, 80%),
            var(--ev-grid-max-width, 62rem)
          ) - var(--ev-grid-gutter) * 2 - var(--img-width)
      )
      var(--img-width) 1fr;
    padding-bottom: 0;
  }
}

.intro__image {
  aspect-ratio: 3/2;
  height: 100%;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
}

.intro__image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.intro__grid.d-grid {
	grid-template-areas: "..""subtitle " "title    " "author   " "paragraph" "cta      ""..";
	padding-block: var(--ev-space-2xl);
	padding-right: var(--ev-space-2xl);
	height: 100%;
	grid-template-rows: 1fr repeat(5, auto) 1fr;
}

.intro__image.grid-image.loaded-image {
  height: 100%;
}

.intro .btn-primary {
  --btn-bg: hsl(
    var(--ev-primary-hue),
    var(--ev-primary-saturation),
    calc(var(--ev-primary-lightness) - 5%)
  );
}

.intro .btn-outline-primary {
  --btn-border-color: hsl(
    var(--ev-primary-hue),
    var(--ev-primary-saturation),
    calc(var(--ev-primary-lightness) - 5%)
  );
}

/*END:___intro___*/
