Help with grid

<div className="header ">
  <div className="logo ">
      <p>Cine Spectrum</p> 
   </div>

   <div className="nav_links_mobile ">
       <Link to="/Home"  ><AiOutlineHome /></Link>
      <Link to="/movies"><BiMoviePlay /></Link>
      <Link to="/tvshows"><RiComputerLine /></Link>
    </div>

    <div className="search flex">
        <BiSearch className="cursor-pointer" />
     </div>
</div >

@media (max-width :400px) {

    .header {
        display: grid !important;
        grid-template-areas:
            "logo logo"
            "nav_links_mobile search";
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);


    }

}