/* -------------------------------- 

Title: Feature
Descr: Content group containing text + media (img, video, iframe, inline SVG)

-------------------------------- */

.feature {}

@include breakpoint(md) {
  @supports (display: grid) {
    .feature--invert .feature__inner {
      > :first-child {
        order: 2;
      }

      > :last-child {
        order: 1;
      }
    }

    .feature__inner {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: var(--space-md); // gap between text and media elements
    }
  }
}

// text
.feature__text {
  margin-bottom: var(--space-md);

  .text-component {
    h1, h2, h3, h4 {
      margin-top: 0;
    }
  }

  @include breakpoint(md) {
    @supports (display: grid) {
      margin-bottom: 0;
      display: flex;
      align-items: center;
    }
  }
}

.feature__text-inner {
  width: 100%;
}

.feature__label {
  display: inline-block;
  color: var(--color-contrast-medium);
}

// media
.feature__media {
  display: flex;
  align-items: center;

  figure {
    width: 100%;
  }

  video, img, svg {
    display: block;
  }
  
  video, img {
    width: 100%;
    height: auto;
  }

  @supports (display: grid) {
    svg {
      width: 100%;
      height: auto;
    }
  }
}

// iframe
.feature__iframe-wrapper {
  position: relative;
	padding-bottom: 56.25%; // 16:9
  height: 0;
  width: 100%;

  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

// --text-center
.feature--text-center {
  .feature__text {
    text-align: center;
    padding: 0 5%;
  }

  .feature__cta {
    justify-content: center;
  }
}