#retailers{position:relative;padding:0;& .content{position:absolute;left:var(--content-left-m);top:var(--content-top);color:var(--primary-light);z-index:10;display:flex;flex-direction:column;max-width:var(--content-max-w);gap:2rem}& .hero{max-height:600px;position:relative;height:600px;& h1{max-width:800px}& .overlay,.overlay.gradient{height:600px;z-index:2}& img:not(.flag,.svg){object-fit:cover;object-position:70% 10%;min-width:100vw}& #hero-postcode-search{background-color:white;width:350px;align-items:center;position:relative;display:flex;border:5px;gap:10px;border-radius:5px;& input{width:100%;border:none;font-size:1rem;padding:15px 15px 15px 40px;border-radius:5px;&:focus-visible{border:none;outline:none}}&>svg{position:absolute;left:8px}& .close:hover{cursor:pointer}& button.clear{background-color:transparent;line-height:0;position:absolute;right:8px}& .svg{width:2rem;flex-shrink:0}& .flag{width:1rem;border-radius:50px;height:-moz-fit-content;height:fit-content;border:1px solid var(--light-beige)}}& .search-results{position:absolute;top:calc(100% - -5px);background-color:white;width:100%;left:0;color:var(--primary-dark);display:flex;flex-direction:column;border-radius:5px;overflow:hidden;z-index:15;filter:drop-shadow(2px 4px 6px rgba(0,0,0,.3));& .result{font-size:1rem;line-height:1.1;padding:.9rem .8rem;border-radius:5px;margin:0 5px;display:flex;justify-content:space-between;&:first-child{margin-top:5px}&:last-child{margin-bottom:5px}&.viewAll{& span{font-weight:400;font-size:.8rem}font-weight:600;display:flex;flex-direction:column;gap:3px;font-size:1.1rem;background-color:var(--primary-dark);color:white;margin-top:5px;&:hover{background:var(--primary-dark)}}&:hover{background-color:var(--subtle-grey)}& a{display:flex;align-items:center;font-weight:600;& .visit{width:1.2rem}}& span{font-weight:600}}}}}#retailer-icons{display:flex;height:-moz-fit-content;height:fit-content;justify-content:center;align-items:center;width:100%;padding:100px 0;scroll-snap-align:center;& .icon-container{display:flex;flex-wrap:wrap;gap:1rem;max-width:1200px;justify-content:center;align-items:center;& a{padding:2rem;& img{max-width:100%;height:auto}}}}@media only screen and (max-width:600px){#retailers .hero #hero-postcode-search{width:100%}#retailers .hero .content{& h1{font-size:12vw}max-width:var(--sm-content-max-w);left:4%;& #hero-postcode-search input{font-size:.9rem}}}