@use "sass:map";
@use "../partials/breakpoints";

[role="feed"] {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;

	@media (min-width: map.get(breakpoints.$breakpoints, "small")) {
		grid-template-columns: 1fr 1fr;
	}
}

article,
[role="article"],
[role="feed"] > * {
	display: grid;
	gap: 1rem;
	border-width: 1px;
	border-style: solid;
	border-radius: 0.5rem;
	text-decoration: none;

	> * {
		padding-inline: 1rem;
		&:last-child {
			padding-block-end: 1rem;
		}
	}
	> figure {
		border-start-start-radius: calc(0.5rem - 1px);
		border-start-end-radius: calc(0.5rem - 1px);
		padding: 0;
		aspect-ratio: 16 / 9;
		overflow: hidden;

		img {
			transition: transform 0.3s ease;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
}

[role="feed"] > *:hover > figure > img {
	transform: scale(1.05);
}