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

body{
background:#0f172a;
color:white;
}

header{
padding:20px;
display:flex;
justify-content:space-between;
align-items:center;
background:#1e293b;
}

.search{
background:#0f172a;
border:none;
padding:10px;
color:white;
border-radius:5px;
width:220px;
}

main{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:20px;
padding:20px;
}

.movie{
background:#1e293b;
border-radius:10px;
overflow:hidden;
position:relative;
transition:transform .3s;
}

.movie:hover{
transform:scale(1.05);
}

.movie img{
width:100%;
}

.movie-info{
display:flex;
justify-content:space-between;
padding:15px;
align-items:center;
}

.movie-info h3{
font-size:16px;
}

.movie-info span{
padding:5px 8px;
border-radius:5px;
font-weight:bold;
}

.green{
color:lightgreen;
}

.orange{
color:orange;
}

.red{
color:red;
}

.overview{
position:absolute;
bottom:0;
background:white;
color:black;
padding:15px;
max-height:100%;
transform:translateY(101%);
transition:transform .3s ease-in;
font-size:14px;
}

.movie:hover .overview{
transform:translateY(0);
}