$cat-header-bg: $body-bg-alt !default;
$cat-header-color: $white !default;
$cat-header-color-dark: $text-dark !default;
$cat-header-min-height: 450px !default;
$cat-header-nophoto-height: 350px !default;

.category-header {
   display: flex;
   align-items: flex-end;
   background-repeat: no-repeat;
   background-size: cover;
   margin-bottom: 20px;
   min-height: $cat-header-min-height;
   padding: 20px 0 35px 0;
   position: relative;

   & > picture {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: stretch;
      width: 100%;
      height: 100%;
      z-index: 0;

      img {
         flex: 1 1 100%;
         object-fit: cover;
         object-position: center;
         max-height: 100%;
      }
   }

   > .container {
      position: relative;
      z-index: 1;

      @media screen and (min-width: $lg) {
         animation: header-text-animation 3s forwards;
         animation-delay: .5s;
         opacity: 0;
         transform: translateX(-20px);
      }
   }

   &::after {
      background: linear-gradient(0deg, rgba($gradient, 1), transparent 100%);
      content: "";
      display: block;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: .6;
      height: 80%;
      width: 100%;
   }

   .breadcrumbs {
      color: $cat-header-color;
      margin-bottom: 13px;

      li:not(:last-child)::after {
         color: $cat-header-color;
      }
   }

   h1 {
      color: $cat-header-color;
      margin-bottom: 20px;
   }

   p {
      color: $cat-header-color;
      font-size: $font-size-larger;
   }

   a,
   li::before {
      color: $cat-header-color;
   }

   .read-more-link {
      font-weight: $font-weight-medium;
      color: $cat-header-color;
   }

   .w-text {
      max-width: 750px;
   }

   &.category-background {
      &::after {
         display: none;
      }
   }

   &.category-background:not(.category-header-black),
   &.category-header-black {
      background: $cat-header-bg;

      &::after {
         background: linear-gradient(0deg, rgba($white, 1), transparent 100%);
      }

      h1,
      p,
      a,
      li,
      li:not(:last-child)::after,
      li::before {
         color: $cat-header-color-dark;
      }
   }

   &-white {
      .breadcrumbs .active {
         color: $white;
      }
   }

   @media screen and (max-width: $xxl - 1) and (min-width: $lg) {
      padding: 20px 100px 35px;
   }

   @media screen and (max-width: $xl - 1) {
      &.category-header-right {
         background-position: 75% center;
      }

      &.category-header-left {
         background-position: 0 center;
      }
   }

   @media screen and (max-width: $md - 1) {
      min-height: 400px;

      .breadcrumbs {
         display: none;
      }
   }
}
