.container {

    display: grid;

    align-items: center;
    grid-gap: 20px;
    
        grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));

    grid-auto-rows: minmax (150px, 1fr);

    justify-content: space-around;
    align-content: stretch;
    grid-auto-flow: dense;
    
    justify-items: center;
    
    align-items: start;
}

.inset {
    border-style: inset;
    border-width: 5px;
    border-radius: 10px 10px 10px 10px;
    border-spacing: 20px 10px;
    border-color: #0088cc;
	width: 100%;
	height: 100%;
	a:hover {
		border-style: outset;
	};
}



.outset {
    border-style: outset;
    border-width: 5px;
    border-radius: 10px 10px 10px 10px;
    border-spacing: 20px 10px;
    border-color: #0088cc;
	width: 100%;
	height: 100%;
	.a:hover {
		border-style: inset;
	}
}

.small {
	grid-column: span 1;
}

.horizontal {
	grid-column: span 3;
}


.vertical {
	grid-row: span 2;
}

.medium {
	grid-column: span 2;
	grid-row: span 2;
}

.big {
	grid-column: span 3;
	grid-row: span 2;
}


.huge {
	grid-column: span 4;
	grid-row: span 4;
}


.info {
    display: grid;

    align-items: center;
    grid-gap: 20px;

    grid-template-columns: 60px 60px;

    grid-template-rows: 60px;

    justify-content: space-around;
    align-content: stretch;
    justify-items: center;
    align-items: start;
}

.details {
	font-size: 80%;
}