.cards {
  display: flex;
  flex-direction: row;
  position: relative;
  overflow: hidden;
  border-radius: $radius 0 0 $radius;
  min-height: 700px;
  @include gradient($landing-artwork-gradient);

  a {
    text-decoration: none;
    color: inherit;
  }

  #landing-hive {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    path, ellipse {
      fill: $landing-artwork-color;
    }
  }

  .main {
    width: 66%;
    padding: 5rem 2vw 5rem 4.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

      text-align: center;
      z-index: 1;
  }

  .group {
    display: flex;
    flex-wrap: wrap;
    width: 34%;
    justify-content: flex-end;
  }

  .card {

    &.sm {
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: left;
      width: 90%;
      position: relative;
      margin-bottom: 1px;
      // padding: 2rem 3.5vw 2rem 3vw;
      padding: 0 3.5vw 0 3vw; // added
      min-height: 140px;
      background: $landing-sm-bg;
      transition: background-color .4s, width .2s;

      &:last-child{ margin-bottom: 0; }

      &:hover {
        background: $landing-sm-bg-hover;
        width: 100%;
        h3 {
          font-weight: $medium;
          font-size: 1.2rem;
        }
        p {
          opacity: 1;
          // transition-delay: 100ms;
          max-height: 3.75rem; // added
        }
      }

      h3 {
        font-size: 1.1rem;
        transition: all .2s;
        margin: 0; // added
      }
      p {
        // position: absolute;
        margin: .5rem 0 0; // added
        max-height: 0; // added
        width: 80%;
        color: $g20-white;
        font-size: .95rem;
        line-height: 1.25rem;
        opacity: 0;
        transition: opacity .2s .1s, max-height .2s;
      }
    }

    h1,h2,h3,h4 {
      font-weight: 300;
      color: $g20-white;
    }

    h1 {
      margin: 0 0 1.25rem;
      font-size: 2.5rem;
      z-index: 1;
    }

    &#get-started {
      .avoid-wrap { display:inline-block }

      .btn {
        position: relative;
        display: block;
        padding: 1.25rem 4rem;
        color: $landing-btn-text;
        font-size: 1.2rem;
        font-weight: $medium;
        @include gradient($landing-btn-grad);
        transition: background-color .2s, color .2s;
        border-radius: $radius;
        z-index: 1;

        &:before {
          content: "";
          position: absolute;
          display: block;
          top: 0;
          right: 0;
          width: 100%;
          height: 100%;
          border-radius: $radius;
          @include gradient($landing-btn-grad-hover);
          opacity: 0;
          transition: opacity .2s;
          z-index: -1;
        }

        &:hover {
          &:before { opacity: 1; }
        }
      }

      .beta:after {
        content: 'beta';
        display: inline-block;
        vertical-align: middle;
        font-style: italic;
        font-size: .45em;
        margin: -8px 0 0 .5em;
        padding: .1rem .6rem .12rem;
        border-radius: 1rem;
        border: .15rem solid rgba($landing-btn-text, .5);
        transition: border-color .2s;
      }
    }
  }
}

////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA QUERIES ////////////////////////////////
////////////////////////////////////////////////////////////////////////////////


@include media(large) {
  .cards {
    .card {
      &.full { padding: 3.5rem;}
      &.quarter { width: 48%; }
    }
  }
}

@media (max-width: 1150px) {
  .cards {
    flex-direction: column;
    .main { width: 100%; }
    .group {
      width: 100%;
      .card.sm {
        margin-right: 1px;
        padding: 2rem;
        flex-grow: 2;
        width: 49%;
        text-align: center;
        h3 {
          margin: 0 0 .5rem;
          font-size: 1.1rem;
          font-weight: $medium;
        }
        p {
          opacity: .6;
          position: relative;
          max-height: fit-content;
          width: auto;
          margin: 0;
        }
        &:hover {
          background: $landing-sm-bg-hover;
          h3 { transform: none; }
          p { opacity: 1; max-height: fit-content; }
        }
      }
    }
  }
}

@include media(small) {
  .cards {
    .group {
      flex-direction: column;
      .card.sm {
        width: 100%;
        max-width: 100%;
        padding: 1.25rem;
      }
    }
    .card{
      h1 { font-size: 2rem; }
      &.main {
        padding: 2.5rem;
        &#get-started .btn {
          font-size: 1rem;
          margin: 0 0 .35rem;
        }
      }
    }
  }
}