:root {
    --ff-primary: basic-sans, sans-serif;
    --clr-primary: #1a0631;
    --clr-body: #333;
    --clr-bg: #ddd;
    --spacer: 1rem;

    --columns: 3; 
    --gap: 1em;
}

/* For presentation only */
* {
	box-sizing: border-box;
}

body {
	padding: 2rem;
	margin: 0;
	font-family: 'Lato', sans-serif;
	counter-reset: bricks;
	line-height: 1.5;
	background-color: #1e1f26;
	color: #1e1f26;
}

img {
    max-width: 100%;
    border-radius: 15px;
}
.taller.longer img{
	width: 10vh;
	height: 10vh;
}

h2 {
    /* margin: 3rem 0; */
    text-align: center;
    /* font-size: clamp(2rem, 1rem + 3vw, 6rem); */
    font-weight: 900;
    line-height: 1;
    opacity: 0.9;
    font-family: var(--ff-primary);
    /* min-height: 100vh; */
    font-size: 1.7rem;
    line-height: 1.6;
    color: var(--clr-primary);
    /* background: var(--clr-bg); */
}

.grid-item {
	margin-bottom: 1rem;
}

.grid-item {
	background-color: #fff;
	/* display: flex; */
	align-items: center;
	justify-content: center;
	position: relative;
	/* border-radius: 3px; */
	text-align: center;
	border-radius: 15px;
    padding: .5rem;
	border-style: outset;
    outline: 2px outset #ccc;
	overflow: hidden;

	&::before {
		/* counter-increment: bricks;
		content: counter(bricks);
		position: absolute;
		top: 0;
		left: 0;
		background-color: #ff2c6d;
		width: 1.5rem;
		height: 1.5rem;
		color: #fff;
		text-align: center;
		line-height: 1.5rem;
		font-size: 80%;
		border-radius: 3px 0; */
	}
	

    /* border-width: 0.5rem; */
    /* border-color: #555; */
    
}

/* Masonry */
/* @media screen and (min-width: 768px) { */
.grid {
	display: grid;
	/* grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); */
	/* grid-template-columns: repeat(auto-fill, minmax(var(--columns), 1fr)); */
	grid-template-columns: repeat(var(--columns), 1fr);
	/* TODO: This line screws up the article form */
	grid-auto-rows: 4rem;
	grid-gap: var(--gap);
}

.grid-item {
	margin: 0;
}
/* } */
 .grid section article{

 }

 .grid > * {
    break-inside: avoid;
	/* TODO: take this extra space out */
    /* margin-bottom: var(--gap); */
}




/* ***************************** */

.short {
	grid-row: span 2;
}

.tall {
	grid-row: span 3;
}

.taller {
	grid-row: span 4;
}
.longer{
    grid-column: span 2;
}

.tallest {
	grid-row: span 5;
}