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

section.content {
  .contact-form {
    h2 {
      margin-bottom: 0;
      text-align: left;
    }
  }
}
.contact-form {
  h2 {
    grid-column: 1/6;
    grid-row: 1/2;
  }

  .success {
    margin-bottom: 16px;
    color: rgba(116, 199, 103, 1);
  }

  .error {
    margin-bottom: 16px;
    color: rgba(246, 81, 81, 1);

    a {
      color: rgba(246, 81, 81, 1);
    }
  }

  form {
    grid-column: 1/5;
    grid-row: 2/3;
    width: 100%;

    &.container {
      padding: 0;
    }

    .btn {
      grid-column: 1/10;
    }
  }

  @include for-tablets {
    form {
      padding-top: 20px;
    }
  }

  .image {
    grid-column: 6/13;
    grid-row: 1/3;
    margin-left: auto;
    display: flex;
    align-items: center;
    position: relative;

    img {
      &:first-child {
        background: linear-gradient(
            0deg,
            rgba(27, 27, 27, 0.2),
            rgba(27, 27, 27, 0.2)
          ),
          rgba(255, 255, 255, 0.01);
        box-shadow: inset 0px 2px 5px rgb(255 255 255 / 15%);
        backdrop-filter: blur(8px);
        border-radius: 33px;
      }
    }
    .planet {
      position: absolute;
      z-index: -1;

      &.blue {
        right: -133px;
      }

      &.yellow {
        left: -124px;
        top: 150px;
      }
    }
  }

  @include for-tablets {
    h2,
    form {
      grid-column: 1/7;
    }

    .image {
      grid-column: 8/13;
    }
  }

  @include for-mobile {
    h2,
    .image,
    form {
      grid-column: 1/7;

      .btn {
        grid-column: 2/6;
      }
    }
    h2 {
      grid-row: 1/2;
      text-align: center !important;
    }

    .image {
      grid-row: 2/3;
      width: 100%;
      margin-bottom: 16px;

      img {
        margin: 0 auto;
      }
    }

    form {
      grid-row: 3/4;
    }
  }
}