/* WordPress web design page ------------------------------------------------ */
.wp-hero { padding-bottom: clamp(48px, 6vw, 80px); }
.wp-hero__photo { aspect-ratio: 4 / 3.1; }
.wp-hero__card { position: absolute; z-index: 2; left: -8%; bottom: 0; width: 250px; }

.wp-why__card { padding: clamp(24px, 3vw, 40px); border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line-soft); }
.wp-why__card h3 { font-size: var(--fs-h4); margin-bottom: 20px; }
.wp-why__card .work-note { background: var(--white); }
.wp-why__card .work-note a { color: var(--brand); font-weight: 500; }

.wp-edit { padding-bottom: 8px; }
.wp-edit .ui-card { position: absolute; z-index: 2; right: -4%; top: 22%; width: 230px; }

@media (max-width: 1023px) {
  .wp-hero__card { left: 4%; }
  .wp-edit .ui-card { right: 2%; }
}
@media (max-width: 599px) {
  .wp-hero { padding-bottom: 0; }
  .wp-hero__card { position: relative; left: auto; width: auto; margin: -40px 12px 0; }
  .wp-edit .ui-card { position: relative; right: auto; top: auto; width: auto; margin: -28px 12px 0; }
}