.sp-smart-show-pro {
  &.grid-five-container {
    .sp-smart-post-grid-five-dynamic-contents {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: 10px;
      grid-template-rows: auto;
      height: 600px;

      .sp-smart-post-template-one-content {
        height: 100%;
        position: relative;
      }

      .sp-smart-post-card:nth-child(1) {
        grid-area: post1;
      }

      .sp-smart-post-card:nth-child(2) {
        grid-area: post2;
      }

      .sp-smart-post-card:nth-child(3) {
        grid-area: post3;
      }

      .sp-smart-post-card:nth-child(4) {
        grid-area: post4;
      }

      &.grid-five-layout-one {
        grid-template-areas:
          "post1 post1 post2 post3"
          "post1 post1 post2 post3";
      }

      &.grid-five-layout-two {
        grid-template-areas:
          "post1 post2 post2 post3"
          "post1 post2 post2 post3";
      }

      &.grid-five-layout-three {
        grid-template-areas:
          "post1 post2 post3 post3"
          "post1 post2 post3 post3";
      }

      &.grid-five-layout-four {
        grid-template-areas:
          "post1 post1 post2 post3"
          "post1 post1 post2 post4";
      }

      &.grid-five-layout-five {
        grid-template-areas:
          "post1 post1 post2 post4"
          "post1 post1 post3 post4";
      }

      &.grid-five-layout-six {
        grid-template-areas:
          "post1 post3 post3 post4"
          "post2 post3 post3 post4";
      }

      &.grid-five-layout-seven {
        grid-template-areas:
          "post1 post3 post4 post4"
          "post2 post3 post4 post4";
      }

      &.grid-five-layout-eight {
        grid-template-areas:
          "post1 post2 post2 post3"
          "post1 post2 post2 post4";
      }

      &.grid-five-layout-nine {
        grid-template-areas:
          "post1 post2 post4 post4"
          "post1 post3 post4 post4";
      }
    }

    .sp-smart-post-grid-five-static-contents {
      display: grid;
    }
  }
}

@media screen and (max-width: 767px) {
  .sp-smart-post-grid-five-dynamic-contents {

    .sp-smart-post-card:nth-child(1),
    .sp-smart-post-card:nth-child(2),
    .sp-smart-post-card:nth-child(3),
    .sp-smart-post-card:nth-child(4) {
      grid-area: unset !important;
    }
  }
}

// // title animate effect..................................................
.sp-smart-post-grid-five .sp-smart-post-card .sp-smart-post-title {
  position: relative;
  display: inline-block;
}

.sp-smart-post-grid-five .sp-smart-post-card .sp-smart-post-title:after {
  content: "";
  position: absolute;
  transition: width 0.6s ease;
}

.sp-smart-post-grid-five .sp-smart-post-card .sp-smart-post-title::before {
  content: "";
  position: absolute;
  transition: width 0.6s ease;
}


.sp-smart-post-grid-five .sp-smart-post-card .sp-smart-post-title .line {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}

.sp-smart-post-grid-five .sp-smart-post-card .sp-smart-post-title .line::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  // height: 2px;
  // background: linear-gradient(90deg, #ff416c, #ff4b2b);
  // transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.4s ease;
  z-index: -1;
}

.sp-smart-post-grid-five .sp-smart-post-card .sp-smart-post-title:hover .line::after {
  transform: scaleX(1);
}

/* Using :nth-of-type to target only .line elements */
.sp-smart-post-grid-five .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(1)::after {
  transition-delay: 0s;
}

.sp-smart-post-grid-five .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(2)::after {
  transition-delay: 0.2s;
}

.sp-smart-post-grid-five .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(3)::after {
  transition-delay: 0.4s;
}

.sp-smart-post-grid-five .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(4)::after {
  transition-delay: 0.6s;
}

.sp-smart-post-grid-five .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(5)::after {
  transition-delay: 0.8s;
}

.sp-smart-post-grid-five .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(6)::after {
  transition-delay: 1s;
}


.sp-smart-post-grid-five .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(7)::after {
  transition-delay: 1.2s;
}
.sp-smart-post-grid-five .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(8)::after {
  transition-delay: 1.4s;
}