CSS

Código CSS para Magento

Simplemente copiar y pegar. Aunque el código se vea en una sola línea es correcto, está minificado para ahorrar espacio.

<style>
    @import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Oswald:wght@500;600&display=swap);body{margin:0}.cms{--base-font-family:"Inter",sans-serif;--alternative-font-family:"Oswald",sans-serif;--primary:#FF5800;--primary-dark:#C63001;--secondary:#022352;--black:#1D1D1D;--gray:#bebebe;--gray-light:#f2f2f2;--gray-dark:#444444;--white:white;--box-shadow-sm:0px 2px 6px rgba(0, 0, 0, 0.15);--box-shadow-lg:0px 10px 20px rgba(0, 0, 0, 0.25);--base-font-size:1.25rem;--caption-font-size:0.75rem;--h1-font-size:3.25rem;--h2-font-size:2.5rem;--h3-font-size:1.75rem;--small-font-size:1rem;--gap:1rem;--border-radius:6px;--border-width:1px;--transition-base:all ease .3s;color:var(--black);font-family:var(--base-font-family);font-size:var(--base-font-size);font-weight:400}.cms *,.cms ::after,.cms ::before{box-sizing:border-box;margin:0;padding:0;vertical-align:text-top}.cms img{max-width:100%;width:100%}.cms section{padding:80px 0}.cms section.no-padding{padding:0}.cms-container{max-width:1157px;width:100%;margin:0 auto;padding:0 24px}.cms .label,.cms .tagline,.cms h1,.cms h2,.cms h3,.cms h4,.cms strong{font-weight:500}.cms .tagline{color:var(--gray);font-size:var(--caption-font-size);text-transform:uppercase}.cms .tagline-big{font-size:var(--small-font-size)}.cms a,.cms li,.cms p{font-size:var(--base-font-size)}.cms h1,.cms h2,.cms h3,.cms h4{font-family:var(--alternative-font-family);color:var(--primary);line-height:1.3}.cms h1{font-size:var(--h1-font-size)}.cms h2{font-size:var(--h2-font-size)}.cms h3{font-size:var(--h3-font-size)}.cms .caption{font-size:var(--caption-font-size)}.cms .small{font-size:var(--small-font-size)!important}.cms a{text-decoration:none;font-weight:500;text-transform:uppercase;color:var(--black);display:inline-block;transition:var(--transition-base)}.cms a.cms-container{display:block}.cms a.card{text-transform:unset}.cms a:not(.grid-2):hover{color:var(--primary)}.cms a.arrow-link{--margin-icon:5px;position:relative;padding-right:calc(var(--margin-icon) + 14px);font-size:var(--caption-font-size)}.cms a.arrow-link:after{content:url("data:image/svg+xml,%3Csvg width='14' height='13' viewBox='0 0 14 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.83594 0.316406L6.28906 0.835938C6.15234 0.972656 6.15234 1.19141 6.28906 1.30078L10.5273 5.53906H1.20312C1.01172 5.53906 0.875 5.70312 0.875 5.86719V6.63281C0.875 6.82422 1.01172 6.96094 1.20312 6.96094H10.5273L6.28906 11.2266C6.15234 11.3359 6.15234 11.5547 6.28906 11.6914L6.83594 12.2109C6.94531 12.3477 7.16406 12.3477 7.30078 12.2109L13.0156 6.49609C13.1523 6.35938 13.1523 6.16797 13.0156 6.03125L7.30078 0.316406C7.16406 0.179688 6.94531 0.179688 6.83594 0.316406Z' fill='%23FF5800'/%3E%3C/svg%3E%0A");position:absolute;left:calc(100% - 14px);transition:var(--transition-base)}.cms a.arrow-link:hover:after{left:calc(100% - 7px)}.cms p a{text-transform:unset;text-decoration:underline}.cms a.btn{font-weight:500;padding:18px 32px;color:var(--primary);border-width:var(--border-width);border-radius:var(--border-radius);border-color:var(--primary);border-style:solid;display:inline-block;font-size:var(--caption-font-size);text-align:center}.cms a.btn:hover{background-color:var(--primary);color:var(--white)}.cms a.btn-big{font-size:var(--small-font-size)}.cms a.btn-fill{background-color:var(--primary);color:var(--white)}.cms a.btn-fill:hover{background-color:var(--primary-dark);border-color:var(--primary-dark)}.cms .link-alone{text-align:center;padding-top:2.5rem}.cms h1+p,.cms h2+p{margin-top:1.5rem}.cms p+img{margin-top:1.5rem}.cms .btn+p,.cms h3+p,.cms p+p,.cms span+p{margin-top:1rem}.cms p+h1,.cms p+h2,.cms p+h3{margin-top:1em}.cms p+a{margin-top:1rem}.cms :not(.btn)+a.btn{margin-top:1.5rem}.cms .bg-black{background-color:var(--black)}.cms .text-black{color:var(--black)}.cms .bg-primary{background-color:var(--primary)}.cms .text-primary{color:var(--primary)}.cms .bg-primary-dark{background-color:var(--primary-dark)}.cms .text-primary-dark{color:var(--primary-dark)}.cms .bg-secondary{background-color:var(--secondary)}.cms .text-secondary{color:var(--secondary)}.cms .bg-gray{background-color:var(--gray)}.cms .text-gray{color:var(--gray)}.cms .bg-gray-light{background-color:var(--gray-light)}.cms .text-gray-light{color:var(--gray-light)}.cms .bg-gray-dark{background-color:var(--gray-dark)}.cms .text-gray-dark{color:var(--gray-dark)}.cms .grid-1{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:var(--gap);align-items:stretch}.cms .grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);align-items:stretch}.cms .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);align-items:stretch}.cms .grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);align-items:stretch}.cms .grid-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap);align-items:stretch}.cms .text-center{text-align:center}.cms .align-center{align-items:center}.cms .grid-1{max-width:922px;width:100%;margin:0 auto}.cms .grid-3,.cms .grid-4,.cms .grid-5{--base-font-size:var(--small-font-size)}.cms .card{box-shadow:var(--box-shadow-sm);transition:var(--transition-base);border-radius:var(--border-radius)}.cms .card p{font-size:var(--small-font-size)}.cms .card p.price{font-size:var(--h3-font-size);margin-top:1em;font-weight:500;font-family:var(--alternative-font-family)}.cms .card:hover{box-shadow:var(--box-shadow-lg)}.cms .card img{border-radius:var(--border-radius) var(--border-radius) 0 0;padding:0;margin:0}.cms .card-content{padding:1rem;border-radius:0 0 var(--border-radius) var(--border-radius);margin:0;background-color:var(--white)}.cms .product-card-2-cols{padding:24px 24px 40px}.cms .product-card-2-cols p.price{font-size:var(--h2-font-size)}.cms .product-card-2-cols img{border-radius:unset}.cms .product-card-2-cols p{font-size:var(--base-font-size);text-transform:unset}.cms .product-card-2-cols .grid-2{margin-top:1.5rem}.cms .extra-padding>div{padding:0 80px}.cms .product-grid-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap)}.cms .product-grid-6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gap)}.cms .product-grid-7{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--gap)}.cms .product-grid-8{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--gap)}.cms .map-text-section{display:grid;grid-template-columns:4fr 2fr;gap:var(--gap)}.cms .product-card{text-align:center}.cms .product-card a{text-transform:unset;margin-top:1rem;font-size:var(--caption-font-size);color:var(--primary)}.cms .product-card a:hover{color:var(--primary-dark)}.cms .label{font-size:var(--caption-font-size);color:var(--white);text-transform:uppercase;padding:5px 12px;border-radius:99px;background-color:var(--black)}.cms .label-green{background-color:#5bd222}.cms .label-yellow{background-color:#ffc01e}.cms .label-red{background-color:#ff3737}.cms .embed-16-9{position:relative;padding:56.25% 0 0 0}.cms .embed-16-9 iframe{position:absolute;top:0;left:0;width:100%;height:100%}.cms .footer-images{display:flex;justify-content:space-around;flex-wrap:wrap}.cms .footer-images>img{max-width:max(15%,100px);margin-top:1rem}.cms .banner-full{padding-left:2rem;padding-right:2rem}.cms .banner-full>a{width:100%}.cms .bg-image{background-position:center center;background-repeat:no-repeat;background-size:cover}.cms .bg-image h2,.cms .bg-image p,.cms .bg-image span{color:var(--white)}.cms .bg-image>div>div{max-width:700px}.cms .bg-image-center{text-align:center}.cms .bg-image-center>div{max-width:700px;margin:0 auto}.cms .menu{text-align:center}.cms .menu a.btn{margin:12px}.cms .tabs{overflow:hidden}.cms .tabs .tab{width:100%;border-radius:var(--border-radius);color:#fff;overflow:hidden;margin-top:4px}.cms .tabs .tab input{display:none}.cms .tabs .tab input:checked+label{background:var(--gray-dark)}.cms .tabs .tab label{display:flex;justify-content:space-between;padding:1em;background:var(--primary);font-weight:600;cursor:pointer;color:var(--white);font-size:var(--small-font-size)}.cms .tabs .tab label:hover{background:var(--primary-dark)}.cms .tabs .tab label::after{content:url("data:image/svg+xml,%3Csvg width='14' height='15' viewBox='0 0 14 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.15625 1.31641L3.60938 1.83594C3.5 1.97266 3.5 2.19141 3.60938 2.30078L8.55859 7.25L3.60938 12.2266C3.5 12.3359 3.5 12.5547 3.60938 12.6914L4.15625 13.2109C4.29297 13.3477 4.48438 13.3477 4.62109 13.2109L10.3633 7.49609C10.4727 7.35938 10.4727 7.16797 10.3633 7.03125L4.62109 1.31641C4.48438 1.17969 4.29297 1.17969 4.15625 1.31641Z' fill='white'/%3E%3C/svg%3E%0A");width:1em;height:1em;text-align:center;transition:all linear .4s}.cms .tab-content{padding:0 1rem;color:var(--black);background-color:var(--gray-light);transition:all linear .4s;max-height:0}.cms .tab-content p{font-size:var(--small-font-size)}.cms input:checked+label::after{transform:rotate(90deg)}.cms input:checked~.tab-content{max-height:100vh;transition:all linear .4s;padding:1rem}.cms img.img-padding{padding:0 80px}.cms .bg-gray-light .tab-content{background-color:var(--white)}@media only screen and (max-width:768px){.cms{--h1-font-size:2.5rem;--h2-font-size:2rem;--h3-font-size:1.5rem}.cms .grid-1{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(var(--gap) * 2)}.cms .grid-2{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(var(--gap) * 2)}.cms .grid-3{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(var(--gap) * 2)}.cms .grid-4{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(var(--gap) * 2)}.cms .grid-5{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(var(--gap) * 2)}.cms .banner-full{padding-left:unset;padding-right:unset}.cms .extra-padding>div{padding:0}.cms .footer-images{grid-template-columns:repeat(3,1fr)}.cms .map-text-section{grid-template-columns:1fr}.cms .product-grid-5{display:grid;grid-template-columns:repeat(5,70vw);gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;cursor:ew-resize}.cms .product-grid-5>div{scroll-snap-align:start}.cms .product-grid-6{display:grid;grid-template-columns:repeat(6,70vw);gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;cursor:ew-resize}.cms .product-grid-6>div{scroll-snap-align:start}.cms .product-grid-7{display:grid;grid-template-columns:repeat(7,70vw);gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;cursor:ew-resize}.cms .product-grid-7>div{scroll-snap-align:start}.cms .product-grid-8{display:grid;grid-template-columns:repeat(8,70vw);gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;cursor:ew-resize}.cms .product-grid-8>div{scroll-snap-align:start}.cms img.img-padding{padding:0 1rem}}
</style>

Código CSS para Codepen

La única diferencia con el anterior es que no incluye las estiquetas style puesto que en codepen no son necesarias.

@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Oswald:wght@500;600&display=swap);body{margin:0}.cms{--base-font-family:"Inter",sans-serif;--alternative-font-family:"Oswald",sans-serif;--primary:#FF5800;--primary-dark:#C63001;--secondary:#022352;--black:#1D1D1D;--gray:#bebebe;--gray-light:#f2f2f2;--gray-dark:#444444;--white:white;--box-shadow-sm:0px 2px 6px rgba(0, 0, 0, 0.15);--box-shadow-lg:0px 10px 20px rgba(0, 0, 0, 0.25);--base-font-size:1.25rem;--caption-font-size:0.75rem;--h1-font-size:3.25rem;--h2-font-size:2.5rem;--h3-font-size:1.75rem;--small-font-size:1rem;--gap:1rem;--border-radius:6px;--border-width:1px;--transition-base:all ease .3s;color:var(--black);font-family:var(--base-font-family);font-size:var(--base-font-size);font-weight:400}.cms *,.cms ::after,.cms ::before{box-sizing:border-box;margin:0;padding:0;vertical-align:text-top}.cms img{max-width:100%;width:100%}.cms section{padding:80px 0}.cms section.no-padding{padding:0}.cms-container{max-width:1157px;width:100%;margin:0 auto;padding:0 24px}.cms .label,.cms .tagline,.cms h1,.cms h2,.cms h3,.cms h4,.cms strong{font-weight:500}.cms .tagline{color:var(--gray);font-size:var(--caption-font-size);text-transform:uppercase}.cms .tagline-big{font-size:var(--small-font-size)}.cms a,.cms li,.cms p{font-size:var(--base-font-size)}.cms h1,.cms h2,.cms h3,.cms h4{font-family:var(--alternative-font-family);color:var(--primary);line-height:1.3}.cms h1{font-size:var(--h1-font-size)}.cms h2{font-size:var(--h2-font-size)}.cms h3{font-size:var(--h3-font-size)}.cms .caption{font-size:var(--caption-font-size)}.cms .small{font-size:var(--small-font-size)!important}.cms a{text-decoration:none;font-weight:500;text-transform:uppercase;color:var(--black);display:inline-block;transition:var(--transition-base)}.cms a.cms-container{display:block}.cms a.card{text-transform:unset}.cms a:not(.grid-2):hover{color:var(--primary)}.cms a.arrow-link{--margin-icon:5px;position:relative;padding-right:calc(var(--margin-icon) + 14px);font-size:var(--caption-font-size)}.cms a.arrow-link:after{content:url("data:image/svg+xml,%3Csvg width='14' height='13' viewBox='0 0 14 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.83594 0.316406L6.28906 0.835938C6.15234 0.972656 6.15234 1.19141 6.28906 1.30078L10.5273 5.53906H1.20312C1.01172 5.53906 0.875 5.70312 0.875 5.86719V6.63281C0.875 6.82422 1.01172 6.96094 1.20312 6.96094H10.5273L6.28906 11.2266C6.15234 11.3359 6.15234 11.5547 6.28906 11.6914L6.83594 12.2109C6.94531 12.3477 7.16406 12.3477 7.30078 12.2109L13.0156 6.49609C13.1523 6.35938 13.1523 6.16797 13.0156 6.03125L7.30078 0.316406C7.16406 0.179688 6.94531 0.179688 6.83594 0.316406Z' fill='%23FF5800'/%3E%3C/svg%3E%0A");position:absolute;left:calc(100% - 14px);transition:var(--transition-base)}.cms a.arrow-link:hover:after{left:calc(100% - 7px)}.cms p a{text-transform:unset;text-decoration:underline}.cms a.btn{font-weight:500;padding:18px 32px;color:var(--primary);border-width:var(--border-width);border-radius:var(--border-radius);border-color:var(--primary);border-style:solid;display:inline-block;font-size:var(--caption-font-size);text-align:center}.cms a.btn:hover{background-color:var(--primary);color:var(--white)}.cms a.btn-big{font-size:var(--small-font-size)}.cms a.btn-fill{background-color:var(--primary);color:var(--white)}.cms a.btn-fill:hover{background-color:var(--primary-dark);border-color:var(--primary-dark)}.cms .link-alone{text-align:center;padding-top:2.5rem}.cms h1+p,.cms h2+p{margin-top:1.5rem}.cms p+img{margin-top:1.5rem}.cms .btn+p,.cms h3+p,.cms p+p,.cms span+p{margin-top:1rem}.cms p+h1,.cms p+h2,.cms p+h3{margin-top:1em}.cms p+a{margin-top:1rem}.cms :not(.btn)+a.btn{margin-top:1.5rem}.cms .bg-black{background-color:var(--black)}.cms .text-black{color:var(--black)}.cms .bg-primary{background-color:var(--primary)}.cms .text-primary{color:var(--primary)}.cms .bg-primary-dark{background-color:var(--primary-dark)}.cms .text-primary-dark{color:var(--primary-dark)}.cms .bg-secondary{background-color:var(--secondary)}.cms .text-secondary{color:var(--secondary)}.cms .bg-gray{background-color:var(--gray)}.cms .text-gray{color:var(--gray)}.cms .bg-gray-light{background-color:var(--gray-light)}.cms .text-gray-light{color:var(--gray-light)}.cms .bg-gray-dark{background-color:var(--gray-dark)}.cms .text-gray-dark{color:var(--gray-dark)}.cms .grid-1{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:var(--gap);align-items:stretch}.cms .grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);align-items:stretch}.cms .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);align-items:stretch}.cms .grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);align-items:stretch}.cms .grid-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap);align-items:stretch}.cms .text-center{text-align:center}.cms .align-center{align-items:center}.cms .grid-1{max-width:922px;width:100%;margin:0 auto}.cms .grid-3,.cms .grid-4,.cms .grid-5{--base-font-size:var(--small-font-size)}.cms .card{box-shadow:var(--box-shadow-sm);transition:var(--transition-base);border-radius:var(--border-radius)}.cms .card p{font-size:var(--small-font-size)}.cms .card p.price{font-size:var(--h3-font-size);margin-top:1em;font-weight:500;font-family:var(--alternative-font-family)}.cms .card:hover{box-shadow:var(--box-shadow-lg)}.cms .card img{border-radius:var(--border-radius) var(--border-radius) 0 0;padding:0;margin:0}.cms .card-content{padding:1rem;border-radius:0 0 var(--border-radius) var(--border-radius);margin:0;background-color:var(--white)}.cms .product-card-2-cols{padding:24px 24px 40px}.cms .product-card-2-cols p.price{font-size:var(--h2-font-size)}.cms .product-card-2-cols img{border-radius:unset}.cms .product-card-2-cols p{font-size:var(--base-font-size);text-transform:unset}.cms .product-card-2-cols .grid-2{margin-top:1.5rem}.cms .extra-padding>div{padding:0 80px}.cms .product-grid-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap)}.cms .product-grid-6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gap)}.cms .product-grid-7{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--gap)}.cms .product-grid-8{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--gap)}.cms .map-text-section{display:grid;grid-template-columns:4fr 2fr;gap:var(--gap)}.cms .product-card{text-align:center}.cms .product-card a{text-transform:unset;margin-top:1rem;font-size:var(--caption-font-size);color:var(--primary)}.cms .product-card a:hover{color:var(--primary-dark)}.cms .label{font-size:var(--caption-font-size);color:var(--white);text-transform:uppercase;padding:5px 12px;border-radius:99px;background-color:var(--black)}.cms .label-green{background-color:#5bd222}.cms .label-yellow{background-color:#ffc01e}.cms .label-red{background-color:#ff3737}.cms .embed-16-9{position:relative;padding:56.25% 0 0 0}.cms .embed-16-9 iframe{position:absolute;top:0;left:0;width:100%;height:100%}.cms .footer-images{display:flex;justify-content:space-around;flex-wrap:wrap}.cms .footer-images>img{max-width:max(15%,100px);margin-top:1rem}.cms .banner-full{padding-left:2rem;padding-right:2rem}.cms .banner-full>a{width:100%}.cms .bg-image{background-position:center center;background-repeat:no-repeat;background-size:cover}.cms .bg-image h2,.cms .bg-image p,.cms .bg-image span{color:var(--white)}.cms .bg-image>div>div{max-width:700px}.cms .bg-image-center{text-align:center}.cms .bg-image-center>div{max-width:700px;margin:0 auto}.cms .menu{text-align:center}.cms .menu a.btn{margin:12px}.cms .tabs{overflow:hidden}.cms .tabs .tab{width:100%;border-radius:var(--border-radius);color:#fff;overflow:hidden;margin-top:4px}.cms .tabs .tab input{display:none}.cms .tabs .tab input:checked+label{background:var(--gray-dark)}.cms .tabs .tab label{display:flex;justify-content:space-between;padding:1em;background:var(--primary);font-weight:600;cursor:pointer;color:var(--white);font-size:var(--small-font-size)}.cms .tabs .tab label:hover{background:var(--primary-dark)}.cms .tabs .tab label::after{content:url("data:image/svg+xml,%3Csvg width='14' height='15' viewBox='0 0 14 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.15625 1.31641L3.60938 1.83594C3.5 1.97266 3.5 2.19141 3.60938 2.30078L8.55859 7.25L3.60938 12.2266C3.5 12.3359 3.5 12.5547 3.60938 12.6914L4.15625 13.2109C4.29297 13.3477 4.48438 13.3477 4.62109 13.2109L10.3633 7.49609C10.4727 7.35938 10.4727 7.16797 10.3633 7.03125L4.62109 1.31641C4.48438 1.17969 4.29297 1.17969 4.15625 1.31641Z' fill='white'/%3E%3C/svg%3E%0A");width:1em;height:1em;text-align:center;transition:all linear .4s}.cms .tab-content{padding:0 1rem;color:var(--black);background-color:var(--gray-light);transition:all linear .4s;max-height:0}.cms .tab-content p{font-size:var(--small-font-size)}.cms input:checked+label::after{transform:rotate(90deg)}.cms input:checked~.tab-content{max-height:100vh;transition:all linear .4s;padding:1rem}.cms img.img-padding{padding:0 80px}.cms .bg-gray-light .tab-content{background-color:var(--white)}@media only screen and (max-width:768px){.cms{--h1-font-size:2.5rem;--h2-font-size:2rem;--h3-font-size:1.5rem}.cms .grid-1{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(var(--gap) * 2)}.cms .grid-2{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(var(--gap) * 2)}.cms .grid-3{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(var(--gap) * 2)}.cms .grid-4{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(var(--gap) * 2)}.cms .grid-5{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(var(--gap) * 2)}.cms .banner-full{padding-left:unset;padding-right:unset}.cms .extra-padding>div{padding:0}.cms .footer-images{grid-template-columns:repeat(3,1fr)}.cms .map-text-section{grid-template-columns:1fr}.cms .product-grid-5{display:grid;grid-template-columns:repeat(5,70vw);gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;cursor:ew-resize}.cms .product-grid-5>div{scroll-snap-align:start}.cms .product-grid-6{display:grid;grid-template-columns:repeat(6,70vw);gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;cursor:ew-resize}.cms .product-grid-6>div{scroll-snap-align:start}.cms .product-grid-7{display:grid;grid-template-columns:repeat(7,70vw);gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;cursor:ew-resize}.cms .product-grid-7>div{scroll-snap-align:start}.cms .product-grid-8{display:grid;grid-template-columns:repeat(8,70vw);gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;cursor:ew-resize}.cms .product-grid-8>div{scroll-snap-align:start}.cms img.img-padding{padding:0 1rem}}