Upon creating a container, I included two child elements (image-container and text-container).
Within the image-container, I utilized a background image to cover the container, and established a grid container (image-grid) with four equal frames where the books will be positioned.
Subsequently, I applied margins to the second and fourth child elements:
.image-grid img:nth-child(2){
margin-top: 1rem;
}
.image-grid img:nth-child(4){
margin-top: -1rem;
}
html{
font-size: 25px;
}
img{
display: block;
max-width: 100%;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body{
min-height: 100vh;
overflow: hidden;
display: grid;
place-content: center;
margin:0;
background-color: bisque;
font-size: 20px;
}
.container{
width:20rem;
height:15rem;
background-color: whitesmoke;
box-shadow: 0 0 1rem black;
}
.image-container{
background-image: url(https://source.unsplash.com/random/400x200);
height: 70%;
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: center;
}
.image-grid{
height: 50%;
display: grid;
grid-template-columns: repeat(4,1fr);
gap:1rem;
margin-inline: 1rem;
}
.image-grid img:nth-child(2){
margin-top: 1rem;
}
.image-grid img:nth-child(4){
margin-top: -1rem;
}
.text-container{
height: 30%;
margin-block: 1rem;
margin-left: 1rem;
}
.text-container h2{
font-size: 0.7rem;
text-transform: uppercase;
text-decoration: underline;
}
.text-container p{
margin-top: 0.5rem;
font-size: 0.7rem;
}
<div class="container">
<div class="image-container">
<div class="image-grid">
<img src="https://source.unsplash.com/random/600x900" alt="book1" />
<img src="https://source.unsplash.com/random/600x900" alt="book2" />
<img src="https://source.unsplash.com/random/600x900" alt="book3" />
<img src="https://source.unsplash.com/random/600x900" alt="book4" />
</div>
</div>
<div class="text-container">
<h2>For Pachinko Fans</h2>
<p>Get Lost in your nex epic family story</p>
</div>
</div>