/* ~~~CSS Stylesheet for Olivia Cruz's Art Page~~~ */

.main {
	display: flex;
	flex-wrap: wrap;
	align-content: stretch;
	justify-content: center;
	flex-direction: column;
}

.feed {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: var(--spacing-sml-rem);
}

.feed > div.entry {
	display: grid;
	grid-template-areas:
	"art"
	"info";
	width: 24%;
	overflow: hidden;
	background: var(--color-background-alt);
	border-radius: var(--border-radius-min) var(--border-radius-min) var(--border-radius-mid) var(--border-radius-mid);
}

.entry > div.art {
	grid-area: art;
	border: 2px solid var(--color-background-alt);
	height: 24vw;
	max-height: 275px;
	overflow: hidden;
}

.entry > .art > img {
	width:100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.entry > .art > img:hover {
	filter: brightness(75%);
}

/* Info area containing the title, date, description, and foooter */
.entry > .info {
	color: var(--color-text-alt);
	padding: var(--spacing-sml-rem);
}

.entry > .info > h4 {
	grid-area: title;
	padding: 0;
}

.entry > .info > .date {
	grid-area: date;
	color:  var(--color-text-accent-alt);
}

.info > .date > p {
	padding: 0;
}


.entry > .info > a {
	grid-area: link;
}

.entry > .info > .description {
	grid-area: content;
}

/* I don't know what I'm using this for but I feel like I should keep it.
It was originally being used to house social links, but I think those are best kept on the post*/
.entry > .info > .footer {
	grid-area: footer;
}


/*Responsive*/
@media only screen and (max-width:1024px) {
	.feed > div.entry {width: 30%;}
	.entry > div.art {height: 30vw;
}	
}

@media only screen and (max-width:600px) {
	.feed > div.entry { width: 45%;}
	.entry > div.art {height: 45vw;}
}