* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
	
	font-size: 16px;
}

img {
	width: 100%;
	height: 100%;
	
}

a {
	text-decoration: none;
}

.contenedor {
	width: 90%;
	max-width: 75em;
	margin: 1.25em auto;
	display: grid;
	grid-gap: 1.25em;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(4, auto);
	grid-template-areas:
		'header			header   	header'
		'destacado		destacado 	destacado'
		'contenido		contenido 	aside'
		'footer	 		footer 		footer';
}

/* ---------- HEADER ----------*/
.header {
	grid-area: header;
	padding: 1.25em;
	background: #fff;
	box-shadow: 0px 0px 70px rgba(102, 102, 102, 0.2);
}

.header .logo {
	margin-bottom: 1.25em;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 3px;
}

.logo h1 {
	font-size: 1.875em;
}

.logo .iniciales-logo {
	padding: 0.31em;
	border: 2px solid #000;
	display: inline-block;
	font-size: 1em;
	margin-bottom: 0.93em;
}

.menu {
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	display: flex;
	justify-content: space-between;
}

.menu a {
	padding: 0.625em;
	color: #000;
	display: block;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 400;
	width: 100%;
	text-align: center;
	transition: 0.2s ease all;
	font-size: 1em;
}

.menu a:hover {
	background: #000;
	color: #fff;
}

/* ---------- Articulos ----------*/
.articulo {
	display: flex;
	background: #fff;
	box-shadow: 0px 0px 70px rgba(102, 102, 102, 0.2);
}

.articulo .contenedor-texto {
	padding: 1.25em;
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
}

.articulo .contenedor-thumbnail {
	width: 50%;
}

.articulo .titulo {
	margin-bottom: 0.625rem;
	font-size: 1.56em;
}

.articulo .titulo a {
	font-weight: 400;
	color: #000;
}

.articulo .fecha {
	font-size: 1em;
	color: #868b8d;
	margin-bottom: 0.625em;
}

.articulo .extracto {
	font-size: 1.25em; 
	line-height: 1.56rem; 
	font-weight: 300;
	margin-bottom: 1.25rem; 
	color: black;
}

/* ---------- Articulo Destacado ----------*/
.articulo.destacado {
	grid-area: destacado;
	color: white;
	background-color: white;
	box-shadow: 0px 0px 70px rgba(102, 102, 102, 0.2);

	display: grid;
	grid-template-columns: 1fr ;
}

.articulo.destacado .contenedor-thumbnail {
	min-height: 100%;
	width: 100%;
}

.articulo.destacado .contenedor-thumbnail a {
	display: inline-block;
	width: 100%;
	height: 100%;
}

.destacado .titulo a {
	color: #fff;
}

.destacado .titulo::after {
	content: '';
	margin: 0.625em 0; 
	display: block;
	background-color: #868686;
	width: 6em; 
	height: 1px;
}

.btn-link {
	color: #fff;
	cursor: pointer;
	display: inline-block;
	padding: 0.625em; 
	background-color: #262626;
	font-size: 1em; 
	text-transform: uppercase;
	letter-spacing: 1px;
	align-self: flex-end;
}

.btn-link:hover {
	background: #000;
	text-decoration: none;
}

/*---------- CONTENIDO ----------*/
.contenido {
	grid-area: contenido;
	display: grid;
	grid-template-columns: 1;
	grid-gap: 1.25rem; 
}

/*---------- SIDEBAR ----------*/
.sidebar {
	padding: 5em 1.56em; 
	text-align: center;
	min-height: 6.25rem; 
	grid-area: aside;
	background: #000;
	color: #868b8d;
	box-shadow: 0px 0px 70px rgba(102, 102, 102, 0.2);
}

.sidebar .acerca-de img {
	border-radius: 100%;
	height: 10em; 
	width: 10em; 
	margin-bottom: 1.56em; 
}

.sidebar .bio {
	margin-bottom: 1.56em; 
	font-size: 1.25em; 
	line-height: 1.56em; 
}

.sidebar .menu {
	width: 100%;
	display: inline-block;
	background: #ccc;
}

.sidebar .menu a {
	padding: 1.56em; 
	color: #fff;
	background-color: #000;
	display: block;
	font-size: 1em;
	text-transform: uppercase;
}

.sidebar .menu a:hover {
	background: #262626;
}

/*---------- FOOTER ----------*/
.contenedor .footer {
	background: #fff;
	font-size: 1.25em; 
	grid-area: footer;
	padding: 1.56em; 
	text-align: right;
	box-shadow: 0px 0px 70px rgba(102, 102, 102, 0.2);
}
/*  dispositivos de escritorio        */
@media (max-width: 1500px){
	
	

		body {
		font-size: 14px;
	}

}
/*  dispositivos de escritorio        */
@media (max-width: 992px){

	body {
		font-size: 15px;
	}

	.contenedor {
		
		grid-template-areas:
			'header			header   	header'
			'destacado		destacado 	destacado'
			'contenido		contenido 	contenido'
			'aside			aside 	    	aside'
			'footer	 		footer 		footer';
	}

}
/*  para tablets       */
@media (max-width: 768px){

	.articulo.destacado {
		
		grid-template-columns:  1fr ;
	}

	.articulo.destacado .contenedor-thumbnail {
		height: 16em;
	}

}
/*  dispositivos moviles         */
@media (max-width: 576px){

	body {
		font-size: 12px;
		
	}

}

@media (max-width: 480px){

	body {
		font-size: 12px;
		
	}
	img {
		width: 100%;
		height: 100%;
		
	}
.contenedor-thumbnail img{
	width: 100%;
		height: 100%;
		object-fit: contain;
}
}