/* Highly specific styling to get this to work correctly with blocks */
.product-list-content {
  > .group-block > .layout-panel-flex--row {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    @media screen and (width >= 990px) {
      display: grid;
      grid-template-columns: repeat(9, 1fr);
      grid-gap: var(--grid-gutter);
    }

    > .text-block {
      grid-column: 1 / span 5;

      @media screen and (width >= 750px) {
        grid-column: 1 / span 4;
      }
    }

    > .product-list-group {
      grid-column: -5 / -1;

      @media screen and (width >= 1200px) {
        grid-column: -4 / -1;
      }
    }
  }
}