@import "https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;500;700&display=swap";@import "https://fonts.googleapis.com/css2?family=Open%20Sans:wght@400;500;700&display=swap";*{box-sizing:border-box}:root{--md-ref-typeface-brand:"Google Sans Flex";--md-ref-typeface-plain:system-ui}body{margin:0 auto;font-family:Google Sans Flex}.menu{float:left;text-align:center;width:20%}.menu a{color:#000;background-color:#e5e5e5;width:100%;margin-top:7px;padding:8px;display:block}.main{float:left;width:60%;padding:0 20px}.right{float:left;text-align:center;background-color:#e5e5e5;width:20%;margin-top:7px;padding:15px}@media only screen and (width<=620px){.menu,.main,.right{width:100%}}h1{text-align:center;font-size:1.7rem}ul{scroll-snap-type:x mandatory;columns:1;text-align:center;width:100vw;height:300px;padding:10px;overflow-x:scroll}li{text-align:left;background-image:url(/mywebsite-demo/assets/soyjack-DlYM78VB.jpg);background-size:cover;border:1px solid #ddd;width:200px;height:100%;margin:0 10px;padding:20px;list-style-type:none;display:inline-block}li:nth-child(2n){background-image:url(/mywebsite-demo/assets/srpelo-ClIPZBML.jpg);background-size:contain}ul::column{scroll-snap-align:center}ul::scroll-button(*){color:#000;opacity:.7;cursor:pointer;background:0 0;border:0;font-size:2rem}ul::scroll-button(*):hover{opacity:1}ul::scroll-button(*):focus{opacity:1}ul::scroll-button(*):active{translate:1px 1px}ul::scroll-button(*):disabled{opacity:.2;cursor:unset}ul::scroll-button(left){content:"◄"}ul::scroll-button(right){content:"►"}ul{anchor-name:--my-carousel}ul::scroll-button(*){position-anchor:--my-carousel;position:absolute}ul::scroll-button(left){right:calc(anchor(left) - 70px);bottom:calc(anchor(top) + 13px)}ul::scroll-button(right){left:calc(anchor(right) - 70px);bottom:calc(anchor(top) + 13px)}ul{scroll-marker-group:after}ul::scroll-marker-group{position-anchor:--my-carousel;top:calc(anchor(bottom) - 70px);justify-self:anchor-center;justify-content:center;gap:20px;display:flex;position:absolute}ul::column::scroll-marker{content:"";background-color:#0000;border:2px solid #000;border-radius:10px;width:16px;height:16px}ul::column::scroll-marker:target-before{border:2px solid gray}ul::column::scroll-marker:target-current{background-color:#000;transition:all .7s}ul::column::scroll-marker:target-after{background-color:red;border:2px solid red}.container{justify-content:left;align-items:center;height:200px;display:flex}