.footer-banners.banner-wrapper{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0}
.footer-banners.banner-wrapper::before,.footer-banners.banner-wrapper::after{display:none}
.footer-banners.banner-wrapper>.footer-banner{width:auto;float:none;padding:0;margin:0}
@media(max-width:767px){.footer-banners.banner-wrapper{grid-template-columns:repeat(2,1fr);gap:8px}}

.hf-banner{position:relative;container-type:inline-size;width:100%;aspect-ratio:1/1;overflow:hidden;border-radius:8px;background:var(--bg) center/cover no-repeat;font-family:'Poppins',Arial,sans-serif;box-sizing:border-box}
.hf-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.02) 0%,rgba(0,0,0,.1) 35%,rgba(0,0,0,.75) 100%)}
.hf-banner .hf-content{position:absolute;z-index:2;inset:0;padding:12px;display:flex;flex-direction:column;justify-content:flex-end;box-sizing:border-box;color:#fff!important;text-align:left!important}
.hf-banner .hf-headline{display:block!important;margin:0 0 4px!important;padding:0!important;color:#fff!important;font-size:22px!important;line-height:1.15!important;font-weight:600!important;letter-spacing:-.3px!important;text-transform:none!important;text-shadow:0 1px 4px rgba(0,0,0,.35)!important}
.hf-banner .hf-sub{display:block!important;margin:0 0 10px!important;padding:0!important;color:#fff!important;font-size:15px!important;line-height:1.35!important;font-weight:500!important;text-wrap:balance;text-shadow:0 1px 4px rgba(0,0,0,.35)!important}
.hf-banner .hf-btn{position:static!important;display:flex!important;align-self:flex-start;align-items:center;justify-content:center;width:44px;height:44px;padding:0!important;border-radius:50%;background:#4CB142!important;color:#fff!important;text-decoration:none!important;box-sizing:border-box;transition:transform .2s,background .2s}
.hf-banner .hf-btn::before{content:"";position:absolute;inset:0}
.hf-banner:hover .hf-btn{background:#419B38!important}
.hf-banner:hover .hf-arrow{transform:translate(3px,-1px)}
.hf-banner .hf-arrow{font:700 24px/1 Arial,sans-serif;color:#fff!important;transform:translateY(-1px);transition:transform .2s}
@container (max-width:220px){
.hf-banner .hf-content{padding:10px}
.hf-banner .hf-headline{font-size:16px!important;margin-bottom:3px!important}
.hf-banner .hf-sub{font-size:11px!important;line-height:1.3!important;margin-bottom:8px!important}
.hf-banner .hf-btn{width:32px;height:32px}
.hf-banner .hf-arrow{font-size:18px}
}