.bestware-master-container{
    .blocks{ display:flex;flex-direction:column;gap:20px;}

    .spacer{display:block;width:100%;padding:20px 0 0 0;}

    .media-with-overlay{position:relative;border-radius:8px;overflow:hidden;display:flex;flex-direction:column;
        .desktop-image, .mobile-image, .desktop-video, .mobile-video{width:100%;background: center / cover no-repeat; }
        .mobile-image, .mobile-video{display:none;}
        video{overflow-clip-margin: unset; overflow: hidden;object-fit: cover;width: 100%;height:100%;}
        .overlay-wrapper{position:absolute;inset:0;display:flex;background-color:transparent;
        &:before{position:absolute;inset:0;content:" ";background-color:var(--oc);opacity:var(--o);}
        .text-content{text-align:center;padding:70px;margin:auto;z-index:1;max-width: var(--content-width);
            &.top{margin-top:0;}&.bottom{margin-bottom:0;}
            &.left{margin-left:0;text-align:left;}&.right{margin-right:0;text-align:right;}
            .heading{font-family:Gilroy-Semibold;font-size:36px;line-height:1.1;color:white;margin-bottom:15px;}
            .sub-heading{font-family:Gilroy-Medium;font-size:16px;line-height:1.1;color:white;margin-bottom:25px;}
            .text{font-family:Gilroy-Medium;font-size:16px;line-height:1.1;color:white;margin: 0 auto;}
        }
        }
    }
    @media screen and (max-width:768px){
        .media-with-overlay{position:relative;
            &:has(.text_first){flex-direction:column-reverse;}
            .mobile-image, .mobile-video{display:block;}
            .desktop-image, .desktop-video{display:none;}
            .overlay-wrapper{
            &.text_first, &.media_first{position:relative}
            .text-content{padding:25px;background: var(--mobile-background);
                &.mobile-gap{padding-top:20px;padding-bottom:20px;}
                .heading{font-size:30px;margin-bottom:10px;}
                .sub-heading{margin-bottom:20px;}
                .text{}
            }
            }
        }
    }

			

    .text-media-row{display:grid;gap:20px;grid-template-columns: 1fr 1fr;grid-template-areas:"text-content media-content";color:black;
        &.reverse{grid-template-areas:"media-content text-content";}
        .col{border-radius:10px;overflow:hidden;height:100%;}
        .text-content{display:flex;flex-direction:column;justify-content: center;background-color:white;padding:70px;
        .title{font-family: Gilroy-Medium;font-size:20px;margin:0 0 0 0;line-height: 1.2;color:#000;background-clip: text!important;-webkit-text-fill-color: transparent!important;}
        .subtitle{font-family: Gilroy-Semibold;font-size:36px;margin:5px 0 10px 0;line-height: 1.2;color:#000;background-clip: text!important;-webkit-text-fill-color: transparent!important;}
        .text{font-family: Gilroy-Medium;font-size:16px;margin:5px 0 0 0;line-height: 1.2;
            p:last-child{margin-bottom:0!important;}
        }
        }
        .media-content{background-color:black;
        img{width:100%;height:100%;object-fit:cover;}
        .desktop-video,.mobile-video{height:100%}
        video{width:100%;height:100%;object-fit:cover;margin-bottom:-10px;}
        .image-mobile, .mobile-video{display:none}
        }
    }

    @media screen and (max-width:1200px){
        .text-media-row{
        .text-content{padding:40px;}
        }
    }

    @media screen and (max-width:800px){
        .text-media-row{grid-template-columns: 1fr!important;grid-template-areas:"text-content" "media-content"!important;gap:0;border-radius:10px;overflow:hidden;
        &.reverse-mobile{grid-template-areas:"media-content" "text-content"!important;}
        .col{border-radius:0;}
        .text-content{padding:25px;}
        .media-content{
            .image-desktop, .desktop-video{display:none}
            .image-mobile, .mobile-video{display:block}
        }
        }
    }

			  
			  

    .bestware-boxed-multi-layout{
        .wrapper{color:black;--box-padding:0;
            &.boxed{--box-padding:70px;background:var(--box-color);padding: var(--box-padding);border-radius:10px;overflow:hidden;color:white;}
            &.boxed .media-container.full-width{border-radius:0;}
            &:has(.media-first){padding-top:0!important;}
            .top-content{text-align:center;display:grid;grid-template-columns: 1fr;
                &:has(+.media-container *){margin-bottom:20px;}
                .heading{font-family: Regular;font-size:20px;margin:0 0 0 0;line-height: 1.2;color:#FFFFFF;background-clip: text!important;-webkit-text-fill-color: transparent!important;grid-area: heading;}
                .heading:has(+.sub-heading){margin-bottom:5px;} .heading+.text{margin-bottom:20px;}
                .sub-heading, .sub-heading2{font-family: Medium;font-size:36px;margin:0;line-height: 1.2;color:#FFFFFF;background-clip: text!important;-webkit-text-fill-color: transparent!important;grid-area: subheading;}
                .sub-heading:has(+.text), .sub-heading2:has(+.text){margin-bottom:20px;}
                .sub-heading2{margin:20px auto 0 auto;width:100%;grid-area: subheading2;
                    &.left{text-align:left}
                }
                .text{font-family: Regular;font-size:16px;width:100%;margin:0 auto;line-height: 1.2;grid-area: text;
                    &.left{text-align:left;}
                    p:last-child{margin-bottom:0!important;}
                }
                .media-container{width:100%;border-radius:8px;overflow: hidden;position:relative;grid-area: media;
                    &.with-gradient::after{position:absolute;inset:0;content:"";}
                    &.with-gradient.top::after{background-image:linear-gradient(to bottom, var(--box-color) 0%, transparent calc(0% + 100px));}
                    &.with-gradient.bottom::after{background-image:linear-gradient(to bottom, transparent calc(100% - 100px), var(--box-color) 100%);}
                    &.with-gradient.vertical::after{background-image:linear-gradient(to bottom, var(--box-color) 0%, transparent calc(0% + 100px), transparent calc(100% - 100px), var(--box-color) 100%);}
                    &.with-gradient.horizontal::after{background-image:linear-gradient(to right, var(--box-color) 0%, transparent calc(0% + 100px), transparent calc(100% - 100px), var(--box-color) 100%);}
                    &.with-gradient.all-sides::after{background-image:linear-gradient(to bottom, var(--box-color) 0%, transparent calc(0% + 100px), transparent calc(100% - 100px), var(--box-color) 100%), linear-gradient(to right, var(--box-color) 0%, transparent calc(0% + 100px), transparent calc(100% - 100px), var(--box-color) 100%);}
                    &.full-width{width: calc(100% + 2 * var(--box-padding));transform:translatex(calc(0px - var(--box-padding)));}
                    .image-desktop, .image-mobile{width:100%;}
                    .desktop-video, .mobile-video{width:100%;
                        video{overflow-clip-margin: unset; overflow: hidden;object-fit: unset;width: 100%;height:auto;margin-bottom: -8px;}
                    }
                    .image-mobile, .mobile-video{display:none}
                }
                .usps{display: flex;align-items: center; justify-content: center;flex-wrap:wrap; gap:20px;margin-left:auto;margin-right:auto;height: fit-content;grid-area: usps;z-index:1;
                    .usp{display: flex;flex-direction:column;align-items: center;justify-content: center;width:200px;height:80px;outline-offset:-1px;
                        img{height:35px;;width:auto;}
                        .title{font-family: Medium;font-size:24px!important;text-align:center;margin:0;line-height: 1.2;white-space:normal;color:#FFFFFF;background-clip: text!important;-webkit-text-fill-color: transparent!important;}
                    }
                }
                @media screen and (max-width: 1080px){
                    .usps{margin-top:0!important;
                        .usp{text-align:center;
                            img{}
                            img+.title{text-align:left;}
                            .title{white-space:normal;}
                        }
                    }
                }
                @media screen and (max-width: 500px){
                    .usps{gap:10px;
                        .usp{width:200px;max-width:calc(50% - 5px);
                            .title{font-size: 20px!important;}
                        }
                    }
                }
            }
            .grid{display:grid;grid-template-columns:1fr 1fr;grid-column-gap:20px;margin-top:20px;grid-template-areas: "media1 media2" "content1 content2"; 
                .col{border-radius:8px 8px 0 0;overflow:hidden;display:flex;flex-direction:column;border: 1px solid var(--column-border-color);border-bottom-width: 0;
                    .image{width:100%;margin:auto 0;}
                    video{overflow-clip-margin: unset; overflow: hidden;object-fit: unset;width: 100%;height:auto;margin-bottom: -8px;}
                }
                .text-content{padding: 45px;background:#272727;border-radius:8px;overflow:hidden;margin-top:auto;height:100%;border: 1px solid var(--column-border-color); border-bottom-width: 1px;border-top-width: 0;
                    &:nth-child(3), &:nth-child(4){border-radius: 0 0 8px 8px;}
                    .title{font-family: Regular;font-size:16px;;margin:0 0 10px 0;line-height: 1.2;color:#FFFFFF;background-clip: text!important;-webkit-text-fill-color: transparent!important;}
                    .subtitle{font-family: Medium;font-size:30px;margin:0 0 0 0;line-height: 1.2;}
                    .text{font-family:Regular;margin: 20px 0 0 0;
                        p:last-child{margin-bottom:0!important}
                    }
                }
                &:not(:has(.text-content)) .col, &:not(:has(.media)) .col{border: 1px solid var(--column-border-color)!important; border-radius: 8px!important}
            }
        }
    }

    @media screen and (max-width:768px){
        .bestware-boxed-multi-layout{
            .wrapper{--box-padding:0;
                &.boxed{--box-padding:25px; padding:var(--box-padding);padding-top:40px;}
                .top-content{ text-align: var(--mobile-content-alignment);
                    &.reverse{gap:20px;}
                    .media-container{
                        .image-desktop, .desktop-video{display:none;}
                        .image-mobile, .mobile-video{display:block;}
                        .text-wrapper{
                            .text{max-width:100%!important}
                        }
                    }
                }
                .grid{ grid-template-columns:1fr;grid-template-areas: "media1" "content1" "media2" "content2"; 
                    .img2{margin-top:20px;}
                    .text-content{padding: 25px;}
                }
            }
        }
    }
}