Estoy haciendo una página web de viajes, estoy necesitando hacer una grid con imagenes como muestro en la imagen, las 3 imagenes del lado derecho tienen las mismas dimensiones, y las dos del lado izquierdo también son iguales entre sí. Adjunto una imagen de como debería quedar y mi código.
body {
font-family: Montserrat,sans-serif;
margin: auto;
padding: 0;
width: 80%;
}
.text-image {
font-weight: bold;
}
.subtitle {
font-size: 15px;
}
.subtitle-description {
font-size: 12px;
}
header {
display: flex;
justify-content: space-between;
background-color: rgba(0,0,0,0.1);
}
.logo-img{
padding-left: 50px;
}
/*Barra de navegación*/
.nav-bar {
list-style: none;
display: flex;
flex: auto;
padding-right: 40px;
}
.nav-bar__link, .nav-bar__link-active {
text-decoration: none;
margin-right: 10px;
color: rgba(0,0,0, 0.2);
}
.nav-bar__link-active {
color: black;
}
.nav-bar li{
padding: 0 20px;
}
/*Foto principal*/
.principal-cover {
background-image: url(../img/Viajes_Hero.jpg);
background-size: cover;
background-repeat: no-repeat;
display: flex;
justify-content: space-around;
color: white;
height: 600px;
}
.rectangle-info{
margin-top: 200px;
}
/*Seccion Tendencias*/
.tendencies-group {
display: flex;
justify-content: space-between;
}
.tendencies-item {
font-size: 12px;
width: 355px;
height: 200px;
}
.logo-text {
font-size: 10px;
color: white;
background-color: rgba(0,0,0, 0.3);
margin-top: 300px;
padding: 0px;
width: 20%;
text-align: center;
border: dashed;
margin-bottom: 70px;
height: 120px;
}
/*Seccion Blog */
.container-blog{
margin-top: 100px;
}
.all-blog-items{
display: grid;
grid-template-columns: 700px 370px;
grid-template-rows: 430px;
}
.blog-item-big1{
border: 1px solid green;
background-image: url(../img/articulo_big_01.png);
color: white;
}
.blog-item-big2{
background-image: url(../img/articulo_big_02.png);
border: 1px solid green;
color: white;
}
.blog-item-small1{
border: 1px solid red;
}
.blog-item-small2{
border: 1px solid red;
}
.blog-item-small3{
border: 1px solid red;
}
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio Aenima</title>
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<main>
<header>
<img class="logo-img" width="90px" class="logo" src="logo/logo_01.svg" alt="Logo">
<nav>
<ul class="nav-bar">
<li>
<a class="nav-bar__link-active" href="#">HOME</a>
</li>
<li>
<a class="nav-bar__link" href="#">TENDENCIAS</a>
</li>
<li>
<a class="nav-bar__link" href="#">BLOG</a>
</li>
</ul>
</nav>
</header>
<div class="container principal-cover">
<div class="rectangle-info">
<h1 class="text-image">AMÉRICA DEL SUR</h1>
<h3 class="subtitle">Lugares maravillosos por America del Sur</h3>
<p class="subtitle-description">Estos son algunos lugares que elijen la mayoría de los turistas que<br>visitan America del Sur</p>
</div>
<div class="logo-text">
<img class="arrow-icon" src="iconos/arrow.svg" alt="logo">
<p class="text-red">PRÓXIMA AVENTURA</p>
<p class="text-white">Europa Meridional</p>
<p class="text-description">Forman parte veinte países <br>ej.España,Francia,etc.</p>
</div>
</div>
<div class="container-tendencies">
<h3 class="title-tendencies">TENDENCIAS</h3>
<div class="tendencies-group">
<div class="tendencies-item">
<img class="image-text" src="img/card_01.png" alt="card1">
<h3>Montañas y magia</h3>
<p>Aquí la descripción para<b>Montañas y magia</b></p>
</div>
<div class="tendencies-item">
<img src="img/card_02.png" alt="card2">
<h3>Playa y sol</h3>
<p>La descripción de <b> Playa y sol</b> debe ser esta</p>
</div>
<div class="tendencies-item">
<img src="img/card_03.png" alt="card3">
<h3>Nieve y aventura</h3>
<p>Contiene la información de <b> Nieve y aventura</b></p>
</div>
</div>
</div>
<div class="container-blog">
<h3>BLOG</h3>
<div class="all-blog-items">
<div class="blog-item-big1">
<h4>CIUDAD</h4>
<h5>Artículo de puente</h5>
<p>Un puente es una construcción que permite salvar un accidente geógrafico</p>
</div>
<div class="blog-item-big2">
<h4>AVENTURA<h4>
<h5>Artículo de aventura</h5>
<p>Lugar poblado de árboles y arbustos con una importante densidad de</p>
</div>
<div class="blog-item-small1">
<img src="img/articulo_small_01.png" alt="item1">
</div>
<div class="blog-item-small2">
<img src="img/articulo_small_02.png" alt="item2">
</div>
<div class="blog-item-small3">
<img src="img/articulo_small_03.png" alt="item3">
</div>
</div>
</div>
</main>
</body>
</html>