.sp-smart-show-pro.grid-four-container {

    &.grid-four-layout-one,
    &.grid-four-layout-two,
    &.grid-four-layout-three,
    &.grid-four-layout-four,
    &.grid-four-layout-five {
        .sp-smart-post-grid-four-static-contents {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    &.grid-four-layout-one {
        .sp-smart-post-grid-four-static-contents {
            div:nth-child(2) {
                grid-column: 2/4;
                grid-row: 1/3;
            }
        }
    }

    &.grid-four-layout-two {
        .sp-smart-post-grid-four-static-contents {
            div:nth-child(1) {
                grid-column: 1/3;
                grid-row: 1/3;
            }
        }
    }

    &.grid-four-layout-three {
        .sp-smart-post-grid-four-static-contents {
            div:nth-child(3) {
                grid-column: 3/5;
                grid-row: 1/3;
            }
        }
    }

    &.grid-four-layout-four {
        .sp-smart-post-grid-four-static-contents {
            div:nth-child(1) {
                grid-column: 1/3;
                grid-row: 1/3;
            }

            div:nth-child(2) {
                grid-column: 3/5;
            }
        }
    }

    &.grid-four-layout-five {
        .sp-smart-post-grid-four-static-contents {
            div:nth-child(1) {
                grid-column: 1/3;
                grid-row: 1/3;
            }

            div:nth-child(4) {
                grid-column: 3/5;
            }
        }
    }

    &.grid-four-layout-six {
        .sp-smart-post-grid-four-static-contents {
            grid-template-columns: repeat(3, 1fr);

            div:nth-child(1) {
                grid-column: 1/3;
                grid-row: 1/3;
            }
        }
    }

    .sp-smart-post-grid-four-static-contents {
        display: grid;
        min-height: 500px;
    }
}

@media screen and (max-width: 768px) {
    .grid-four-container .sp-smart-post-grid-four-static-contents {
        height: auto !important;
    }

    .grid-four-container .sp-smart-post-grid-four-static-contents div:nth-child(1),
    .grid-four-container .sp-smart-post-grid-four-static-contents div:nth-child(3),
    .grid-four-container .sp-smart-post-grid-four-static-contents div:nth-child(4),
    .grid-four-container .sp-smart-post-grid-four-static-contents div:nth-child(2) {
        grid-column: auto !important;
        grid-row: auto !important;
    }
}




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

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

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



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

.sp-smart-post-grid-four .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-four .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-four .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(1)::after {
    transition-delay: 0s;
}

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

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

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

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

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



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


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