@import "@/styles/variables";
@import "@/styles/mixins";

.cardContainer {
  position: relative;
  margin: -6.75rem auto;
  z-index: 2;

  @include p1;

  .cardArea {
    padding: 2rem 5rem;
    background-color: $white;
    @include card;
  }

  .card {
    .cardSection {
      margin-bottom: 1rem;
      color: rgba(#000, 0.6);

      .icon {
        vertical-align: middle;
        $size: 40px;
        width: $size;
        height: $size;
      }
    }

    .cardContent {
      @include h5;
      line-height: 1.75; // 31.5px
      @include multi-line-ellipsis;
    }
    .cardFooter {
      margin-top: 1rem;
      color: $blue;
      display: inline-flex;
      font-size: $font-normal;
      line-height: 1.75rem;
      i {
        margin-left: 0.25rem;
        transition: all 0.2s;
      }
      &:hover {
        i {
          transform: translateX(0.5rem);
        }
      }
    }
  }
}

@media screen and (max-width: $desktop) {
  .cardGap {
    padding: 0.75rem 1.5rem !important;
  }
}
@media screen and (max-width: $mobile) {
  .cardGap {
    padding: 1.5rem 1.5rem !important;
  }
  .cardArea {
    padding: 0 3rem !important;
  }
}