@use "@/src/assets/scss/variables" as *;
@use "@/src/assets/scss/partial" as *;

.PostItem {
  .PostContent{
    .ReadTime {
      display: inline-flex;
      padding: 8px 16px 8px 28px;
      line-height: 14px;
      min-width: 122px;
      min-height: 30px;
      font-size: 14px;
    }
    .PostImg {
      background-color: $whiteColor;
      --r: 20px; /* the radius */
      --s: 25px; /* size of inner curve */
      --x: 86px; /* horizontal offset (no percentage) */
      --y: -5px; /* vertical offset (no percentage) */
      width: 100%;
      height: 245px;
      background-color: $whiteColor;
      border-radius: var(--r);
      --_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%);
      --_g:conic-gradient(at var(--r) var(--r),#000 75%,#0000 0);
      --_d:(var(--s) + var(--r));
      mask:
        calc(var(--_d) + var(--x)) 0 var(--_m),
        0 calc(var(--_d) + var(--y)) var(--_m),
        radial-gradient(var(--s) at 0 0,#0000 99%,#000 calc(100% + 1px)) 
        calc(var(--r) + var(--x)) calc(var(--r) + var(--y)),
        var(--_g) calc(var(--_d) + var(--x)) 0,
        var(--_g) 0 calc(var(--_d) + var(--y));
      mask-repeat: no-repeat;
    }
    h5{
      transition: all 0.3s;
    }
  }
}