.hero-boxes-container{margin:0 auto 1.5%;padding:0;position:relative;z-index:20}.hero-boxes-title{position:absolute;line-height:1.1;z-index:10;left:.5px;bottom:5px;margin:0;text-align:left!important;font-weight:600;font-family:"Literata","Palatino Linotype","Palatino","Book Antiqua","Georgia",sans-serif;font-style:oblique;text-wrap:balance;padding:5% 8% 5% 5%;color:#fff!important;display:table;text-shadow:0 0 20px rgb(0 0 0 / .8);font-size:clamp(18px,-0.875em + 4vw,1.3em)}@media(min-width:1024px){.hero-boxes-title{line-height:1.1}}.hero-boxes a{transition:all .3s linear}.hero-boxes a:hover,.hero-boxes a:hover span{color:#fff}@media(min-width:700px){.hero-boxes-title{font-size:clamp(1em,-0.875em + 3vw,1.8em)}.hero-boxes.hero-col-5 li:nth-child(1) .hero-boxes-title{font-size:clamp(1em,-0.875em + 4vw,3em);line-height:1}}.hero-boxes-title em{font-style:normal;display:flex}.hero-boxes li a{display:block;position:absolute;inset:0}.hero-boxes{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;width:calc(100% + 5px);gap:5px}.hero-boxes li{position:relative;padding-top:30vw;position:relative;flex-basis:calc(50% - 5px);margin:0;overflow:clip}@media(max-width:1023px){.hero-boxes.hero-col-3 li,.hero-boxes.hero-col-6 li{flex-basis:calc(33.333% - 5px);padding-top:35vw}.hero-boxes.hero-col-5 li{flex-basis:calc(33.333% - 5px)}.hero-boxes.hero-col-5 li:nth-child(1),.hero-boxes.hero-col-5 li:nth-child(2){flex-basis:calc(50% - 5px)}}.hero-boxes figure{margin:0!important}@media(min-width:1024px){.hero-boxes{gap:15px;width:calc(100% + 15px)}.hero-boxes li{position:relative;padding-top:15vw;min-height:0;position:relative;margin:0}.hero-boxes.hero-col-4{gap:15px;width:calc(100% + 15px)}.hero-boxes.hero-col-4 li{flex-basis:calc(25% - 30px);padding-top:22vw}.hero-boxes.hero-col-5 li:nth-child(1){flex-basis:calc(40% - 15px);padding-top:30vw;margin-bottom:calc(-15vw - 15px)}.hero-boxes.hero-col-5 li:nth-child(2){flex-basis:calc(30% - 15px)}.hero-boxes.hero-col-5 li:nth-child(3){flex-basis:calc(30% - 15px)}.hero-boxes.hero-col-5 li:nth-child(4){flex-basis:calc(30% - 15px);margin-left:calc(40% - 15px + 15px)}.hero-boxes.hero-col-5 li:nth-child(5){flex-basis:calc(30% - 15px)}.hero-boxes.hero-col-6 li:nth-child(1){flex-basis:calc(35% - 15px);padding-top:30vw;margin-bottom:calc(-15vw - 15px)}.hero-boxes.hero-col-6 li:nth-child(2){flex-basis:calc(32.5% - 15px)}.hero-boxes.hero-col-6 li:nth-child(3){flex-basis:calc(32.5% - 15px)}.hero-boxes.hero-col-6 li:nth-child(4){flex-basis:calc(21.6666666667% - 15px);margin-left:calc(35% - 15px + 15px)}.hero-boxes.hero-col-6 li:nth-child(5){flex-basis:calc(21.6666666667% - 15px)}.hero-boxes.hero-col-6 li:nth-child(6){flex-basis:calc(21.6666666667% - 15px)}}@media(min-width:1900px){.hero-boxes li{padding-top:300px}.hero-boxes.hero-col-4 li{padding-top:400px}.hero-boxes.hero-col-5 li:nth-child(1),.hero-boxes.hero-col-6 li:nth-child(1){padding-top:600px;margin-bottom:-315px}}.hero-boxes .hero-box-gradient{display:block;position:absolute;z-index:2;top:20%;right:0;bottom:0;left:0;background:linear-gradient(to bottom,#fff0 0%,rgb(0 0 0 / .8) 100%)}.hero-box-image img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%}@supports(not (-webkit-hyphens:none)) and (not (-moz-appearance:none)) and (list-style-type:"*"){.hero-box-image img{filter:contrast(1.2) saturate(1.05)}}@media(hover:hover){.hero-box-image{will-change:transform;transition:all .5s linear}.hero-box a:hover .hero-box-image img{transform:scale(1.1)}}.hero-boxes-container .hero-label{width:300px;height:200px;display:block;overflow:hidden;position:absolute;z-index:100;top:-100px;right:-150px;transform:rotate(45deg);background-image:url(/wp-content/themes/hooked-done-rite-roofing/assets/images/background/bg_pattern_2.webp);background-attachment:fixed;background-repeat:repeat;background-color:rgb(214.440167364,89.0309623431,14.359832636)}.hero-boxes-container .hero-label span{font-size:30px;font-weight:400;font-family:"Caveat",sans-serif;display:block;color:#fff;text-align:center;position:absolute;padding:0;top:160px;right:0;width:300px;transition:all .5s ease-in-out;line-height:30px}.hero-boxes-container a:hover .hero-label span{color:#fff}@media(max-width:1099px){.hero-boxes-container .hero-label{width:100px;height:100px;display:block;overflow:hidden;position:absolute;z-index:100;top:-50px;right:-75px;transform:rotate(45deg)}.hero-boxes-container .hero-label span{font-size:12px;top:78px;left:-20px;width:100px;font-weight:700}}