.wrapper {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 2vw;
}

@block wrapper-with-sidebar {
  @media (--breakpoint-desktop) {
    display: flex;
    align-items: flex-start;
  }

  @element sidebar {
    @media (--breakpoint-desktop) {
      flex: 0 0 220px;
      padding: var(--grid-gutter);
      border-radius: 7px;
      box-shadow: var(--card-box-shadow);

      & > h2 {
        margin-bottom: calc(var(--grid-gutter) * 3);
      }
    }
  }

  @element content {
    padding: var(--grid-gutter) 0;

    @media (--breakpoint-desktop) {
      flex: 1 1 auto;
      margin-left: var(--grid-gutter);
      overflow: hidden;
    }
  }
}

.grid-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 calc(var(--grid-gutter) / 2 * -1);

  & > * {
    box-sizing: border-box;
    margin: 0 calc(var(--grid-gutter) / 2) var(--grid-gutter);
    flex: 0 0 calc(50% - var(--grid-gutter));

    @media (--breakpoint-desktop) {
      flex: 0 0 calc(33% - var(--grid-gutter));
    }
  }
}

.grid-list-small {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 calc(var(--grid-gutter) / 2 * -1);

  & > * {
    box-sizing: border-box;
    margin: 0 calc(var(--grid-gutter) / 2) var(--grid-gutter);
    flex: 0 0 calc(50% - var(--grid-gutter));
  }
}