// 2 cols
@mixin gridWrapper2Columns($columns: 1) {
  .pi-wrapper {
    &.pi-wrapper__grid {
      // 3
      &.pi-wrapper__grid--columns-2 {
        grid-template-columns: repeat(#{$columns}, 1fr);
        // NOT Is Responsive
        &:not(.is-responsive) {
          grid-template-columns: repeat(2, 1fr);
        }
      }
    }
  }
}

@mixin gridWrapperColmnsWidths {
  .pi-wrapper {
    &.pi-wrapper__grid {
      &.pi-wrapper__grid--columns-2 {
        // 2 / 3
        &.pi-wrapper__grid--two-thirds {
          grid-template-columns: 2fr 1fr;
        }
        // 1 / 2
        &.pi-wrapper__grid--half {
          grid-template-columns: repeat(1, 1fr);
        }
        // 1 / 3
        &.pi-wrapper__grid--third {
          grid-template-columns: 1fr 2fr;
        }
        // 1 / 4
        &.pi-wrapper__grid--quarter {
          grid-template-columns: 1fr 3fr;
        }
        // 1 / 5
        &.pi-wrapper__grid--fifth {
          grid-template-columns: 1fr 4fr;
        }
        // 1 / 6
        &.pi-wrapper__grid--sixth {
          grid-template-columns: 1fr 5fr;
        }
      }
    }
  }
}

.pi-wrapper {
  // Grid directive
  &.pi-wrapper__grid {
    display: grid;
    // Align items
    &.pi-wrapper__align-items--start {
      align-items: start;
    }
    &.pi-wrapper__align-items--center {
      align-items: center;
    }
    &.pi-wrapper__align-items--end {
      align-items: end;
    }
    // Align self
    &.pi-wrapper__align-self--start {
      align-self: start;
    }
    &.pi-wrapper__align-self--center {
      align-self: center;
    }
    &.pi-wrapper__align-self--end {
      align-self: end;
    }
    // Grid Half
    &.pi-wrapper__grid--half {
      grid-gap: var(--pi-spacing-x-large);
      // Fill
      &.pi-wrapper__fill--fit-content {
        width: fit-content;
      }
      &.pi-wrapper__fill--fill-available {
        width: -webkit-fill-available;
      }

      // Mobile
      @media screen and (max-width: 40rem) {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);
      }
      // Tablet & Dektop
      @media screen and (min-width: 40rem) {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    // Grid Four
    &.pi-wrapper__grid--four {
      justify-items: center;
      &.pi-wrapper__fill--fill-available {
        width: -webkit-fill-available;
        & > *:nth-child(n + 1) {
          width: -webkit-fill-available;
        }
      }
      // Mobile
      @media screen and (max-width: 40rem) {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);
      }
      &:not(.is-responsive) {
        // Tablet & Desktop
        @media screen and (min-width: 40rem) {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      &.is-responsive {
        // Tablet
        @media screen and (min-width: 40rem) and (max-width: 77.5rem) {
          grid-template-columns: repeat(2, 1fr);
        }
        // Desktop
        @media screen and (min-width: 77.5rem) {
          grid-template-columns: repeat(4, 1fr);
        }
      }
      // Gap
      &.pi-wrapper__gap-l {
        grid-gap: var(--pi-spacing-large);
      }
      &.pi-wrapper__gap-x-l {
        grid-gap: var(--pi-spacing-x-large);
      }
      &.pi-wrapper__gap-xx-l {
        grid-gap: var(--pi-spacing-xx-large);
      }
      &.pi-wrapper__gap-xxx-l {
        grid-gap: var(--pi-spacing-xxx-large);
      }
      &.pi-wrapper__gap-xxxx-l {
        grid-gap: var(--pi-spacing-xxxx-large);
      }

      & > *:nth-child(1) {
        grid-area: item1;
      }
      & > *:nth-child(2) {
        grid-area: item2;
      }
      & > *:nth-child(3) {
        grid-area: item3;
      }
      & > *:nth-child(4) {
        grid-area: item4;
      }

      // 1fr 1fr
      // 1fr 1fr
      &.pi-wrapper__grid--four-1-1-1-1 {
        // Mobile
        @media screen and (max-width: 40rem) {
          grid-template-areas:
            'item1'
            'item2'
            'item3'
            'item4';
        }

        &:not(.is-responsive) {
          // Tablet & Desktop
          @media screen and (min-width: 40rem) {
            grid-template-areas:
              'item1 item2'
              'item3 item4';
          }
        }
        &.is-responsive {
          // Tablet
          @media screen and (min-width: 40rem) and (max-width: 77.5rem) {
            grid-template-areas:
              'item1 item2'
              'item3 item4';
          }
          // Desktop
          @media screen and (min-width: 77.5rem) {
            grid-template-areas: 'item1 item2 item3 item4';
          }
        }
      }
      // . 1fr
      // 1fr 1fr
      &.pi-wrapper__grid--four-0-1-1-1 {
        // Mobile
        @media screen and (max-width: 40rem) {
          grid-template-areas:
            '.'
            'item1'
            'item2'
            'item3';
        }

        &:not(.is-responsive) {
          // Tablet & Desktop
          @media screen and (min-width: 40rem) {
            grid-template-areas:
              '. item1'
              'item2 item3';
          }
        }
        &.is-responsive {
          // Tablet
          @media screen and (min-width: 40rem) and (max-width: 77.5rem) {
            grid-template-areas:
              '. item1'
              'item2 item3';
          }
          // Desktop
          @media screen and (min-width: 77.5rem) {
            grid-template-areas: '. item1 item2 item3';
          }
        }
      }
      // 1fr .
      // 1fr 1fr
      &.pi-wrapper__grid--four-1-0-1-1 {
        // Mobile
        @media screen and (max-width: 40rem) {
          grid-template-areas:
            'item1'
            '.'
            'item2'
            'item3';
        }

        &:not(.is-responsive) {
          // Tablet & Desktop
          @media screen and (min-width: 40rem) {
            grid-template-areas:
              'item1 .'
              'item2 item3';
          }
        }
        &.is-responsive {
          // Tablet
          @media screen and (min-width: 40rem) and (max-width: 77.5rem) {
            grid-template-areas:
              'item1 .'
              'item2 item3';
          }
          // Desktop
          @media screen and (min-width: 77.5rem) {
            grid-template-areas: 'item1 . item2 item3';
          }
        }
      }
      // 1fr 1fr
      // . 1fr
      &.pi-wrapper__grid--four-1-1-0-1 {
        // Mobile
        @media screen and (max-width: 40rem) {
          grid-template-areas:
            'item1'
            'item2'
            '.'
            'item3';
        }

        &:not(.is-responsive) {
          // Tablet & Desktop
          @media screen and (min-width: 40rem) {
            grid-template-areas:
              'item1 item2'
              '. item3';
          }
        }
        &.is-responsive {
          // Tablet
          @media screen and (min-width: 40rem) and (max-width: 77.5rem) {
            grid-template-areas:
              'item1 item2'
              '. item3';
          }
          // Desktop
          @media screen and (min-width: 77.5rem) {
            grid-template-areas: 'item1 item2 . item3';
          }
        }
      }
      // 1fr 1fr
      // 1fr .
      &.pi-wrapper__grid--four-1-1-1-0 {
        // Mobile
        @media screen and (max-width: 40rem) {
          grid-template-areas:
            'item1'
            'item2'
            'item3'
            '.';
        }

        &:not(.is-responsive) {
          // Tablet & Desktop
          @media screen and (min-width: 40rem) {
            grid-template-areas:
              'item1 item2'
              'item3 .';
          }
        }
        &.is-responsive {
          // Tablet
          @media screen and (min-width: 40rem) and (max-width: 77.5rem) {
            grid-template-areas:
              'item1 item2'
              'item3 .';
          }
          // Desktop
          @media screen and (min-width: 77.5rem) {
            grid-template-areas: 'item1 item2 item3 .';
          }
        }
      }
    }
    &.pi-wrapper__max-width--full-width {
      // Desktop S
      @media screen and (min-width: 77.5rem) and (max-width: 90rem) {
        max-width: var(--pi-website-width-container-s);
      }
      // Desktop M
      @media screen and (min-width: 90rem) and (max-width: 120rem) {
        max-width: var(--pi-website-width-container);
      }
      // Desktop L
      @media screen and (min-width: 120rem) {
        max-width: var(--pi-website-width-container-l);
      }
    }

    &.pi-wrapper__fill--fill-available {
      width: -webkit-fill-available;
    }

    // 3
    &.pi-wrapper__grid--columns-3 {
      // Is Responsive
      &.is-responsive {
        // Mobile S
        @media screen and (max-width: 62rem) {
          grid-template-columns: repeat(1, 1fr);
        }
        // Tablet & Desktop S
        @media screen and (min-width: 62rem) and (max-width: 77.5rem) {
          grid-template-columns: repeat(2, 1fr);
        }
        // Tablet & Desktop
        @media screen and (min-width: 77.5rem) {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      // NOT Is Responsive
      &:not(.is-responsive) {
        grid-template-columns: repeat(3, 1fr);
      }
    }
    // 4
    &.pi-wrapper__grid--columns-4 {
      // Is Responsive
      &.is-responsive {
        // Mobile
        @media screen and (max-width: 40rem) {
          grid-template-columns: repeat(1, 1fr);
        }
        // Tablet S
        @media screen and (min-width: 40rem) and (max-width: 62rem) {
          grid-template-columns: repeat(2, 1fr);
        }
        // Tablet L
        @media screen and (min-width: 62rem) and (min-width: 77.5rem) {
          grid-template-columns: repeat(4, 1fr);
        }
        // Desktop
        @media screen and (min-width: 77.5rem) {
          width: 25%;
        }
      }
      // NOT Is Responsive
      &:not(.is-responsive) {
        grid-template-columns: repeat(4, 1fr);
      }
    }
    // 5
    &.pi-wrapper__grid--columns-5 {
      // Is Responsive
      &.is-responsive {
        // Mobile
        @media screen and (max-width: 40rem) {
          grid-template-columns: repeat(2, 1fr);
        }
        // Tablet S
        @media screen and (min-width: 40rem) and (max-width: 62rem) {
          grid-template-columns: repeat(3, 1fr);
        }
        // Tablet L & Desktop
        @media screen and (min-width: 62rem) {
          grid-template-columns: repeat(5, 1fr);
        }
      }
      // NOT Is Responsive
      &:not(.is-responsive) {
        grid-template-columns: repeat(5, 1fr);
      }
    }
    // 6
    &.pi-wrapper__grid--columns-6 {
      // Is Responsive
      &.is-responsive {
        // Mobile
        @media screen and (max-width: 40rem) {
          grid-template-columns: repeat(2, 1fr);
        }
        // Tablet
        @media screen and (min-width: 40rem) and (max-width: 77.5rem) {
          grid-template-columns: repeat(3, 1fr);
        }
        // Desktop
        @media screen and (min-width: 77.5rem) {
          grid-template-columns: repeat(6, 1fr);
        }
      }
      // NOT Is Responsive
      &:not(.is-responsive) {
        grid-template-columns: repeat(6, 1fr);
      }
    }
    // 7
    &.pi-wrapper__grid--columns-7 {
      // Is Responsive
      &.is-responsive {
        // Mobile
        @media screen and (max-width: 40rem) {
          grid-template-columns: repeat(2, 1fr);
        }
        // Tablet S
        @media screen and (min-width: 40rem) and (max-width: 62rem) {
          grid-template-columns: repeat(3, 1fr);
        }
        // Tablet L & Desktop
        @media screen and (min-width: 62rem) and (max-width: 77.5rem) {
          grid-template-columns: repeat(4, 1fr);
        }
        // Tablet L & Desktop
        @media screen and (min-width: 77.5rem) {
          grid-template-columns: repeat(7, 1fr);
        }
      }
      // NOT Is Responsive
      &:not(.is-responsive) {
        grid-template-columns: repeat(7, 1fr);
      }
    }
    // 8
    &.pi-wrapper__grid--columns-8 {
      // Is Responsive
      &.is-responsive {
        // Mobile
        @media screen and (max-width: 40rem) {
          grid-template-columns: repeat(2, 1fr);
        }
        // Tablet S
        @media screen and (min-width: 40rem) and (max-width: 62rem) {
          grid-template-columns: repeat(4, 1fr);
        }
        // Tablet L & Desktop
        @media screen and (min-width: 62rem) and (max-width: 77.5rem) {
          grid-template-columns: repeat(6, 1fr);
        }
        // Tablet L & Desktop
        @media screen and (min-width: 77.5rem) {
          grid-template-columns: repeat(8, 1fr);
        }
      }
      // NOT Is Responsive
      &:not(.is-responsive) {
        grid-template-columns: repeat(8, 1fr);
      }
    }
    // Justify
    // Center
    &.pi-wrapper__justify-items--center {
      justify-items: center;
    }
    // End
    &.pi-wrapper__justify-items--end {
      justify-items: end;
    }
  }
}

html {
  // Mobile & Tablet
  &:not(.is-desktop) {
    // Small device
    @media screen and (max-width: 62rem) {
      // 2 cols
      @include gridWrapper2Columns;
    }
  }

  // Tablet & Desktop
  &:not(.is-mobile) {
    // Large device
    @media screen and (min-width: 62rem) {
      // 2 cols
      @include gridWrapper2Columns(2);
      @include gridWrapperColmnsWidths;
    }
  }
}