.ingredient-banner{--main-size: 300px;--item-size: 100px;position:relative;background-color:var(--color-bg);color:var(--color-text)}.ingredient-banner__bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.ingredient-banner__bg img{display:block;height:100%;width:100%;object-fit:contain}.ingredient-banner .section-spacing{padding:var(--internal-padding, 0) 0;position:relative;z-index:2}.ingredient-banner .section-header{text-align:var(--heading-pos);justify-content:var(--heading-flex);width:100%}.ingredient-banner__container{width:100%;display:grid;position:relative;place-items:center;justify-content:center;gap:10px}.ingredient-banner__item{position:relative;z-index:1}.ingredient-banner__item[data-type=main]{z-index:2;width:var(--main-size);grid-area:main;height:100%}.ingredient-banner__item[data-type=main]>div,.ingredient-banner__item[data-type=main] img{height:100%;width:100%;object-fit:contain}.ingredient-banner__item:not([data-type=main]){opacity:0;background-color:var(--item-bg);border-radius:4px}.ib-item__container{display:flex;flex-direction:column;height:var(--item-size);width:var(--item-size);text-align:center}.ib-item__copy{flex:0 auto}.ib-item__copy>*{margin-bottom:0;line-height:1}.ib-item__image{flex:1 1 auto;max-height:100%;position:relative}.ib-item__image img{display:block;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain}@media only screen and (max-width:767px){.ingredient-banner__container{--main-size: 200px;grid-template-rows:var(--item-size) var(--main-size) var(--item-size);grid-auto-columns:minmax(min-content,min-content);grid-template-areas:".  main" ". main" ".  main";grid-auto-flow:column;gap:0}.ib-item__copy>*{font-size:1.2rem}.ingredient-banner__bg{opacity:.4}}@media only screen and (min-width:768px){.ingredient-banner{--main-size: 500px;--item-size: 200px}.ingredient-banner__container{grid-template-columns:var(--item-size) var(--main-size) var(--item-size);grid-auto-rows:minmax(min-content,min-content);grid-template-areas:". main ." ". main ." ". main .";column-gap:max(8%,80px);row-gap:30px}.ingredient-banner[data-even="1"] .ib-item:nth-of-type(odd){transform:translateY(50%)}.ingredient-banner__item:not([data-type=main]){padding:10px 15px}}
/*# sourceMappingURL=/cdn/shop/t/18/assets/ingredient-banner.css.map */