.grid {
  display: grid;

  &--category {
    grid-template-areas:
            'sidebar header header header'
            'sidebar main main main'
            'sidebar main main main';
    grid-template-columns: 29rem auto;

    @include media-breakpoint-down(md) {
      grid-template-areas:
                'header'
                'sidebar'
                'main';
      grid-template-columns:auto;
    }
  }
}

.grid__sidebar {
  grid-area: sidebar;
  margin-right: 2rem;

  @include media-breakpoint-down(md) {
    margin-right: 0;
  }
}

.grid__category-header {
  grid-area: header;
  // margin-bottom: 4rem;
}

.grid__category-main {
  grid-area: main;
  grid-row: auto;

  @include media-breakpoint-down(md) {
    margin-top: 3rem;
  }
}

.grid__category-banner {

  @include media-breakpoint-down(md) {
    height: 180px;
    margin-left: -2rem;
    margin-right: -2rem;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}