:root {
--background: #3C343D;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.background {
background-color: var(--background);
display: grid;
place-items: center;
height: 100vh;
}
.gallery {
display: flex;
flex-wrap: wrap;
gap: 16px;
max-width: 800px;
}
.card {
position: relative;
left: 0px;
width: 80px;
border-radius: 16px;
height: 360px;
overflow: hidden;
background-color: var(--background);
transition: 0.4s ease-in-out;
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.5);
flex: 0.25;
}
.card img {
height: 360px;
}
.card:hover {
flex: 2;
font-weight: bold;
cursor: pointer;
border-radius: 8px;
}