Помогите люди добрые!))) Как мне вот это чудо сделать в css? Мне срочно надо!

По дате

По рейтингу

fire_of_death

Мыслитель

1г

html:

12345678910111213141516171819202122232425

 <!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Галерея</title> 
    <link rel="stylesheet" href="styles.css"> 
</head> 
<body> 
    <div class="gallery"> 
        <h1>Галерея</h1> 
        <div class="picture-block"> 
            <div class="picture"> 
                <img src="https://картина1.jpg" width="-1" height="-1" alt = "false|false"/> 
                <p>Описание картины 1</p> 
            </div> 
            <div class="picture"> 
                <img src="https://картина2.jpg" width="-1" height="-1" alt = "false|false"/> 
                <p>Описание картины 2</p> 
            </div> 
        </div> 
    </div> 
</body> 
</html>

 CSS:

123456789101112131415161718192021222324252627282930313233343536373839

 body { 
    font-family: Arial, sans-serif; 
} 
 
.gallery { 
    width: 80%; 
    margin: 0 auto; 
    padding: 20px; 
    border: 1px solid #000; 
} 
 
.gallery h1 { 
    text-align: center; 
} 
 
.picture-block { 
    display: flex; 
    justify-content: space-around; 
} 
 
.picture { 
    width: 45%; 
    border: 1px solid #000; 
    padding: 10px; 
    box-sizing: border-box; 
    text-align: center; 
} 
 
.picture img { 
    max-width: 100%; 
    height: auto; 
    display: block; 
    margin: 0 auto 10px; 
} 
 
.picture p { 
    margin: 0; 
}