.sf-single.post {

    display: grid;

    grid-template-columns: 1.5fr 1.25fr 1fr;

    grid-auto-rows: min-content;

    gap: 1em;





    .sf-media {

        height: 83.5vh;

        display: grid;

        position: sticky;

        top: 105px;

        margin: 0 !important;

    }



    section:not(.sf-media) {

        background: #fff;

        border-radius: 15px;

        box-shadow: 0px 0px 5px 1px #e1e1e1;

        margin: 0 !important;

    }



    .sf-content {

        height: fit-content;

        position: sticky;

        top: 45px;

        display: grid;

        grid-template-areas:

        "header"

        "data";

        grid-template-columns: repeat(1, 1fr);

        grid-template-rows: repeat(2, auto) 1fr;

        padding: 1em 2em 2em !important;



        header {

            grid-area: header;

            height: min-content;

            padding: 0 0 0.25em !important;

            border-bottom: 1.5px solid #dad9e1;



            h1 {

                color: #3f3c5a;

                font-size: 24px;

                clear: none;

                font-weight: 600;

                line-height: 1.4;

            }

        }



        .entry-content {

            grid-area: data;

            height: min-content;



            > p {

                margin: 0;

            }

        }

    }



    .sf-comments {

        max-height: 80vh !important;

        height: min-content !important;

        position: sticky !important;

        top: 105px !important;

        display: grid !important;

        grid-template-areas:

            "header"

            "data" !important;

        grid-template-columns: 1fr !important;

        grid-template-rows: min-content 1fr min-content !important;

        margin-bottom: 0;

        padding: 1em;

        

        .sf-comments-title {

            margin: 0;

            font-size: 20px;

            color: #3f3c5a;

            clear: none;

            font-weight: 600;

            padding: 0;

            border-bottom: 1.5px solid #dad9e1;

        }



        .sf-comment-list {

            list-style-type: none;

            margin: 0;

            padding: 0.75em 0.5em 0.75em 0;

            display: grid;

            gap: 1em;

            overflow-y: scroll;

            scrollbar-width: thin;

            scrollbar-color: #ebeaf2 transparent;

            scrollbar-gutter: stable;



            > li {

                display: grid;

                gap: 0.75em;



                > .sf-comment-body {

                    display: grid;

                    grid-template-columns: min-content 1fr;

                    row-gap: 0.25em;

                    column-gap: 0.75em;

                    background: #ebeaf2c2;

                    padding: 1em;

                    border-radius: 10px;



                    .sf-comment-content p {

                        display: flex;

                        flex-direction: row;

                        flex-wrap: wrap;

                        margin: 0;

                    }

                }



                > .children {

                    position: relative;

                    list-style-type: none;

                }



                > .children:before {

                    content: '';

                    width: 4px;

                    height: 100%;

                    background-color: #ebeaf2;

                    border-radius: 2px;

                    position: absolute;

                    left: 2em;

                }

            }



            .depth-2 {



                .sf-comment-body {

                    display: grid;

                    grid-template-columns: min-content 1fr;

                    row-gap: 0.25em;

                    column-gap: 0.75em;

                    background: #ebeaf2c2;

                    padding: 1em;

                    border-radius: 10px;



                    .sf-comment-content p {

                        margin: 0.5em 0;

                    }

                }



                .children {

                    list-style-type: none;

                    display: grid;

                    margin-top: 1em;

                    padding: 0;

                }

            }



            .sf-comment-avatar img {

                border-radius: 50%;

            }



            .sf-comment-contain {

                display: grid;

                column-gap: 0.75em;

                row-gap: 0.25em;

                align-items: center;

                flex-direction: row;

                flex-wrap: wrap;

                grid-template-columns: max-content 1fr min-content;

                grid-auto-rows: min-content;

                grid-template-areas:

                    'name time edit'

                    'text text text';



                .comment-edit-link {

                    grid-area: edit;

                }



                .sf-comment-date {

                    grid-area: time;

                }



                .sf-comment-content {

                    grid-area: text;

                }



                .sf-comment-author {

                    grid-area: name;



                    a {

                        color: #25242e;

                        font-weight: 600;

                        font-family: 'Poppins';

                        font-size: 13px;

                        font-style: normal;

                    }

                }

            }

        }



        #respond {

            padding: 1em 0 0;

            border-top: 1.5px solid #dfdfdf;



            h3 {

                display: none;

            }



            .sf-comment-form {

                display: grid;

                grid-template-columns: 1fr 0.1fr;

                grid-template-rows: 1fr;

                gap: 0.5em;

                margin: 0;



                .logged-in-as, .adding-photo-cont, label, #com-pho-up {

                    display: none;

                }



                .comment-form-comment {

                    margin: 0;

                    width: 100%;



                    #comment {

                        width: 100%;

                        height: 36px;

                        border: 0px solid #dfdfdf;

                        border-radius: 10px;

                        resize: none;

                        background: #ebeaf2;

                    }



                    label {

                        display: none;

                    }

                }



                .form-submit {

                    position: relative;

                    height: 36px;

                    width: 36px;

                    background: #3f3c5a;

                    border-radius: 8px;

                    margin: 0;



                    #submit {

                        background: transparent;

                        background-image: url(https://starkframe.store/wp-content/themes/starkframe/assets/images/stark-frame/send-g.svg);

                        background-position: center;

                        background-repeat: no-repeat;

                        background-size: 28px;

                        box-sizing: border-box;

                        height: 30px;

                        width: 30px;

                        position: absolute;

                        top: 3px;

                        left: 3px;

                        outline: none;

                        border: 0;

                    }

                }

            }

        }

    }

}