.category-header {
   display: flex;
   align-items: stretch;
   background-color: $body-bg-alt;
   border-radius: $border-radius-base;
   margin-bottom: 40px;

   img {
      width: 100%;
      height: auto;

      @supports (object-fit: cover) {
         min-height: 470px;
         object-fit: cover;
      }
   }

   .header-img {
      width: 57%;
      overflow: hidden;
      position: relative;
      border-radius: 0 $border-radius-base $border-radius-base 0;
   }

   .header-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      line-height: $line-height-sm;
      padding: 30px 40px 30px 110px;
      width: 43%;
      max-width: 610px;
      margin-left: auto;
   }

   &.no-photo {
      .header-content {
         width: 100%;
         max-width: 1512px;
         margin-right: auto;
      }
   }

   .breadcrumbs {
      margin-top: 0;
   }

   h1 {
      margin-bottom: 1rem;
   }

   @media screen and (max-width: $xl - 1) {
      .header-content {
         padding: 20px 20px 20px 80px;
         max-width: none;
         width: calc(100% - 440px);
      }

      .header-img {
         width: 440px;
      }

      img {
         @supports (object-fit: cover) {
            min-height: 380px;
         }
      }
   }

   @media screen and (max-width: $lg - 1) {
      margin: 0 -20px 40px;
      overflow: hidden;
      border-radius: 0;

      .header-img {
         border-radius: 0;
      }

      .header-content {
         padding: 20px 20px 20px 40px;
         max-width: none;
      }
   }

   @media screen and (max-width: $md - 1) {
      margin: 0 -10px 20px;
      flex-wrap: wrap;
      background-color: $white;

      .breadcrumbs {
         margin: 0 0 18px;
         padding: 10px;
         border-bottom: 1px solid $border-color;
      }

      .header-content {
         width: 100%;
         padding: 0;
         text-align: center;
      }

      h1 {
         padding: 0 10px;
         font-size: $font-size-h2;
         margin-bottom: 18px;
      }

      .content-inner {
         display: none;
      }

      img {
         min-height: unset;
      }

      .header-img {
         width: 100%;
      }
   }

   @media screen and (max-width: $sm - 1) {
      h1 {
         font-size: $font-size-h3;
      }
   }
}
