/*
salvattore.js by Rolando Murillo and Giorgio Leveroni – http://salvattore.com
Note: won’t play well with @import & @media-queries only work on server.
*/

a:hover img {
	opacity: 0.5;
}

strong.caption {
	display: block;
	height: 0;
	position: relative;
	top: -3em;
	text-align: center;
	text-transform: uppercase;
	opacity: 0;
}
a:hover strong.caption {
	opacity: 1;
}

/* These are the classes that are going to be applied: */

.column {
	float: left;
	}

.column div.list_item {
	margin: 1em 0.5em; /* journal, list view */
}

.size-1of1 {
	width: 100%;
}
.size-1of2 {
	width: 50%;
}
.size-1of3 {
	width: 33.2%; /* fallback */
  	width: calc(100%/3);
}

@media screen and (max-width: 480px){
	#grid[data-columns]::before {
		content: '1 .column.size-1of1';
	}
	.column div.list_item {
	margin: 1em 0; /* journal, list view */
	}
}

@media screen and (min-width: 481px) and (max-width: 768px) {
	#grid[data-columns]::before {
		content: '2 .column.size-1of2';
	}
}
@media screen and (min-width: 769px) {
	#grid[data-columns]::before {
		content: '3 .column.size-1of3';
	}
}