.component.responsive-section {
  background-position: center center;
  background-size: cover;
}
.component.responsive-section > div {
  margin: 0 auto;
  width: 100%;
}
.component.responsive-section.cq-dd-image {
  height: auto;
}
.component.responsive-section.width-xs > div {
  max-width: 500px;
}
.component.responsive-section.width-sm > div {
  max-width: 768px;
}
.component.responsive-section.width-md > div {
  max-width: 992px;
}
.component.responsive-section.width-lg > div {
  max-width: 1170px;
  padding: 0 30px;
}
.component.responsive-section.vertically-center {
  display: flex;
  align-items: center;
}
.component.responsive-section.foreground-red > div {
  background-color: #e00122;
}
.component.responsive-section.foreground-red > div p,
.component.responsive-section.foreground-red > div h1,
.component.responsive-section.foreground-red > div h2,
.component.responsive-section.foreground-red > div h3,
.component.responsive-section.foreground-red > div h4,
.component.responsive-section.foreground-red > div h5,
.component.responsive-section.foreground-red > div h6,
.component.responsive-section.foreground-red > div a {
  color: #fff;
}
.component.responsive-section.foreground-white > div {
  background-color: #fff;
}
.component.responsive-section.foreground-white > div p,
.component.responsive-section.foreground-white > div h1,
.component.responsive-section.foreground-white > div h2,
.component.responsive-section.foreground-white > div h3,
.component.responsive-section.foreground-white > div h4,
.component.responsive-section.foreground-white > div h5,
.component.responsive-section.foreground-white > div h6 {
  color: #000;
}
.component.responsive-section.foreground-black > div {
  background-color: #000;
}
.component.responsive-section.foreground-black > div p,
.component.responsive-section.foreground-black > div h1,
.component.responsive-section.foreground-black > div h2,
.component.responsive-section.foreground-black > div h3,
.component.responsive-section.foreground-black > div h4,
.component.responsive-section.foreground-black > div h5,
.component.responsive-section.foreground-black > div h6 {
  color: #fff;
}
.component.responsive-section.background-red {
  background-color: #e00122;
}
.component.responsive-section.background-red.foreground-transparent > div p,
.component.responsive-section.background-red.foreground-transparent > div h1,
.component.responsive-section.background-red.foreground-transparent > div h2,
.component.responsive-section.background-red.foreground-transparent > div h3,
.component.responsive-section.background-red.foreground-transparent > div h4,
.component.responsive-section.background-red.foreground-transparent > div h5,
.component.responsive-section.background-red.foreground-transparent > div h6,
.component.responsive-section.background-red.foreground-transparent > div a {
  color: #fff;
}
.component.responsive-section.background-white {
  background-color: #fff;
}
.component.responsive-section.background-grey {
  background-color: #f3f3f3;
}
.component.responsive-section.background-black {
  background-color: #000;
}
.component.responsive-section.background-black.foreground-transparent > div p,
.component.responsive-section.background-black.foreground-transparent > div h1,
.component.responsive-section.background-black.foreground-transparent > div h2,
.component.responsive-section.background-black.foreground-transparent > div h3,
.component.responsive-section.background-black.foreground-transparent > div h4,
.component.responsive-section.background-black.foreground-transparent > div h5,
.component.responsive-section.background-black.foreground-transparent > div h6 {
  color: #fff;
}
.component.responsive-section.vertical-padding-25 {
  padding-top: 25px;
  padding-bottom: 25px;
}
.component.responsive-section.vertical-padding-50 {
  padding-top: 50px;
  padding-bottom: 50px;
}
.component.responsive-section.vertical-padding-100 {
  padding-top: 100px;
  padding-bottom: 100px;
}
.component.responsive-section.horizontal-padding-true {
  padding-left: 30px;
  padding-right: 30px;
}
@media (max-width: 767px) {
  .aem-AuthorLayer-Edit .component.responsive-section.hidden-xs {
    display: block !important;
    opacity: 0.5;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .aem-AuthorLayer-Edit .component.responsive-section.hidden-sm {
    display: block !important;
    opacity: 0.5;
  }
}
@media (min-width: 991px) and (max-width: 1199px) {
  .aem-AuthorLayer-Edit .component.responsive-section.hidden-md {
    display: block !important;
    opacity: 0.5;
  }
}
@media (min-width: 1200px) {
  .aem-AuthorLayer-Edit .component.responsive-section.hidden-lg {
    display: block !important;
    opacity: 0.5;
  }
}
html[class^="aem-AuthorLayer-"] .component.responsive-section[min-height],
html[class*=" aem-AuthorLayer-"] .component.responsive-section[min-height] {
  min-height: 500px !important;
}