.order {
   height: 600px;
   display: grid;
   scroll-margin-top: var(--scrollmargin);
   grid-template-columns: 1fr 1fr;
   grid-template-areas: "title form";
}

.order > * {
   padding: 40px;
}

.order-content-title {
   grid-area: title;
   color: white;
   text-align: right;
   background-color: rgb(167, 145, 109);
   margin: 0;
   display: flex;
   font-size: 64px;
   align-items: center;
   justify-content: end;
}

.order-content-title > p {
   max-width: 600px;
}

.order-content-form {
   grid-area: form;
   display: flex;
   flex-direction: column;
   gap: 40px;
   background-color: rgb(128, 111, 84);
   justify-content: center;
   /* align-items: center; */
}

.order-content-form-input {
   max-width: 481px;
   min-width: 300px;
   width: 100%;
   height: 70px;
   font-size: 36px;
   font-family: inherit;
   box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.25);
   border: none;
   border-radius: 20px;
   background: rgba(0, 0, 0, 0.5);
   text-indent: 30px;
   color: white;
}

.order-content-form-input:focus {
   outline-color: 5px red;
}

.order-content-form-input::placeholder {
   color: rgb(224, 224, 224);
}

.order-content-form-button {
   width: 100%;
   max-width: 481px;
   background: #bd9f68;
}

@media screen and (max-width: 1400px) {
   .order-content-title {
      font-size: 54px;
   }
}

@media screen and (max-width: 1000px) {
   .order {
      height: unset;
      grid-template-columns: 1fr;
      grid-template-rows: auto 1fr;
      grid-template-areas:
         "title"
         "form";
   }

   .order > * {
      padding: 40px 20px;
   }

   .order-content-title {
      justify-content: center;
      font-size: 48px;
      text-align: center;
      filter: unset;
   }

   .order-content-form {
      align-items: center;
   }
}

@media screen and (max-width: 600px) {
   .order-content-title {
      font-size: 38px;
   }

   .order-content-form {
      gap: 20px;
   }

   .order-content-form-input {
      height: 70px;
      font-size: 32px;
   }
}