@import "variables";
@import "mixins";

section.page-404 {
  .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: (6rem * 1.6);
    grid-auto-flow: row;

    padding: (6rem * 1.6) (2rem * 1.6);

    & > div {
      display: flex;
      flex-direction: column;
      justify-content: center;

      &.left {
        align-items: flex-end;
        p {
          margin-bottom: (4rem * 1.6);
        }
        h1 {
          font-size: $fs-h1;
        }
      }
      &.right {
        align-items: flex-start;
      }
    }

    @include bp("md") {
      grid-template-columns: 1fr;
      & > div {
        &.left {
          align-items: center;
        }
        &.right {
          display: none;
        }
      }
    }

    @include bp("sm") {
      .button {
        width: 100%;
        text-align: center;
      }
    }
  }
}
