.card {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 0;
  padding: 2.4rem;
  border-radius: 5px;
  box-shadow: $shadow-middle;
  background-color: $white-2;

  @media only screen and (max-width: $bp-laptop-l){
    grid-template-columns: repeat(2, 30vw);
  }

  @media only screen and (max-width: $bp-laptop){
    grid-template-columns: repeat(2, 36vw);
  }

  &__heading {
    grid-column: 1 / -1;
    justify-self: center;
    @include home-sub-header-formatting;
    padding: 0 3.6rem 5px 3.6rem;
    border-bottom: 1px solid $navy-2;
  }

  &__sub-heading {
    grid-column: 1 / -1;
    font-weight: 200;
    font-size: $sub-header-font-size;
  }

  &__video {
    grid-column: 1 / -1;
    overflow: hidden;
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;

    &-content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 5px;
    }
  }

  // card__ classes used for positioning. Styling is done with btn--
  &__button,
  &__link {
    grid-row: 4 / 5;
    margin: 1rem;

    @media only screen and (max-width: $bp-tablet) {
      margin: 0;
    }
  }

  &__stack {
    grid-row: 5 / 6;
    grid-column: 1 / -1;
    padding: 1.6rem;
    @include hide-content;
  }
}