:root {
    --font: 'Courier', mono;
    --primary: #454545;
	--bg: #E3E3E3;
    --radius: 8px;
    --size: 18px;
	--spacer: 2rem;
}

/*-----------------------------------------------------------------------------------*/
/*Main*/
/*-----------------------------------------------------------------------------------*/
body, html {
	font-family: var(--font);
	background: var(--bg);
	padding: 1rem;
	margin: 0;
	color: var(--primary);
	font-size: var(--size);
	line-height: 1.5;
}
figure {
	margin: 0;
}
img {
    width: 100%;
    height: auto;
	border: 1px solid var(--primary);
    border-radius: var(--radius);
}
a {
	color: var(--primary);
}
hr {
	background: var(--primary);
	height: 1px;
	border: 0;
	outline: 0;
}

nav ul {
	padding-left: 0;
}
/*-----------------------------------------------------------------------------------*/
/*Grid*/
/*-----------------------------------------------------------------------------------*/	    
@media screen and (min-width: 780px) {
	.flex {
		display: flex;
		align-items: center;
		justify-content: space-between
	}
	.flex--main {
		display: flex;
		gap: 1rem
	}
	.row {
		column-gap: var(--spacer);
		column-rule: none;
	}
	.row-2 {
		column-count: 2;
	}
	.row-3 {
		column-count: 3;
	}

}
.container {
    margin: 0 auto;
    max-width: 890px;
}
/*-----------------------------------------------------------------------------------*/
/*Modules*/
/*-----------------------------------------------------------------------------------*/	    
.card {
	border: 1px solid var(--primary);
	border-radius: var(--radius);
	padding: var(--spacer);
	margin-bottom: 1rem;
	break-inside: avoid-column;
}
.btn {
	background: var(--primary);
	color: var(--bg);
	border-radius: var(--radius);
	cursor: pointer;
	padding: var(--spacer);
	text-align: center;
}
/*-----------------------------------------------------------------------------------*/
/*Heroe*/
/*-----------------------------------------------------------------------------------*/	    
@media screen and (min-width: 780px) {
	.heroe {
		gap: var(--spacer)
	}
	.heroe-img {
		max-width: 300px;
	}
}