@import url("https://fonts.googleapis.com/css2?family=Exo:[email protected]&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  padding: 20px;

  display: grid;
  place-content: center;
}

.form__container {
  container-type: inline-size;
  overflow: hidden;
  resize: horizontal;
  min-inline-size: 200px;
  max-inline-size: 80vw;
}

.form {
  display: grid;
  font-size: 46px;
  border: 4px solid #ff5b0a;
  background-color: #fff;
  border-radius: 10rem;
  padding: 10px;
  align-items: center;
}

.icon--search,
.icon--camera {
  width: 1em;
  height: 1em;
  display: none;
}

.search {
  display: none;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 100%;
  padding: 0 5px;
  border: none;
}

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 88px;
  border: none 0;
  background-image: linear-gradient(90deg, #ff9602 0%, #ff5b0a 100%);
  border-radius: 10rem;
  color: #fff;
  font-size: 46px;
  font-weight: 700;
}

@container (min-width: 480px) {
  ::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #000;
  }
  ::-moz-placeholder {
    /* Firefox 19+ */
    color: #000;
  }
  :-ms-input-placeholder {
    /* IE 10+ */
    color: #000;
  }
  :-moz-placeholder {
    /* Firefox 18- */
    color: #000;
  }
  .form {
    grid-template-columns: min-content 1fr 200px;
    grid-template-areas: "searchIcon searchInput button";
    grid-template-rows: 88px;
    gap: 10px;
  }

  .icon--search {
    display: block;
    grid-area: searchIcon;
  }

  .search {
    grid-area: searchInput;
    display: flex;
    font-weight: 700;
  }

  .button {
    grid-area: button;
  }
}

@container (min-width: 768px) {
  ::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #b4b4b4;
  }
  ::-moz-placeholder {
    /* Firefox 19+ */
    color: #b4b4b4;
  }
  :-ms-input-placeholder {
    /* IE 10+ */
    color: #b4b4b4;
  }
  :-moz-placeholder {
    /* Firefox 18- */
    color: #b4b4b4;
  }
  .form {
    grid-template-columns: min-content 1fr min-content 200px;
    grid-template-areas: "searchIcon searchInput cameraIcon button";
    grid-template-rows: 88px;
    gap: 10px;
  }
  .icon--search {
    fill: #b4b4b4;
  }
  .search {
    color: #b4b4b4;
    font-weight: 400;
  }
  .icon--camera {
    display: block;
    grid-area: cameraIcon;
    fill: #b4b4b4;
  }
}