/**
* grid one block's all layouts css.
* frontend and backend
*/

@mixin large-image-css {
    height: 600px;
    width: 100%;
    object-fit: cover;
}

@mixin medium-image-css {
    height: 300px;
    width: 100%;
    object-fit: cover;
}

@mixin small-image-css {
    height: 200px;
    width: 100%;
    object-fit: cover;
}

@mixin extra-small-image-css {
    height: 150px;
    width: 100%;
    object-fit: cover;
}

.sp-smart-post-wrapper {
    .sp-smart-post-dynamic-grid-contents:not(.grid-one-layout-five) {
        display: grid;
    }

    .grid-one-layout-five {
        .sp-smart-post-dynamic-grid-contents {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: auto;

            div:nth-child(4n + 1) {
                grid-column: span 2;
            }

            div:nth-child(4n + 2) {
                grid-column: span 1;
            }

            div:nth-child(4n + 3) {
                grid-column: span 1;
            }

            div:nth-child(4n + 4) {
                grid-column: span 2;
            }

            div {
                div a img {
                    @include medium-image-css;
                }
            }
        }
    }

    .grid-one-layout-three {
        .sp-smart-post-static-grid-contents {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            // height: 600px;

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

            div:nth-child(2) {
                grid-column: 4/7;
            }

            div {
                grid-column: span 2;

                img {
                    @include medium-image-css;
                }
            }
        }
    }

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

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

            div {
                img {
                    @include medium-image-css;
                }
            }
        }
    }

    // .grid-one-layout-six .sp-smart-post-large-item-part-two .sp-smart-post-title,
    // .grid-one-layout-seven .sp-smart-post-large-item-part-two .sp-smart-post-title,
    // .grid-one-layout-eight .sp-smart-post-large-item-part-two .sp-smart-post-title,
    // .grid-one-layout-nine .sp-smart-post-large-item-part-two .sp-smart-post-title,
    // .grid-one-layout-six-updated .sp-smart-post-large-item-part-two .sp-smart-post-title {
    //     font-size: 18px !important;
    // }
    .grid-one-layout-six .sp-smart-post-dynamic-grid-contents .sp-smart-post-title,
    .grid-one-layout-seven .sp-smart-post-dynamic-grid-contents .sp-smart-post-title,
    .grid-one-layout-eight .sp-smart-post-dynamic-grid-contents .sp-smart-post-title,
    .grid-one-layout-nine .sp-smart-post-dynamic-grid-contents .sp-smart-post-title,
    .grid-one-layout-six-updated .sp-smart-post-dynamic-grid-contents .sp-smart-post-title {
        font-size: 22px !important;
        line-height: 26px !important;
    }

    .grid-one-container .sp-smart-post-static-grid-contents {
        .sp-smart-post-large-item-part-one {
            .sp-smart-post-card-image {
                height: fit-content !important;
            }
        }
    }

    .grid-one-container .sp-smart-post-static-grid-contents {
        .sp-smart-post-large-item-part-two {
            .sp-smart-post-card-image {
                height: fit-content !important;
            }
        }
    }

    .grid-one-layout-six {
        .sp-smart-post-large-item-part-one {
            width: 66%;
            flex-shrink: 0;
            align-self: start;

            img {
                height: 386px;
            }
        }

        .sp-smart-post-large-item-part-two {
            display: flex;
            flex-direction: column;
            gap: 20px;
            flex-grow: 1;

            .sp-smart-post-card-image img {
                height: 206px;
            }
        }

        &.right {
            .sp-smart-post-static-grid-contents {
                flex-direction: row-reverse;
            }
        }
    }

    .grid-one-layout-six-updated {
        .sp-smart-post-static-grid-contents {
            .sp-smart-post-large-item-part-one {
                width: 60%;

                img {
                    height: 460px;
                }
            }

            .sp-smart-post-large-item-part-two {
                width: 40%;
                display: flex;
                flex-direction: column;
                gap: 20px;

                .sp-smart-post-card-image {
                    width: 45%;
                    max-height: 157px !important;
                    flex-shrink: 0;
                }

                .sp-smart-post-card {
                    display: flex;
                    flex-direction: row;
                    gap: 20px;
                }
            }
        }

        &.right {
            .sp-smart-post-static-grid-contents {
                flex-direction: row-reverse;
            }
        }

    }

    .grid-one-layout-seven {
        .sp-smart-post-static-grid-contents {
            align-items: start;
        }

        .sp-smart-post-large-item-part-one {
            width: 50%;
            flex-shrink: 0;

            img {
                height: 360px;
            }
        }

        .sp-smart-post-large-item-part-two {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            align-items: flex-start;
            gap: 20px;
            width: 50%;

            img {
                height: 209px;
            }
        }

        &.right {
            .sp-smart-post-static-grid-contents {
                flex-direction: row-reverse;
            }
        }

    }

    .grid-one-layout-eight {
        .sp-smart-post-static-grid-contents {
            .sp-smart-post-large-item-part-one {
                width: 50%;

                .sp-smart-post-card-image img {
                    height: 360px;
                }
            }

            .sp-smart-post-large-item-part-two {
                display: grid;
                width: 50%;
                flex-shrink: 0;
                align-self: flex-start;
                gap: 20px;

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

                    .sp-smart-post-card-image img {
                        height: 232px;
                    }
                }

                div:not(:nth-child(1)) {
                    .sp-smart-post-card-image img {
                        height: 209px;
                    }
                }
            }
        }

        &.right {
            .sp-smart-post-static-grid-contents {
                flex-direction: row-reverse;
            }
        }

    }

    .grid-one-layout-nine {
        .sp-smart-post-static-grid-contents {
            .sp-smart-post-large-item-part-one {
                width: 50%;

                .sp-smart-post-card-image img {
                    height: 360px;
                }
            }

            .sp-smart-post-large-item-part-two {
                display: grid;
                width: 50%;
                flex-shrink: 0;
                align-self: flex-start;
                grid-template-columns: repeat(2, 1fr);
                gap: 20px;

                .sp-smart-post-card-image a {
                    height: 100%;
                }
                div:nth-child(3) {
                    grid-column: 1/3;
                    grid-row: 2/3;

                    .sp-smart-post-card-image {
                        height: 232px !important;
                    }
                }

                div:not(:nth-child(3)) {
                    .sp-smart-post-card-image img {
                        height: 209px;
                    }
                }
            }
        }

        &.right {
            .sp-smart-post-static-grid-contents {
                flex-direction: row-reverse;
            }
        }

    }

    .sp-smart-post-static-grid-contents {
        display: flex;
        overflow: hidden;
    }
}

.sp-smart-post-grid-one.sp-smart-post-wrapper .grid-one-layout-six-updated .sp-smart-post-large-item-part-two .sp-smart-post-template-one-content {
    margin-top: 0;
    justify-content: left;
    flex-grow: 1;
}


@media screen and (max-width: 768px) {
    .sp-smart-post-static-grid-contents {
        flex-direction: column !important;
    }
    .sp-smart-post-large-item-part-one {
        width: 100% !important;

        .sp-smart-post-read-more-button,
        .sp-smart-post-excerpt-wrapper,
        .sp-smart-post-category {
            display: none;
        }
    }
    .sp-smart-post-large-item-part-two {
        width: 100% !important;
        grid-template-columns: repeat(1, 1fr) !important;

        .sp-smart-post-card {
            flex-direction: column !important;           
        }
        .sp-smart-post-card-image {
            width: 100% !important;
        }
    }
    .sp-smart-post-wrapper .grid-one-layout-five .sp-smart-post-dynamic-grid-contents {
        display: flex;
        flex-direction: column;
    }
    .sp-smart-post-wrapper .grid-one-layout-eight .sp-smart-post-static-grid-contents .sp-smart-post-large-item-part-two div:nth-child(1),
     .sp-smart-post-wrapper .grid-one-layout-nine .sp-smart-post-static-grid-contents .sp-smart-post-large-item-part-two div:nth-child(3) {
        grid-column: auto !important;
        grid-row: auto !important;
    }
}

// @media screen and (max-width: 600px) {
//     .sp-smart-post-wrapper.sp-smart-post-post-grid-one .grid-one-layout-six-updated .sp-smart-post-static-grid-contents {
//         display: block;
//     }
//     .sp-smart-post-wrapper.sp-smart-post-post-grid-one .grid-one-layout-six-updated .sp-smart-post-static-grid-contents .sp-smart-post-large-item-part-two,
//     .sp-smart-post-wrapper.sp-smart-post-post-grid-one .grid-one-layout-six-updated .sp-smart-post-static-grid-contents .sp-smart-post-large-item-part-one {
//         width: 100%;
//     }
//     .sp-smart-post-wrapper.sp-smart-post-post-grid-one .grid-one-layout-six-updated .sp-smart-post-static-grid-contents .sp-smart-post-large-item-part-two .sp-smart-post-card .sp-smart-post-card-image {
//         width: 100%;
//     }
//     .sp-smart-post-wrapper.sp-smart-post-post-grid-one .grid-one-layout-six-updated .sp-smart-post-static-grid-contents .sp-smart-post-large-item-part-two .sp-smart-post-card {
//         flex-direction: column;
//     }
//     .sp-smart-post-wrapper.sp-smart-post-post-grid-one .grid-one-layout-six-updated .sp-smart-post-static-grid-contents .sp-smart-post-large-item-part-one .sp-smart-post-read-more-button,
//     .sp-smart-post-wrapper.sp-smart-post-post-grid-one .grid-one-layout-six-updated .sp-smart-post-static-grid-contents .sp-smart-post-large-item-part-one .sp-smart-post-excerpt-wrapper {
//         display: none;
//     }
// }



// .grid-one-layout-six-updated .sp-smart-post-large-item-part-two .sp-smart-post-card-content {
//     background: #ffffff !important;
// }

// .grid-one-layout-six-updated .sp-smart-post-dynamic-grid-contents .sp-smart-post-card-content {
//     background: #ffffff !important;
//     padding: 0px 15px 15px 0px !important;
// }

// .grid-one-layout-six-updated .sp-smart-post-dynamic-grid-contents .sp-smart-post-template-one-content {

//     margin-top: 0px !important;
//     justify-content: left !important;
//     padding: 0px 15px 15px 0px !important;
// }