.bit-events {
	container: bit-events / inline-size;
}

.bit-events__item {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	padding-block: var(--wp--preset--spacing--40);
}

.bit-events__item + .bit-events__item {
	border-top: 1px solid var(--wp--custom--hairline);
}

.bit-events__item p {
	margin: 0;
	max-width: 40em;
}

.bit-events__item:has(> .bit-events__image) {
	grid-template-columns: 14rem minmax(0, 1fr);
	grid-template-rows: auto auto auto 1fr;
	column-gap: var(--wp--preset--spacing--50);
	align-items: start;
}

.bit-events__image {
	grid-row: 1 / -1;
	margin: 0;
}

.bit-events__image ~ * {
	grid-column: 2;
}

.bit-events__image img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 20rem;
	border-radius: var(--wp--custom--radius--small);
}

@container bit-events (min-width: 40rem) {
	.bit-events--upcoming .bit-events__item:has(> .bit-events__image) {
		grid-template-columns: 18rem minmax(0, 1fr);
	}
}

@container bit-events (min-width: 60rem) {
	.bit-events--upcoming .bit-events__item:has(> .bit-events__image) {
		grid-template-columns: 20rem minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--60);
	}

	.bit-events--upcoming .bit-events__title {
		font-size: var(--wp--preset--font-size--x-large);
	}
}

@container bit-events (max-width: 28rem) {
	.bit-events__item:has(> .bit-events__image) {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
	}

	.bit-events__image {
		grid-row: auto;
		max-width: 14rem;
	}

	.bit-events__image ~ * {
		grid-column: auto;
	}
}

.bit-events__when,
.bit-events__where {
	display: flex;
	align-items: center;
	gap: 0.5em;
	color: var(--wp--preset--color--contrast-2);
	font-family: var(--wp--preset--font-family--monospace);
	font-size: 0.9375rem;
}

.bit-events__when svg,
.bit-events__where svg {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	stroke: var(--wp--custom--icon);
}

.bit-events__title {
	margin: 0;
	font-weight: 800;
	line-height: 1.05;
}

.bit-events__title a:focus-visible {
	outline: none;
}

.bit-events__title:has(a:focus-visible) {
	outline: 3px solid var(--wp--custom--mark);
	outline-offset: 2px;
}