No se porque la primera columna aparece más baja que las demás columnas
Código HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
<meta charset="UTF-8">
<title></title>
<style>
body{font-family:'Noto Sans'; margin:;}
.flex{display:flex}
.column{flex-direction:column}
figure{box-shadow:0 1px 2px grey;}
figure>img{max-width:100%;}
figure>figcaption{padding:1em;}
</style>
</head>
<body>
<main style="columns:300px 4; padding:0;">
<figure class="flex column">
<img src="https://i.blogs.es/6ea275/wwii/1024_682.jpg" alt="">
<figcaption>Bienvenidos a la era del videojuego que ocupa 100 GB en disco</figcaption>
</figure>
<figure class="flex column">
<img src="https://i.blogs.es/6ea275/wwii/1024_682.jpg" alt="">
<figcaption>Bienvenidos a la era del videojuego que ocupa 100 GB en disco</figcaption>
</figure>
</main>
</body>
</html>