.products-listing {
  .container-wide {
    display: grid;
    gap: 70px;
    grid-template-columns: 400px 1fr;
    align-items: start;

    @media (max-width: 1600px) {
      gap: 50px;
      grid-template-columns: 380px 1fr;
    }

    @media (max-width: 1280px) {
      gap: 30px;
      grid-template-columns: 340px 1fr;
    }

    @media (max-width: 1024px) {
      grid-template-columns: 1fr;
      gap: 20px;
    }

    aside {
      padding: 40px 30px;
      background-color: var(--color-neutral-25);

      @media (max-width: 1280px) {
        padding: 30px 20px;
      }

      @media (max-width: 1024px) {
        order: 2;
      }

      nav {
        >ul {
          margin: 0;
          padding: 0;
          list-style: none;

          >li {
            margin-bottom: 4px;

            >a {
              display: block;
              padding: 4px 0;
              color: var(--color-neutral-800);
              font-size: var(--font-size-sm);
              font-weight: 600;
              text-decoration: none;
              text-transform: uppercase;
              font-feature-settings: 'case' on;

              &:hover {
                text-decoration: underline;
              }
            }

            &.is-current,
            &.is-open {
              >a {
                font-weight: 800;
              }
            }

            ul {
              margin: 4px 0 8px 12px;
              padding: 0;
              list-style: none;

              li {
                margin-bottom: 2px;

                a {
                  display: block;
                  padding: 4px 0;
                  color: var(--color-neutral-600);
                  font-size: var(--font-size-sm);
                  font-weight: 400;
                  text-decoration: none;
                  text-transform: none;
                  font-feature-settings: normal;

                  &:hover {
                    text-decoration: underline;
                  }
                }

                &.is-current,
                &.is-open {
                  >a {
                    color: var(--color-neutral-800);
                    font-weight: 700;
                  }
                }

                ul {
                  margin: 2px 0 6px 14px;
                  padding: 0;
                  list-style: none;

                  li {
                    margin-bottom: 2px;

                    a {
                      display: block;
                      padding: 2px 0;
                      color: var(--color-neutral-500);
                      font-size: calc(var(--font-size-sm) * 0.95);
                      font-weight: 400;

                      &:hover {
                        text-decoration: underline;
                      }
                    }

                    &.is-current {
                      >a {
                        color: var(--color-neutral-800);
                        font-weight: 600;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    .products-listing-body {

      @media (max-width: 1024px) {
        order: 1;
      }

      h2 {
        margin: 0 0 50px;
        font-size: var(--font-size-xl);

        @media (max-width: 1600px) {
          margin: 0 0 40px;
        }

        @media (max-width: 1280px) {
          margin: 0 0 30px;
        }

        @media (max-width: 1024px) {
          margin: 0 0 20px;
        }
      }

      .products-listing-grid {
        display: grid;
        gap: 50px;
        grid-template-columns: repeat(2, 1fr);

        @media (max-width: 1600px) {
          gap: 40px;
        }

        @media (max-width: 1280px) {
          gap: 30px;
        }

        @media (max-width: 1024px) {
          grid-template-columns: 1fr;
          gap: 20px;
        }

        article {
          figure {
            margin: 0 0 16px;

            a {
              display: block;

              img {
                width: 100%;
              }
            }
          }

          h5 {
            margin: 0;
            font-weight: 500;
            font-feature-settings: 'case' on;
            text-transform: uppercase;

            a {
              display: block;
              color: var(--color-neutral-800);

              &:hover {
                text-decoration: underline;
              }
            }
          }
        }
      }
    }
  }
}