@media only screen and (min-width:220px) and (max-width:575px) {
    .container {
      padding:10px;
      display: grid;
      grid-template-columns:repeat(1,1fr);
      gap:20px;
    }
    header {
        padding: 10px 30px;
        /* padding: 20px 30px; */
    }
    header h1 {
      font-size:18px;
      color: #38bdf8;
    }
    header input {
      /* padding: 8px 12px; */
      border-radius: 8px;
      height:20px;
      border: none;
      outline: none;
      width: 200px;
      
    }
}
@media only screen and (min-width:576px) and (max-width:768px) {
    .container {
      padding:30px;
      display: grid;
      grid-template-columns:repeat(2,1fr);
      gap:30px;
    }
}