#about-home {
    background: #fff;
    padding: 64px;

    @media only screen and (max-width: 980px) {
        padding: 0px 32px 32px 32px;
    }

    .wrap {
        border: 1px solid #000;
        border-radius: 64px;
        padding: 64px;

        @media only screen and (max-width: 980px) {
            padding: 64px 32px 32px 32px;
        }

        .head {
            display: grid;
            grid-template-columns: 1fr .75fr;
            border-bottom: 1px solid #000;
            padding-bottom: 64px;
            margin-bottom: 64px;

            @media only screen and (max-width: 980px) {
                grid-template-columns: 1fr;
                gap: 32px;
                padding-bottom: 32px;
                margin-bottom: 32px;                
            }

            .heading {
                font-size: 56px;
                color: #000;

                @media only screen and (max-width: 980px) {
                    font-size: 32px;
                }
            }

            .right {
                display: grid;
                align-content: space-between;
                justify-content: end;    

                .sub {
                    color: #000;
                    font-size: 24px;
                    font-weight: 600;
                    display: inline-flex;
                    gap: 10px;
                    align-items: center;
                    margin-left: auto;
                    text-transform: uppercase;

                    &:before {
                        content: "";
                        display: block;
                        width: 16px;
                        height: 16px;
                        border-radius: 50%;
                        background: var(--primary);
                    }

                    @media only screen and (max-width: 980px) {
                        display: none;
                    }

                }

                .ornament {
                    height: 3em;
                    overflow: hidden;
                }           
            }
        }

        .body {
            display: grid;
            grid-template-columns: 2fr 1fr;

            @media only screen and (max-width: 980px) {
                grid-template-columns: 1fr;
                gap: 50px;
            }

            .text {
                display: grid;
                align-content: space-between; 
                width: 70%;
                display: grid;
                gap: 50px;

                @media only screen and (max-width: 980px) {
                    width: 100%;
                    grid-template-columns: 1fr;
                }                  
            }

            .image {
                position: relative;

                img {
                    aspect-ratio: 1 / 1;
                    object-fit: cover;
                    border-radius: 42px;                    
                    display: block;
                }    

                .frame {
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;

                    &:before {
                        content: "";
                        position: absolute;
                        left: 0;
                        right: 0;
                        top: 0;
                        bottom: 0; 
                        border: 2px dashed #fff;                                             
                    }

                    .corner {
                        --border-width: 16px;
                        --border-radius: 32px;
                        position: absolute;
                        width: 6em;
                        height: 6em;
                        border-color: var(--primary);
                        border-style: solid;
                        border-width: 0px;

                        &.top-left {
                            border-top-width: var(--border-width);
                            border-left-width: var(--border-width);
                            border-top-left-radius: var(--border-radius);

                            top: 0;
                            left: 0;                      
                        }


                        &.bottom-left {
                            border-bottom-width: var(--border-width);
                            border-left-width: var(--border-width);
                            border-bottom-left-radius: var(--border-radius);       

                            bottom: 0;                    
                            left: 0;
                        }

                        &.bottom-right {
                            border-bottom-width: var(--border-width);
                            border-right-width: var(--border-width);
                            border-bottom-right-radius: var(--border-radius);       

                            bottom: 0;                    
                            right: 0;
                        }                       

                    }
                }

                .overlay {
                    background: #fff;
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 0;
                    height: calc( 70% - var(--scroll) );
                    bottom: 0;
                    overflow: hidden;
                }
            }

            .desc {
                font-size: 24px;
                color: #000;
                line-height: 1.3;
            }
        }           
    }
}