/* ====================================
MOBILE FIRST
==================================== */

/*.recycle-section{
  width:100%;
  padding:50px 24px;
  background:#000;
}*/

.recycle-wrapper{
  display:flex;
  flex-direction:column;
  gap:60px;
}

/* ====================================
CONTENT
==================================== */

/*.recycle-content h2{
  font-size:clamp(48px, 12vw, 72px);
  line-height:.92;
  font-weight:800;
  letter-spacing:-2px;
  margin-bottom:28px;
}*/

/*.recycle-content p{
  font-size:20px;
  line-height:1.2;
  color:rgba(255,255,255,.9);
  margin-bottom:32px;
  max-width:100%;
}*/



/* ====================================
GRID
==================================== */

.recycle-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px 18px;
}

/* ====================================
ITEM
==================================== */

.recycle-item{
  text-align:center;
}

.recycle-icon{
  width:82px;
  height:82px;

  margin:0 auto 16px;

  border:2px solid rgba(255,255,255,.18);

  border-radius:22px;

  display:flex;
  align-items:center;
  justify-content:center;

  transition:.35s ease;
}

.recycle-icon img{
  width:50px;
  height:50px;
  object-fit:contain;

 /* filter:brightness(0) invert(1);*/
}

.recycle-item:hover .recycle-icon{
  border-color:var(--brand-hover);
  transform:translateY(-4px);
}

.recycle-item span{
  display:block;
color: white;
  font-size:14px;
  line-height:1.2;
  /*font-weight:700;*/

  max-width:120px;
  margin:auto;
}

/* ====================================
TABLET
==================================== */

@media(min-width:768px){

  /*.recycle-section{
    padding:70px 40px;
  }*/

  .recycle-grid{
    grid-template-columns:repeat(4, 1fr);
    gap:45px 25px;
  }

  /*.recycle-content p{
    max-width:700px;
    font-size:24px;
  }*/

  .recycle-icon{
    width:92px;
    height:92px;
  }

  .recycle-icon img{
    width:60px;
    height:60px;
  }

  .recycle-item span{
    font-size:15px;
    max-width:140px;
    font-weight: 400;
  }

}

/* ====================================
DESKTOP
==================================== */

@media(min-width:1100px){

  /*.recycle-section{
    padding:80px 60px;
  }*/

  .recycle-wrapper{
    display:grid;
    grid-template-columns:420px 1fr;
    gap:60px;
    align-items:start;
  }

  /*.recycle-content h2{
    font-size:clamp(60px, 6vw, 92px);
  }

  .recycle-content p{
    font-size:clamp(22px, 2vw, 34px);
    margin-bottom:40px;
    max-width:420px;
  }*/


  .recycle-grid{
    gap:50px 30px;
  }

  .recycle-icon{
    width:96px;
    height:96px;
    border-radius:24px;
  }

  .recycle-icon img{
    width:65px;
    height:65px;
  }

  .recycle-item span{
    font-size:16px;
    max-width:150px;
  }

}