.card.activity-card {
  overflow: hidden;
  background-color: $col-sec;
  .col-6 {
    padding: 0;
  }
  .card-thumb {
    img {
      min-height: 70vh;
      width: 100%;
      object-fit: cover;
      aspect-ratio: 4/3;
      transform: scale(1.5);
      transform-origin: right center;
      @include bp("xxl-up") {
        transform: scale(1.5);
      }
      @include bp("xxl") {
        transform: scale(1.3);
      }
      @include bp("xl") {
        transform: scale(1.3);
      }
      @include bp("lg") {
        transform: scale(1.3);
        transform-origin: right top;
      }
      @include bp("md") {
        transform: scale(1);
        transform-origin: center;
        min-height: 50vh;
      }
    }
  }
  .card-content {
    padding: $space-md $space-md;
    @include bp("md") {
      padding: $space-sm;
    }
    .meta {
      color: #f7f9f3;
      font-size: 1.4rem;
      margin-bottom: 0.5rem;
    }
    .title-wrap {
      margin-bottom: $space-xs;
      h2 {
        color: $white;
      }
    }
    p {
      color: $white;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin-bottom: $space-xxs;
    }
    .interesting {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: 1fr;
      grid-column-gap: 16px;
      grid-row-gap: 16px;
      @include bp("lg") {
        grid-template-columns: repeat(1, 1fr);
      }
      span {
        color: $white;
        padding-left: 28px;
        position: relative;
        &:before {
          content: "";
          width: 12px;
          height: 12px;
          position: absolute;
          left: 0;
          top: 6px;
          background-color: $col-prm;
          border-radius: 100%;
        }
      }
    }
    .button {
      margin-top: $space-sm;
      @include bp("sm") {
        width: 100%;
        text-align: center;
      }
    }
  }
}
[post-container] {
  .card:nth-child(even) {
    background-color: $col-bg;
    .row {
      flex-direction: row-reverse;
    }
    .card-thumb {
      img {
        transform-origin: left center;
        @include bp("lg") {
          transform-origin: left top;
        }
        @include bp("md") {
          transform-origin: center;
        }
      }
    }
    .card-content {
      .title-wrap h2 {
        color: $col-sec;
      }
      .meta,
      p {
        color: $gray700;
      }
      .interesting {
        span {
          color: $gray700;
        }
      }
    }
  }
}
