.block--categories {
  position: relative;
  z-index: z(default);
  padding-top: 140px;
  padding-bottom: 140px;
  @include breakpoint(large) {
    padding-top: 254px;
    padding-bottom: 440px;
  }
  .block-content {
    max-width: 640px;
    margin: 0 auto;
    @include breakpoint(large) {
      padding-left: 112px;
    }
    .shape-wrapper {
      padding-top: 56px;
      padding-bottom: 64px;
      position: relative;
      z-index: z(above);
      min-height: 360px;
      @include breakpoint(large) {
        @include top-bottom(padding, 110px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 560px;
      }
      @include brand-shape(categories) {
        top: 0;
        min-height: 100%;
        @include breakpoint(medium down) {
          left: 0;
          min-width: 125%;
          transform: translate3d(-18%, 0, 0);
        }
        @include breakpoint(small down) {
          display: none;
        }
        @include breakpoint(large) {
          right: -112px;
        }
      }
      @include brand-shape-frame(categories-frame) {
        top: -28px;
        min-height: calc(100% + 28px);
        @include breakpoint(medium down) {
          left: 0;
          min-width: 125%;
          transform: translate3d(-18%, 0, 0);
        }
        @include breakpoint(small down) {
          display: none;
        }
        @include breakpoint(large) {
          right: -80px;
        }
      }
    }

    .field--name-field-heading {
      margin-bottom: 16px;
      @include breakpoint(medium) {
        margin-bottom: 24px;
      }
    }
    .field--name-field-p-link {
      margin-top: 24px;
      @include breakpoint(large) {
        margin-top: 40px;
      }
    }
    .categories-links {
      margin-top: 24px;
      @include breakpoint(large) {
        display: none;
      }
      h4 {
        font-size: rem-calc(15);
        line-height: 1.5;
        font-weight: $global-weight-medium;
        color: $color-gray-500;
        text-transform: uppercase;
        letter-spacing: 0.2em;
      }
      ul {
        list-style: none;
        margin: 0;
        li {
          margin-top: 4px;
          a {
            @include link(more);
          }
        }
      }
    }
  }
  .field--name-field-categories {
    > .field__item {
      position: absolute;
      z-index: z(default);
      max-width: 100%;
      @include breakpoint(medium down) {
        &:not(:first-child):not(:last-child) {
          display: none;
        }
        &:first-child {
          top: 0;
          right: -16px;
          width: 280px;
        }
        &:last-child {
          bottom: 0;
          left: -16px;
          width: 280px;
        }
      }
      @include breakpoint(large) {
        &:first-child {
          left: 0;
          top: 0;
          width: 528px;
        }
        &:nth-child(2) {
          right: 0;
          bottom: 200px;
          width: 528px;
        }
        &:last-child {
          left: 112px;
          bottom: 0;
          width: 416px;
          max-width: calc(100% - 528px - 112px - 16px);
        }
      }
    }
  }
}
