.post-card {
  cursor: pointer;
  height: (20rem * 1.6);
  position: relative;
  overflow: hidden;
  border: 2px solid $gray100;
  margin-bottom: 3rem;
  > img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
    &.default {
      object-fit: contain;
      padding: 0 (2rem * 1.6);
    }
  }
  .post-card-content {
    position: absolute;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    background: $col-bg;
    padding: (1rem * 1.6);
    bottom: 3.5rem;
    left: 3rem;
    width: calc(100% - 6rem);
    transition: transform 0.3s ease;
    text-decoration: none;
    color: unset;
    .content {
      .info {
        color: $col-sec;
        font-weight: 500;
        margin-bottom: 0.8rem;
        & > *:not(:last-child)::after {
          content: "/";
        }
      }
      .title {
        font-size: $fs-h4;
        text-transform: none;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        &::after {
          content: "";
          display: inline-block;
          width: (2.5rem * 1.6);
        }
      }
    }
    .icon {
      @include circle((2.5rem * 1.6));
      position: absolute;
      flex-shrink: 0;
      right: 2rem;
      bottom: 1.5rem;
      padding: (0.6rem * 1.6);
      color: #fff;
    }
  }
  &:hover {
    > img {
      transform: scale(1.05);
    }
    .post-card-content {
      transform: translateY((-0.5rem * 1.6));
    }
  }
}

@include bp("md") {
  .blog-post-card-col {
    margin-bottom: $grid-gap;
  }
}
