#ecoLandingPage {
   --eco-white: hsl(0 0 99);
   --eco-black: hsl(0 0 10);
   --cs-max: 750px;
   --cs-min: 320px;
 
   background-color: var(--eco-white);
   grid-template-columns: minmax(0, 1fr);
   max-width: 750px;
   display: grid;
   margin: 0 auto;
   @media (min-width: 1060px) {
      max-width: 1500px;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   }
   & * {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 16px;
      color: var(--eco-black);
   }
   >section {
      container: ecoSections / inline-size;
      width: 100%;
      min-height: 100px;
    
      &:first-child {
         background: url(../img/eco202603/forest.jpg) no-repeat center;
         div {
            padding-block: 4em;
            h1 {
               max-width: 10ch;
               color: var(--eco-white);
            }
         }
      }
      &:nth-child(2) div {
         padding-block: 4em;
      }
      &:nth-child(3) {
         @media (min-width: 1060px) {
            width: 100%;
            grid-column: span 2;
         }
      }
      &:nth-child(8) {
         background-color: hsl(206 37 13);
         color: var(--eco-white);
       
         @media (min-width: 1060px) {
            width: 100%;
            grid-column: span 2;
         }
      }
      > div {
         padding: 32px;
      }
   }
 
   h1, h2, h3, h4, h5, h6 {
      line-height: 1.25;
   }
   h1 {
      font-size: 64px;
      font-weight: 800;
   }

   h2 {
      font-size: 56px;
      font-weight: 800;
   }

   h3 {
      font-size: 48px;
      font-weight: 500;
   }

   h4 {
      font-size: 26px;
      font-weight: 600;
   }
   
   h5 { 
      font-size: 40px;
      font-weight: 500;
      color: var(--eco-white);
   }
 
   p, li {
      font-size: 24px;
      font-weight: 500;
   }
 
   @container ecoSections ( inline-size < 750px ) {
      section > div {
         padding: clamp(8px, 8px + 4.27cqi, 32px);
      }

      h1 {
         font-size: clamp(32px, 32px + 4.27cqi, 64px);
      }

      h2 {
         font-size: clamp(28px, 28px + 3cqi, 56px);
      }

      h3 {
         font-size: clamp(24px, 24px + 2cqi, 48px);
      }

      h4 {
         font-size: clamp(18px, 18px + 1.75cqi, 26px);
      }

      h5 { 
         font-size: clamp(20px, 20px + 2cqi, 40px);
         color: var(--eco-white);
      }
 
      p, li {
         font-size: clamp(12px, 12px + 1cqi, 24px);
      }
    
      .eco-desc p {
         font-size: clamp(1em, 1em + 1.4cqi, 1.875em);
      }
      
      .eco-cta header { 
         font-size: clamp(1.25em, 1.25em + 1.75cqi, 2.5em);
      }
   }
 
   .eco-essentials {
      >div>h4 {
         padding-block-start: 0.5em;
         +h4 {
            margin-block: 2em 1.5em;
         }
         +p {
            max-width: 37ch;
            /*font-size: clamp(1em, 0.9375em + 0.3333vw, 1.25em);*/
            text-wrap: pretty;
         }
      }
   }

   .eco-desc {
      background: url('../img/eco202603/ECO-OCEAN.jpg') no-repeat center;
      >div {
         p {
            max-width: 25ch;
            /*font-size: clamp(1em, 0.6875em + 1.3333vw, 1.875em);*/
            font-weight: 600;
            color: #fff;
          
            +p {
               padding-top: 1em;
            }
         }
      }
   }
   
   .eco-cta {
      padding-block: 2em;
      >header {
         font-size: clamp(1.25em, 0.9375em + 1.6667vw, 2.5em);
         font-weight: 800;
         text-align: center;
      }
      h4 {
         text-align: center;
      }
      >footer {
         display: flex;
         flex-direction: column;
         align-items: center;
       
         >* {
            /*font-size: clamp(1em, 0.875em + 0.6667vw, 1.5em);*/
            font-weight: 500;
         }       
         a {
            margin: 1.5em;
            padding: 9px 101px;
            background-color: hsl(25 5 47);
            border: 1px solid hsl(25 5 27);
            border-radius: 4px;
            color: #fff;
            text-decoration: none;
            text-transform: uppercase;
            font-weight: 700;
             
            &:hover, &:focus {
               background-color: hsl(25 5 27);
               border-color: hsl(25 5 7);
            }
          
            &:focus {
               outline: 3px solid rgba(255, 255, 255, 0.1);
               outline-offset: -5px;
            }
         }
      }
   }
   .eco-thumbs {
      display: flex;
      padding: 2em;
      flex-wrap: wrap;
      justify-content: space-around;
    
      >figure {
         width: 253px;
         >a {
            text-decoration: none;
         }
         .eco-thumb {
            width: 100%;
            aspect-ratio: 253 / 354;
            background-color: hsl(0 0 50);
            img {
               width: 100%;
               height: auto;
            }
         }
         figcaption {
            text-transform: uppercase;
            text-align: center;
            font-size: 16px;
         }
      }
      @media (min-width: 1060px) {
         flex-wrap: nowrap;
         /*justify-content: space-between;*/
         figure {
            width: calc((100% - ((4 * 1em) + 2 * 1.5em)) / 5);
         }
      }
   }
 
   .eco-regenerate {
      h3 {
         margin-block: 24px;
      }
      ul.eco-centered {
         margin-block: 32px;
         list-style: none;
         text-align: center;

         li {
            font-weight: 700;
            margin-block: 4px;
          
            img {
               width: 20px;
               height: auto;
               transform-origin: center;
               transform: rotate(90deg);
            }
         }
      }
    
      ul:not(.centered) {
         list-style-position: inside;
      }
    
      h4 {
         margin-block: 32px;
         font-weight: 600;
         text-transform: uppercase;
      }
   }
 
   .eco-lifestyle {
      .img-holder {
         aspect-ratio: 750 / 651;
         img {
            width: 100%;
            height: auto;
         }
      }
   }
   .eco-fabric {
      .img-holder {
         aspect-ratio: 75 / 99;
         img {
            width: 100%;
            height: auto;
         }
      }
   }
 
   .eco-footer {
      >div {
         display: grid;
         grid-template-columns: 1fr;
         grid-template-rows: 1fr 1fr;
                     
         .ftr-copy {
            font-size: clamp(1.25em, 1.0833em + 0.8889vw, 1.5em);
            color: var(--eco-white);
         }
         .ftr-logos {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
         }
         .ftr-logo {
            width: 96px;
            img {
               width: 100%;
               height: auto;
               &.global { aspect-ratio: 523 / 240; }
               &.okeo   { aspect-ratio: 581 / 131; }
               &.sedex  { aspect-ratio: 499 / 240; }
            }
         }
         @media (min-width: 1060px) {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr;
         }
      }
   }
}