.preview-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	grid-auto-rows: 360px;
}

.page-preview-container {
	width: 100%;
	height: 100%;
	
	position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
	
	--tile-width: 380px;
	--tile-height: 330px;
	
	--bg-normal: var(--color-surface-1);
	--bg-hover: var(--color-surface-3);
}

.page-preview {
	width: var(--tile-width);
	height: var(--tile-height);
	display: inline-block;
	
	background-color: var(--bg-normal);
	border: 1px solid #444;
	
  	transition: width .3s, height .3s, background-color .3s;
	
  	position: absolute;
}

.page-preview:hover {	
	width: calc(var(--tile-width) * 1.2);
	height: calc(var(--tile-height) * 1.2);
	
	z-index: 1000;
	background-color: var(--bg-hover);
}

.page-preview {
	img {
		width: 100%;
		height: 65%;
		object-fit: cover;
	}
	
	a {
		position: absolute;
		height: 100%;
		width: 100%;
	}
	
	span {
		display: inline-block;
		width: 100%;
		padding: 5px 10px 0px;
		
		overflow: hidden;
		white-space: nowrap;    
		text-overflow: ellipsis;
	}
	
	.preview-title {
		font-size: larger;
		font-weight: bold;
	}
}