app-razer-dream:has(.customs-product-cards){
     max-width:100%;
     app-template-create, app-template-content, app-content-page{
         max-width:100%;
    }
}
 .customs-product-cards{
     --h:auto;
     --visible:4.2;
     --gap:24px;
     --setpos: center;
     --setwidth: 0px;
     background-color: #000;
			@media (max-width:1400px){
         --visible:3.2;
						--gap:12px;
    }
     @media (max-width:900px){
         --visible:2.2;
						--gap:12px;
    }
     @media (max-width:500px){
         --visible:1.2;
						--gap:12px;
    }
     text-align: center;
     max-width: 1920px;
     padding: 1rem 0;
     margin: 0 auto;
     color: #BBB;
     font-size: 1em;
     > *:not(.viewport){
         padding: 0 1rem;
         max-width: 1200px;
         margin: 0 auto;
    }
     .gmd {
         font-family: "Material Symbols Rounded",sans-serif;
         font-display: swap;
         font-size: 25px;
         line-height: 1;
         letter-spacing: normal;
         text-transform: none;
         display: inline-block;
         white-space: nowrap;
         word-wrap: normal;
         direction: ltr;
         font-feature-settings: "liga";
         -webkit-font-smoothing: antialiased;
         font-variation-settings: "FILL" 1,"wght" 400,"GRAD" 0,"opsz" 18 
    }
     .gmd::before {
         content: "" 
    }
     h2{
         font: 500 1.75rem / 1.75rem RazerF5, Arial, Helvetica, sans-serif;
         text-transform: uppercase;
         color: #44D62C;
         @media (min-width:600px){
             font-size: 40px;
        }
    }
    .card-heading{
         color: #fff;
         font-size: 21px;
         font-weight: 400;
         line-height: 1em;
						margin-bottom: 1rem;
    }
     .viewport{
         overflow: hidden;
         overflow-x: visible;
         animation: scrolling forwards;
         width: 100%;
        	margin: 0 auto;
         padding: 0;
         scrollbar-gutter: auto;
         scroll-snap-type: x mandatory;
         scrollbar-width: thin;
         scrollbar-color: transparent transparent;
         &:hover{
             scrollbar-color: rgba(255,255,255,.18) transparent;
             &::-webkit-scrollbar-thumb {
                 background-color: rgba(255,255,255,.18);
                 border-radius: 40px;
            }
             &::-webkit-scrollbar-track {
                 background-color: transparent;
            }
        }
         &::-webkit-scrollbar {
             height: 6px;
        }
    }
     .viewport > ul {
         display: flex;
         transition: transform .45s cubic-bezier(.2, .9, .2, 1);
         align-items: stretch;
         will-change: transform;
         justify-content: var(--setpos);
         padding: 0;
         direction: ltr;
         margin: 2rem 0;
         gap: var(--gap);
         &:after, &:before{
             content: "";
             min-width: var(--setwidth);
             flex-grow: 1;
             flex-basis: 0;
        }
         > li{
             display: flex;
             flex: 0 0 calc((100% - (var(--visible) - 1) * var(--gap)) / var(--visible));
             height: auto;
             min-height: 300px;
             max-width: 450px;
             scroll-snap-align: center;
             align-items: stretch;
             justify-content: center;
             position: relative;
             padding: 0;
             margin: 0;
        }
    }
     .viewport >ul >li >div{
         background: #111;
         width: 100%;
         padding: 1rem;
         text-align: left;
         border: 1px solid #333;
         border-radius: 10px;
         display: grid;
         justify-content: center;
         align-items: self-end;
        	grid-auto-columns: 1fr;
        	grid-auto-rows: max-content max-content max-content 1fr max-content;
         > img{
             justify-self: center;
             width: auto;
             height: 186px;
             margin-bottom: 1rem;
									&.crop{
											aspect-ratio: 1.15;
											object-fit: cover;
											object-position: center center;
									}
        }
         div.product-description + a{
             font-size: 14px;
             .gmd{
                 font-size: 16px;
                 vertical-align: text-top;
            }
        }
         .pricing{
             margin: 1rem 0 0 0;
             padding: 1rem 0 0 0;
             border-top: 1px solid #333;
									display: grid;
            	grid-auto-columns: 1fr auto;
            	grid-auto-flow: column;
							   align-items: center;
        }
						.pricing:has(.price:empty) > span:not(.price){
							   display: none;
						}
						.pricing .price{
							color: #fff;
							font-size: 21px;
							font-weight: 400;
							text-align: end;
						}
						&:not(.starting-from) .pricing > span:not(.price){
								display: none;
						}
    }
     .product-description{
						ul{
							margin-left: 1rem;
						}
         ul li{
             list-style: disc;
									margin-bottom: .25rem;
        }
						h4{
							color: #fff;
						}
    }
}
 @keyframes scrolling {
     0%,to{
         --setpos: start;
         --setwidth: var(--gap);
    }
}