/* Rounded homepage hero inspired by the framed reference layout. */
html body [data-pc-rounded-home-hero="true"] {
  position: relative !important;
  isolation: isolate !important;
  width: min(calc(100% - 40px), 1920px) !important;
  max-width: 1920px !important;
  margin: 22px auto 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(215, 173, 36, .32) !important;
  border-radius: 28px !important;
  background-color: #111016 !important;
  background-clip: padding-box !important;
  box-shadow: 0 18px 46px rgba(42, 29, 18, .16) !important;
  clip-path: inset(0 round 28px) !important;
}

html body [data-pc-rounded-home-hero="true"]::before,
html body [data-pc-rounded-home-hero="true"]::after {
  border-radius: inherit !important;
}

html body [data-pc-rounded-home-hero="true"] img,
html body [data-pc-rounded-home-hero="true"] video,
html body [data-pc-rounded-home-hero="true"] picture {
  max-width: 100% !important;
}

/* Prevent a nested hero layer from drawing square corners over the parent. */
html body [data-pc-rounded-home-hero="true"] > :first-child,
html body [data-pc-rounded-home-hero="true"] > :last-child {
  border-radius: inherit !important;
}

@media (max-width: 900px) {
  html body [data-pc-rounded-home-hero="true"] {
    width: calc(100% - 24px) !important;
    margin-top: 14px !important;
    border-radius: 22px !important;
    clip-path: inset(0 round 22px) !important;
  }
}

@media (max-width: 560px) {
  html body [data-pc-rounded-home-hero="true"] {
    width: calc(100% - 16px) !important;
    margin-top: 10px !important;
    border-radius: 18px !important;
    clip-path: inset(0 round 18px) !important;
  }
}
