/* Gainwell v1.29 — Materials & Finishes page */
.gw-material-library{
  width:100%;
}

.gw-material-library__intro{
  display:grid!important;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)!important;
  gap:72px!important;
  align-items:end!important;
  margin-bottom:64px!important;
}

.gw-material-library__intro h2{
  max-width:780px;
  margin:0;
}

.gw-material-library__intro .lead{
  margin:0!important;
  color:#5c7079!important;
  font-size:15px!important;
  line-height:1.75!important;
}

.gw-material-library__anchors{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  margin-top:24px!important;
}

.gw-material-library__anchors a{
  min-height:40px;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 16px!important;
  border:1px solid #ced8dc!important;
  color:#183644!important;
  background:#fff!important;
  font-size:10px!important;
  font-weight:800!important;
  letter-spacing:.09em!important;
  line-height:1!important;
  text-transform:uppercase!important;
}

.gw-material-library__anchors a:hover{
  color:#fff!important;
  background:#0b2a3d!important;
  border-color:#0b2a3d!important;
}

.gw-material-family{
  display:block!important;
  margin-top:82px!important;
  scroll-margin-top:120px;
}

.gw-material-family:first-of-type{
  margin-top:0!important;
}

.gw-material-family > header{
  display:grid!important;
  grid-template-columns:170px minmax(0,1fr) minmax(250px,.68fr)!important;
  gap:30px!important;
  align-items:end!important;
  padding-bottom:28px!important;
  border-bottom:1px solid #d7e0e3!important;
}

.gw-material-family > header > div{
  display:flex!important;
  align-items:center!important;
  gap:13px!important;
}

.gw-material-family > header span{
  color:#1686b4!important;
  font-size:12px!important;
  font-weight:850!important;
}

.gw-material-family > header small{
  color:#183644!important;
  font-size:10px!important;
  font-weight:850!important;
  letter-spacing:.1em!important;
  text-transform:uppercase!important;
}

.gw-material-family > header h2{
  margin:0!important;
  font-size:clamp(34px,3.3vw,52px)!important;
  line-height:1.03!important;
}

.gw-material-family > header p{
  margin:0!important;
  color:#64777f!important;
  font-size:12px!important;
  line-height:1.65!important;
}

.gw-material-swatch-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  border-left:1px solid #d7e0e3!important;
}

.gw-material-swatch{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  background:#fff!important;
  border-right:1px solid #d7e0e3!important;
  border-bottom:1px solid #d7e0e3!important;
}

.gw-material-swatch figure{
  width:100%!important;
  aspect-ratio:1/1!important;
  margin:0!important;
  overflow:hidden!important;
  background:#edf1f2!important;
}

.gw-material-swatch figure img{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
  transition:transform .5s ease!important;
}

.gw-material-swatch:hover figure img{
  transform:scale(1.04)!important;
}

.gw-material-swatch > div{
  min-height:126px!important;
  padding:19px 20px!important;
}

.gw-material-swatch small{
  display:block!important;
  margin-bottom:8px!important;
  color:#1686b4!important;
  font-size:9px!important;
  font-weight:850!important;
  letter-spacing:.1em!important;
}

.gw-material-swatch h3{
  margin:0 0 9px!important;
  color:#183644!important;
  font-size:23px!important;
  line-height:1.15!important;
}

.gw-material-swatch > div > span{
  color:#72838a!important;
  font-size:9px!important;
  font-weight:800!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
}

.gw-material-library__notice{
  display:grid!important;
  grid-template-columns:220px minmax(0,1fr) auto!important;
  gap:30px!important;
  align-items:center!important;
  margin-top:54px!important;
  padding:28px!important;
  background:#eef4f6!important;
  border:1px solid #d7e0e3!important;
}

.gw-material-library__notice strong{
  font-family:var(--gw3-serif,Georgia,serif)!important;
  font-size:24px!important;
  font-weight:400!important;
}

.gw-material-library__notice p{
  margin:0!important;
  color:#5e727b!important;
  font-size:12px!important;
  line-height:1.65!important;
}

@media(max-width:1020px){
  .gw-material-swatch-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  .gw-material-family > header{
    grid-template-columns:150px minmax(0,1fr)!important;
  }

  .gw-material-family > header > p{
    grid-column:2!important;
  }

  .gw-material-library__notice{
    grid-template-columns:1fr auto!important;
  }

  .gw-material-library__notice p{
    grid-column:1!important;
  }
}

@media(max-width:820px){
  .gw-material-library__intro{
    grid-template-columns:1fr!important;
    gap:24px!important;
  }

  .gw-material-family > header{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }

  .gw-material-family > header > p{
    grid-column:auto!important;
  }

  .gw-material-swatch-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:560px){
  .gw-material-swatch-grid{
    grid-template-columns:1fr!important;
  }

  .gw-material-library__notice{
    grid-template-columns:1fr!important;
  }
}