/* =========================
   MOBILE ONLY OVERRIDES
   Load this AFTER facial.css
   ========================= */

@media (max-width: 900px) {
  .treatment-hero {
    flex-direction: column !important;
    min-height: auto !important;
  }

  .hero-image-wrap {
    width: 100% !important;
    height: 300px !important;
    position: relative !important;
  }

  .hero-text-content {
    width: 100% !important;
    margin-left: 0 !important;
    padding: 20px 24px !important;
    box-sizing: border-box !important;
  }

  .breadcrumb {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .treatment-title {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .treatment-subtitle {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .treatments-list {
    padding: 60px 24px !important;
    box-sizing: border-box !important;
  }

  .treatment-item {
    padding: 28px 24px !important;
    margin-bottom: 24px !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 640px) {
  .hero-image-wrap {
    height: 250px !important;
  }

  .hero-text-content {
    padding: 16px 20px !important;
  }

  .treatments-list {
    padding: 50px 20px !important;
  }

  .treatment-item {
    padding: 24px 20px !important;
  }
}