:root {
  --page-width: 90vw;
}

.form-with-image {
  display: block;
  background: #f9f9f9;

  .form-with-image__container {
    max-width: var(--page-width);
    width: 100%;
    margin: 0 auto;
    padding: 4rem 0rem;

    @media screen and (min-width: 768px) {
      max-width: calc(var(--page-width) * 0.9);
    }
  }

  .form-with-image__header {
    text-align: center;
    margin-bottom: clamp(2.4rem, 1.833vw, 4rem);
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;

    .form-with-image__title {
      color: #1A1C1D;
      font-size: 2rem;
      font-style: normal;
      font-weight: 600;
      line-height: 1.2;
      margin-bottom: 1.6rem;

      @media screen and (min-width: 768px) {
        font-size: clamp(2.4rem, 0.833vw, 3.2rem);
      }
    }

    .form-with-image__subtitle {
      color: #2C2D2E;
      font-size: 1.2rem;
      font-style: normal;
      font-weight: 400;
      line-height: 1.5;

      @media screen and (min-width: 768px) {
        font-size: clamp(1.5rem, 0.833vw, 2rem);
      }
    }
  }

  .form-with-image__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 2.08vw, 4rem);
    width: 100%;

    @media screen and (min-width: 768px) {
      grid-template-columns: 1fr 1fr;
      gap: clamp(2rem, 3.125vw, 6rem);
    }
  }

  .form-with-image__col {
    width: 100%;
  }

  .form-with-image__image-wrapper {
    width: 100%;
    height: 100%;
    min-height: 30rem;

    .form-with-image__image {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      border-radius: 0.8rem;
    }
  }

  .form-with-image__form-wrapper {
    width: 100%;
    height: 100%;
    background: #f9f9f9;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
}