@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

::view-transition-new(form) {
  animation: slide-in-right 0.5s ease forwards;
}

.hero {
  container: hero / inline-size;

  inner-wrapper {
    padding-block: var(--sp-160-80);

    h2 {
      margin-block-start: var(--sp-16-8);
    }

    form-wrapper {
      display: grid;
      grid-template-columns: 4fr 3fr 5fr;
      grid-template-areas: "picture . form";
      margin-block-start: var(--sp-120-80);

      picture {
        grid-area: picture;
      }

      form {
        grid-area: form;
        display: flex;
        flex-direction: column;
        row-gap: var(--sp-40);
        view-transition-name: form;


        form-field {
          display: flex;
          flex-direction: column;

          input,
          select,
          textarea {
            padding-block: var(--sp-12);
            border: none;
            border-block-end: var(--border);
            border-color: var(--white-shade-28);
            transition: border-color 0.3s ease-in-out;
          }

          select-wrapper {
            position: relative;

            select {
              appearance: none;
              width: 100%;
            }

            svg {
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              right: 0;
              pointer-events: none;
            }
          }

          textarea {
            field-sizing: content;
          }

          *::placeholder,
          select:has(option:disabled:checked) {
            transition: border-color 0.3s ease-in-out;
            /* color: var(--white-shade-28); */
          }

          *:focus {
            outline: none;
            border-color: var(--black);
          }
        }
      }
    }

    @container (inline-size < 43.75rem) {
      form-wrapper {
        grid-template-columns: 1fr;
        grid-template-areas:
          "picture"
          "form";
        row-gap: var(--sp-80);
      }
    }
  }
}