.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;  }}