.home {
  color: $color-beta;
  display: flex;
  flex-direction: column;
  margin-top: rem(20px);

  a {
    color: inherit;
    word-break: break-word;

    &:after {
      @include tra;
      content: '→';
      display: inline-block;
      margin-left: rem(10px);
      transform: rotate(-270deg) scale(0);
    }

    &:hover,
    &:focus {
      &:after {
        transform: rotate(0deg) scale(1);
      }
    }
  }

  @supports (display: grid) {
    display: grid;
    grid-row-gap: rem(30px);
    grid-template-columns: repeat(3, minmax(auto, 1fr));
    grid-template-rows: repeat(4, 1fr);
  }
}

.home__box {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-end;
  padding: rem(40px) rem(20px) rem(20px);
  // min-height: 200px;

  &:not(:last-of-type) {
    margin-bottom: rem(30px);
  }

  &:nth-of-type(odd) {
    background-image: bg-v();

    @supports (display: grid) {
      grid-column: 1 / span 2;
    }
  }

  &:nth-of-type(even) {
    background-image: bg-v($color-gamma);

    @supports (display: grid) {
      grid-column: 2 / span 2;
    }
  }

  h1,
  h3 {
    @include ls(100);
  }

  p {
    @include ls(50);
    margin-bottom: 0;
    margin-top: 0;
  }

  ul {
    margin: 0;
  }

  @supports (display: grid) {
    min-height: unset;

    &:not(:last-of-type) {
      margin-bottom: unset;
    }
  }

  @supports (display: grid) {
    @for $i from 1 through 6 {
      &:nth-of-type(#{$i}) {
        grid-row: #{$i};
      }
    }
  }
}