.sprite_product { background-image: url('/assets/images/products.jpg'); background-repeat: no-repeat; display: block; width: 100%; height: 100vw; padding-bottom: 100%; height: 0; background-size: 400% auto; } .sprite-product-1 { width: 100%; height: auto; background-position: 0% 0%; border-radius: 10px; } .sprite-product-2 { width: 100%; height: auto; background-position: 33.333% 0%; border-radius: 10px; } .sprite-product-3 { width: 100%; height: auto; background-position: 66.666% 0%; border-radius: 10px; } .sprite-product-4 { width: 100%; height: auto; background-position: 100% 0%; border-radius: 10px; } .sprite-product-5 { width: 100%; height: auto; background-position: 0% 50%; border-radius: 10px; } .sprite-product-6 { width: 100%; height: auto; background-position: 33.333% 50%; border-radius: 10px; } .sprite-product-7 { width: 100%; height: auto; background-position: 66.666% 50%; border-radius: 10px; } .sprite-product-8 { width: 100%; height: auto; background-position: 100% 50%; border-radius: 10px; } .sprite-product-9 { width: 100%; height: auto; background-position: 0% 100%; border-radius: 10px; } .sprite-product-10 { width: 100%; height: auto; background-position: 33.333% 100%; border-radius: 10px; } .sprite-product-11 { width: 100%; height: auto; background-position: 66.666% 100%; border-radius: 10px; } .sprite-product-12 { width: 100%; height: auto; background-position: 100% 100%; border-radius: 10px; } .sprite_customer { background-image: url('/assets/images/customer.jpg'); background-repeat: no-repeat; display: block; width: 100%; height: 100vw; padding-bottom: 100%; height: 0; background-size: 600% auto; } .sprite-customer-1 { width: 100%; height: auto; background-position: 0% 0%; border-radius: 10px; } .sprite-customer-2 { width: 100%; height: auto; background-position: 20% 0%; border-radius: 10px; } .sprite-customer-3 { width: 100%; height: auto; background-position: 40% 0%; border-radius: 10px; } .sprite-customer-4 { width: 100%; height: auto; background-position: 60% 0%; border-radius: 10px; } .sprite-customer-5 { width: 100%; height: auto; background-position: 80% 0%; border-radius: 10px; } .sprite-customer-6 { width: 100%; height: auto; background-position: 100% 0%; border-radius: 10px; } .sprite-customer-7 { width: 100%; height: auto; background-position: 0% 50%; border-radius: 10px; } .sprite-customer-8 { width: 100%; height: auto; background-position: 20% 50%; border-radius: 10px; } .sprite-customer-9 { width: 100%; height: auto; background-position: 40% 50%; border-radius: 10px; } .sprite-customer-10 { width: 100%; height: auto; background-position: 60% 50%; border-radius: 10px; } .sprite-customer-11 { width: 100%; height: auto; background-position: 80% 50%; border-radius: 10px; } .sprite-customer-12 { width: 100%; height: auto; background-position: 100% 50%; border-radius: 10px; } .sprite-customer-13 { width: 100%; height: auto; background-position: 0% 100%; border-radius: 10px; } .sprite-customer-14 { width: 100%; height: auto; background-position: 20% 100%; border-radius: 10px; } .sprite-customer-15 { width: 100%; height: auto; background-position: 40% 100%; border-radius: 10px; } .sprite-customer-16 { width: 100%; height: auto; background-position: 60% 100%; border-radius: 10px; } .sprite-customer-17 { width: 100%; height: auto; background-position: 80% 100%; border-radius: 10px; } .sprite-customer-18 { width: 100%; height: auto; background-position: 100% 100%; border-radius: 10px; }