/* ============================================================
	HOME PAGE -- Photo Grid w/one column for small viewports, 3 cols for larger
==============================================================*/	

/* Home Page Photo Grid */
.photo-grid {
	background: transparent;
    display: grid;							
    grid-template-columns: 1fr;         /* One column for mobile first */
    gap: 1.25rem;                       		/* Equivalent to 20px */
    padding: 1.25rem;                   	/* Equivalent to 20px */
	max-width: 100%;                   	/* Equivalent to 1024px */

    margin: 0 auto;	

    /* Targets viewports bigger than 480px (starts at 481px) and makes it a 3 col layout */
    @media (min-width: 481px) {
        grid-template-columns: repeat(3, 1fr); /* Switches to 3 columns */
		/*background: red;*/
    }
}

/* Blocks holding thumb and links to pages */
.grid-item {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 4px;
}

.photo-grid img {
    border: 2px solid black;
}

.caption {
    font-size: 0.95rem;
    line-height: 1.4;
    color: #444;
    margin-top: 0.5em;
}

/* Styles our text links to photo folders */
.photo-grid a{
	font-size: 1.3em;
	color: #444;
}

.photo-grid a:hover{
	font-size: 1.3em;
	color: #600;
}