.product-container{display:grid;--g:0.5em;--a:15deg;grid-gap:var(--g);grid-template-columns:repeat(4,1fr);overflow:hidden;margin:2rem 1rem;border-radius:5px;background:hsl(48,77%,91%);filter:drop-shadow(2px 2px 5px hsl(0,0%,18%))}.product-container__content{grid-column-end:span 2;position:relative;z-index:1;padding:min(1em,4vw) min(2em,2vw);display:flex;flex-direction:column;gap:.75em}.product-container__content:after{position:absolute;inset:0 auto;z-index:-1;padding-left:calc(var(--g) + 1px);background:inherit;content:"";left:calc(100% - 1px);-webkit-clip-path:polygon(0 0,calc(var(--g) + 1px) 0,100% 100%,0 100%);clip-path:polygon(0 0,calc(var(--g) + 1px) 0,100% 100%,0 100%);aspect-ratio:tan(var(--a))}.product-container__content .accent{width:-moz-fit-content;width:fit-content;padding:.5rem 1rem;border-radius:10px;border:2px dotted hsl(46,65%,52%);box-shadow:0 0 8px rgba(0,0,0,.1);margin:.5rem;line-height:1.2}.product-container__content a{background-color:rgba(0,0,0,0);-webkit-text-decoration:underline dotted hsl(25,76%,31%) 2px;text-decoration:underline dotted hsl(25,76%,31%) 2px;text-underline-offset:5px;outline:none;padding:5px;transition:all .2s ease-in-out}.product-container__content a:hover{background-color:hsl(25,76%,31%);color:hsl(37,80%,98%);border-radius:5px;text-decoration:none}.product-container figure{display:grid;container-type:size}.product-container img{--xo:100cqh * tan(var(--a));contain:size;place-self:stretch;margin-right:calc(-1*var(--xo));object-fit:cover;--xi:var(--xo);-webkit-clip-path:polygon(0 0,calc(100% - var(--xi)) 0,100% 100%,calc(var(--xi)) 100%);clip-path:polygon(0 0,calc(100% - var(--xi)) 0,100% 100%,calc(var(--xi)) 100%)}@media(max-width:992px){.product-container{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;margin:1rem .5rem}.product-container__content:after{display:none}.product-container figure{height:33vh;width:45%;margin-bottom:.5rem}.product-container img{margin-right:0;-webkit-clip-path:none;clip-path:none;border-radius:5px}}nav.subnav{position:fixed;top:57px;width:100%;max-width:100%;padding:.5rem;align-items:center;z-index:900;background:hsl(37,80%,98%);border-bottom:1px solid #e9e9e9}.subnav__list,nav.subnav{margin:0;display:flex;justify-content:center}.subnav__list{flex-wrap:wrap;gap:.5rem;list-style:none;overflow-x:auto;-webkit-overflow-scrolling:touch}@media(min-width:576px){.subnav__list{padding:.5rem}}.subnav__link{display:inline-flex;align-items:center;font-weight:500;border-radius:8px;transition:all .3s ease-in-out;cursor:pointer;text-align:center;padding:.5rem .75rem}.subnav__link[aria-current=true]{font-weight:600;background-color:hsl(25,76%,31%);color:hsl(48,77%,91%)}