.serveHeroBanner .serveHeroWrapper{display:flex;align-items:center}@media all and (max-width:1180px){.serveHeroBanner .serveHeroWrapper{flex-direction:column}}.serveHeroBanner .serveHeroWrapper>div{flex:0 0 50%}@media all and (max-width:1180px){.serveHeroBanner .thumbnail{margin-bottom:30px}}.serveHeroBanner .thumbnail .thumbnailWrapper{position:relative;width:700px;margin:0 auto;height:0;padding-bottom:113.5135135135135%}@media all and (max-width:1500px){.serveHeroBanner .thumbnail .thumbnailWrapper{width:650px}}@media all and (max-width:1280px){.serveHeroBanner .thumbnail .thumbnailWrapper{width:580px}}@media all and (max-width:640px){.serveHeroBanner .thumbnail .thumbnailWrapper{width:360px}}.serveHeroBanner .imgSlide{padding-bottom:113.5135135135135%}.serveHeroBanner .arrows img{position:absolute;top:50%;left:0;transform:translateY(-50%);z-index:10;width:70px;height:70px;padding:22px;border-radius:50%;background-color:#fff;cursor:pointer;transition:all .2s ease-in-out}@media all and (max-width:640px){.serveHeroBanner .arrows img{width:50px;height:50px;padding:14px}}.serveHeroBanner .arrows img:hover{box-shadow:0 3px 8px #00000026}.serveHeroBanner .arrows img.nextArrow{left:auto;right:0}.serveHeroBanner .arrows img.swiper-button-disabled{opacity:0}.serveHeroBanner .swiper-pagination-bullet{background-color:#fff;opacity:1}.serveHeroBanner .swiper-pagination-bullet-active{background-color:var(--accent-color-1)}.serveHeroBanner h2.title{color:var(--accent-color)}.serveHeroBanner .contentBox{text-align:center;max-width:540px;margin:0 auto}.serveHeroBanner .contentBox .heading{font-family:var(--font-heading-family);font-size:15px;line-height:26px;letter-spacing:3.3px;text-transform:uppercase;margin-bottom:10px}.serveHeroBanner .method{margin-top:25px}.serveHeroBanner .ingredients .item{display:flex;border:solid #000;border-width:2px 0 2px 0;margin-top:-2px}@media all and (max-width:640px){.serveHeroBanner .ingredients .item{flex-wrap:wrap}}.serveHeroBanner .ingredients .item:first-child{margin-top:0}.serveHeroBanner .ingredients .item>div{padding:15px 20px}.serveHeroBanner .ingredients .item .serveQuantity{font-family:var(--font-heading-family);flex:0 0 40%;border-right:2px solid #000;font-size:17px;line-height:20px;letter-spacing:3.74px;text-transform:uppercase;display:flex;justify-content:center;align-items:center;position:relative}@media all and (max-width:640px){.serveHeroBanner .ingredients .item .serveQuantity{flex:0 0 100%;border-right:none;background-color:#eee}.serveHeroBanner .ingredients .item .serveQuantity:after{content:"";width:0;height:0;position:absolute;bottom:-10px;left:50%;transform:translate(-50%);border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #eee}}.serveHeroBanner .ingredients .item .serveName{flex:0 0 60%}@media all and (max-width:640px){.serveHeroBanner .ingredients .item .serveName{flex:0 0 100%}}
/*# sourceMappingURL=/cdn/shop/t/13/assets/section-serve-hero-banner.scss.css.map */