.opg {
	--opg-columns: 2;
	--opg-gap: 6px;
	--opg-ratio: 4 / 5;
	--opg-hero-ratio: 16 / 9;

	display: grid;
	grid-template-columns: repeat(var(--opg-columns), minmax(0, 1fr));
	gap: var(--opg-gap);
}

.opg__item {
	display: block;
	overflow: hidden;
	aspect-ratio: var(--opg-ratio);
	line-height: 0;
}

.opg__item--hero {
	grid-column: 1 / -1;
	aspect-ratio: var(--opg-hero-ratio);
}

.opg__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}