@media (min-width : 1024px) {
  body:not(#index) .wrapper__inner {
    flex-direction : row;
  }

  body:not(#index) #content-wrapper {
    width : 75%;
  }

  body:not(#index) .left-column__wrapper {
    width          : 25%;
    margin-left   : 20px;
    padding-bottom : 0;
  }

  body:not(#index) #content-wrapper {
    padding-right : 20px;
  }
}

@media (max-width : 767px) {
  .category-hero-banner {
    height     : 220px;
    background : linear-gradient(135deg, var(--color-secondary, hsl(210, 90%, 45%)) 0%, var(--color-primary, hsl(200, 80%, 50%)) 100%);
  }

  .category-hero-banner__content {
    padding : 1.5rem 1rem;
  }

  .category-hero-banner__title {
    font-size : 1.75rem;
  }
}

@media (max-width : 575px) {
  .category-hero-banner__title {
    font-size : 1.5rem;
  }
}