/* DRUK R5.77 — course hero two-level padding standard
   Round 1 validated on DMLT, then applied to all 16 course pages.
   Intent: keep only a clear outer gutter + content padding; avoid stacked mobile gutters.
*/

/* Desktop: normal outer side gutter, compact inner white-frame padding. */
body.v83-page.v83-inner.v83-course.course-standard-v561 main#main > section.course-detail-hero.page-hero:first-child > .container{
  width:min(calc(100% - 48px),var(--container))!important;
  margin-inline:auto!important;
}
body.course-standard-v561 .course-detail-hero .page-hero-grid{
  padding:10px!important;
  gap:0!important;
}
body.course-standard-v561 .course-detail-hero .course-hero-copy{
  padding:32px!important;
}

/* Tablet: slightly reduced outer gutter and content padding. */
@media (max-width:900px){
  body.v83-page.v83-inner.v83-course.course-standard-v561 main#main > section.course-detail-hero.page-hero:first-child > .container{
    width:min(calc(100% - 32px),var(--container))!important;
  }
  body.course-standard-v561 .course-detail-hero .page-hero-grid{
    padding:8px!important;
  }
  body.course-standard-v561 .course-detail-hero .course-hero-copy{
    padding:26px 22px!important;
  }
}

/* Mobile: image-first layout already exists; remove the extra inner frame gutter.
   Keep only a very small dark outer gutter and normal text padding. */
@media (max-width:640px){
  body.v83-page.v83-inner.v83-course.course-standard-v561 main#main > section.course-detail-hero.page-hero:first-child > .container{
    width:calc(100% - 12px)!important;
    max-width:none!important;
    margin-left:6px!important;
    margin-right:6px!important;
  }
  body.course-standard-v561 .course-detail-hero .page-hero-grid{
    padding:0!important;
    gap:0!important;
  }
  body.course-standard-v561 .course-detail-hero .course-hero-copy{
    padding:18px 16px 20px!important;
  }
  body.course-standard-v561 .course-detail-hero .course-hero-media{
    margin:0!important;
  }
}

@media (max-width:360px){
  body.v83-page.v83-inner.v83-course.course-standard-v561 main#main > section.course-detail-hero.page-hero:first-child > .container{
    width:calc(100% - 8px)!important;
    margin-left:4px!important;
    margin-right:4px!important;
  }
  body.course-standard-v561 .course-detail-hero .course-hero-copy{
    padding:16px 14px 18px!important;
  }
}