@import url("https://fonts.googleapis.com/css2?family=Dancing+Script&family=Kalam:wght@300;400&display=swap");

body {
  background: #000;
  color: #fff;
}
.post-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 5rem 0;
  .post {
    width: 22rem;
    margin: 1rem;
    @media (max-width: 767px) {
      width: 100%;
    }
    .title {
      font-family: "Dancing Script", cursive;
      font-size: 2rem;
      color: #ff232e;
      margin-top: 0.5rem;
    }
    .text {
      font-family: "Kalam", cursive;
      font-size: 1rem;
    }
  }
}
.thumb-item {
  img {
    width: 100%;
    height: auto;
  }
}
.hover-daddy {
  position: relative;
  &:after {
    content: "";
    display: table;
    clear: both;
  }
  img {
    position: relative;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-position: center;
    object-position: center;
    -o-object-fit: cover;
    object-fit: cover;
    &:first-child {
      display: block;
    }
  }
}

.tmb-wrap {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;

  .tmb-wrap-table {
    display: table;
    height: calc(100% - 0.625rem);
    width: 100%;

    div,
    a {
      display: table-cell;
      position: relative;
      transition: all 0.3s ease;
      -webkit-transition: all 0.25s ease;
      -o-transition: all 0.25s ease;
      transition: all 0.25s ease;
      &:after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 0.15rem;
        right: 0.15rem;
        border-bottom: 0.25rem solid #fff;
      }
      &.active,
      &.active {
        &:after {
          border-color: #ff232e;
        }
      }
      &:first-child:last-child,
      &:first-child:last-child {
        &:after {
          border-color: transparent;
        }
      }
    }
  }
}
