@use "../../assets/stylesheets/base/colors" as *;
@use "../../assets/stylesheets/abstracts/mixins" as *;

.intro {
  height: calc(100vh - 112px);
  grid-template-rows: calc(100vh - 112px - 85px - 30px) min-content;
  row-gap: unset;
  padding-top: 112px;

  .title {
    grid-column: 1/8;
    grid-row: 1/2;

    display: flex;
    flex-direction: column;
    justify-content: center;

    h1 {
      line-height: 120%;
      &.mobile {
        display: none;
      }
    }

    div {
      display: flex;

      p {
        text-transform: uppercase;
        color: $color-accent-secondary;

        &:first-child {
          margin-right: 39px;
        }

        &:last-child {
          margin-left: 34px;
        }
      }
    }
  }

  .image {
    grid-column: 5/13;
    grid-row: 1/2;
    display: flex;
    align-items: center;
    background-image: url("../../assets/images/main/intro/astronaut.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    transform: translateX(150px);
    z-index: -1;

    @media all and (max-width: 1350px) {
      transform: translateX(50px);
    }

  }
  .rocket {
    grid-column: 1/13;
    grid-row: 2/3;

    * {
      margin: 0 auto;
      width: max-content;
    }

    p {
      color: $color-text-secondary;
      margin-top: 15px;
    }
  }

  @include for-mobile {
    height: calc(100vh - 106px);
    grid-template-rows: 400px min-content;

    .title,
    .rocket,
    .image {
      grid-column: 1/7;
    }

    .image {
      grid-row: 1/2;
      transform: none;
      background-position: center;
    }

    .title {
      grid-row: 2/3;

      h1 {
        text-align: center;
        span {
          display: none;
        }

        &.mobile {
          display: block;

          white-space: nowrap;
          color: #171717;
          background-color: white;
        }
      }

      div {
        display: none;
      }
    }

    .rocket {
      display: none;
    }
  }
}
