#why-us { padding: 80px calc(8% + 20px); background: #fff; color: #30353A; }
#why-us p, #why-us ul { margin: 0; }
#why-us picture { display: block; }

#why-us .wu4__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
#why-us .wu4__text { display: grid; gap: 16px; justify-items: start; }
#why-us .accent-rule { display: block; width: 40px; height: 3px; background: #D8B98A; }

#why-us .wu4__eyebrow { margin: 0 0 -4px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #30353A; }
#why-us h2 { margin: 0; padding: 0; max-width: 20ch; font-weight: 700; font-size: 32px; line-height: 1.25; color: #30353A; text-transform: none; letter-spacing: 0; }
#why-us .wu4__body { max-width: 62ch; font-size: 16px; line-height: 1.6; color: #555b61; }

#why-us .wu4__tiles { list-style: none; margin: 8px 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
#why-us .wu4__tile { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; margin: 0; padding: 16px; border-radius: 4px; background: #f4f4f4; }
#why-us .wu4__icon { display: grid; place-items: center; width: 50px; height: 50px; box-sizing: border-box; border: 2px solid #D8B98A; border-radius: 3px; background: #30353A; color: #D8B98A; }
#why-us .wu4__tile-text { display: grid; gap: 4px; }
#why-us .wu4__title { margin: 0; padding: 0; font-weight: 700; font-size: 16px; line-height: 1.3; color: #30353A; text-transform: none; letter-spacing: 0; }
#why-us .wu4__line { font-size: 15px; line-height: 1.6; color: #555b61; }

#why-us .wu4__media { position: relative; }
#why-us .wu4__img { display: block; aspect-ratio: 4 / 3; width: 100%; height: auto; object-fit: cover; border-radius: 4px; }


@media only screen and (max-width: 980px) {
  #why-us .wu4__media { display: none; }
  #why-us.wu4--keep-photo .wu4__media { display: block; }
}
@media only screen and (min-width: 768px) {
  #why-us .wu4__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media only screen and (min-width: 981px) {
  #why-us .wu4__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 48px; }
  #why-us picture { position: absolute; inset: 0; }
  #why-us .wu4__img { height: 100%; aspect-ratio: auto; }
}
@media only screen and (max-width: 980px) {
  #why-us { padding: 60px 40px; }
  #why-us h2 { font-size: 26px; line-height: 35px; }
}


@media only screen and (max-width: 479px) {
  #why-us { padding-left: 24px; padding-right: 24px; }
}