.card {
  cursor: pointer;
  background-color: $col-sec;
  border-radius: $border-radius;
  box-shadow: 0px 0px 0px 0px rgba(40, 48, 24, 0.1), 0px 9px 20px 0px rgba(40, 48, 24, 0.1), 0px 36px 36px 0px rgba(40, 48, 24, 0.09), 0px 80px 48px 0px rgba(40, 48, 24, 0.05),
    0px 142px 57px 0px rgba(40, 48, 24, 0.01), 0px 223px 62px 0px rgba(40, 48, 24, 0);
  transition: $trans;
  .card-thumb {
    position: relative;
    overflow: hidden;
    border-radius: $border-radius $border-radius 0 0;
    aspect-ratio: 4/3;
    background-color: $gray400;
    img {
      width: 100%;
      object-fit: cover;
      aspect-ratio: 4/3;
      border-radius: $border-radius $border-radius 0 0;
      transition: $trans-h;
    }
  }
  .card-content {
    padding: 1.6rem 2.4rem 3.2rem;
    .meta {
      display: flex;
      justify-content: space-between;
      color: #f7f9f3;
      font-size: 1.4rem;
      margin-bottom: 1rem;
    }
    h3 {
      color: $white;
      margin-bottom: 1rem;
    }
    p {
      color: $white;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }
  &:hover {
    transition: $trans-h;
    outline: 2.5px solid $col-prm;
    img {
      transform: scale(1.05);
      transition: $trans-h;
    }
  }
}
