/* Router / ONU service image + responsive 3-column work examples (2026-10-18) */
#examples .examples-grid {
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 20px !important;
  align-items: stretch;
}
#examples .examples-grid .example {
  aspect-ratio: 3 / 2 !important;
  border-radius: 16px !important;
  min-width: 0 !important;
  isolation: isolate;
  margin:0 !important;
}
#examples .examples-grid .example img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.96) contrast(1.02);
}
#examples .examples-grid .example:after {
  inset: 47% 0 0 !important;
  background:linear-gradient(180deg,transparent 0%,rgba(9,20,14,.8) 100%) !important;
  pointer-events:none;
}
#examples .examples-grid .example span {
  font-size:clamp(15px,1.48vw,20px) !important;
  line-height:1.28 !important;
  letter-spacing:0 !important;
  left:17px !important;
  right:17px !important;
  bottom:17px !important;
  overflow-wrap:anywhere;
  text-wrap:balance;
}
@media(max-width:899px){
  #examples .examples-grid{gap:14px!important}
  #examples .examples-grid .example span{font-size:clamp(13px,1.8vw,17px)!important;bottom:13px!important;left:13px!important;right:13px!important}
}
@media(max-width:699px){
  #examples .examples-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  #examples .examples-grid .example{aspect-ratio:4 / 3!important}
  #examples .examples-grid .example span{font-size:clamp(13px,2.7vw,16px)!important}
}
@media(max-width:479px){
  #examples .examples-grid{grid-template-columns:1fr!important;gap:14px!important}
  #examples .examples-grid .example{aspect-ratio:16 / 10!important}
  #examples .examples-grid .example span{font-size:16px!important;bottom:17px!important;left:16px!important;right:16px!important}
}

/* Clean label strip: captions never overlay text already present in images. */
#examples .examples-grid .example {
  aspect-ratio:auto !important;
  display:flex !important;
  flex-direction:column !important;
  background:#fff !important;
  border:1px solid #e1eae2 !important;
  box-shadow:0 12px 28px rgba(15,50,27,.055) !important;
}
#examples .examples-grid .example:after {display:none !important;content:none !important}
#examples .examples-grid .example img {
  flex:none !important;
  height:auto !important;
  aspect-ratio:16 / 10 !important;
  object-fit:cover !important;
  object-position:center !important;
}
#examples .examples-grid .example span {
  display:block !important;
  position:static !important;
  inset:auto !important;
  z-index:1 !important;
  color:#17251c !important;
  background:#fff !important;
  padding:17px 19px !important;
  font-size:clamp(16px,1.4vw,19px) !important;
  font-weight:700 !important;
  line-height:1.3 !important;
  min-height:66px !important;
  box-sizing:border-box !important;
  text-wrap:balance;
}
@media(max-width:899px) {
  #examples .examples-grid .example span{font-size:15px!important;padding:13px 14px!important;min-height:60px!important}
}
@media(max-width:479px){
  #examples .examples-grid .example img{aspect-ratio:16 / 10!important}
  #examples .examples-grid .example span{font-size:17px!important;padding:14px 17px!important;min-height:0!important}
}