.menu-style-small {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(calc(32rem - var(--gap)), 1fr));
	gap: calc(var(--gap) * 2 / 3);

	& li {
		position: relative;
	}

	& .menu-content a {
		display: inline-block;
		margin-block-start: 0.5rem;

		&::before {
			position: absolute;
			inset: 0;
			inline-size: 100%;
			block-size: 100%;
			content: "";
		}
	}

	& .img-zoom-wrap {
		position: relative;
		aspect-ratio: 315/200;
		overflow: clip;

		& img {
			transition: transform var(--transition);
			inline-size: 100%;
			block-size: 100%;
			object-fit: cover;
		}
	}

	& li:has(:hover, :focus-visible) {
		& img {
			transform: scale(1.075);
		}
	}
}

.menu-style-large {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: calc(var(--gap) * 4 / 3);

	@media (min-width: 744px) {
		grid-template-columns: 1fr 1fr;
	}

	& li {
		display: grid;
		position: relative;
		grid-template-columns: 1fr 1fr;
		column-gap: var(--gap);
		border-block-end: 0.1rem solid var(--palette-green-alt);
		padding-block: calc(var(--gap) / 2);

		@media (min-width: 744px) {
			padding-block: calc(var(--gap) * 4 / 3);
		}

		&:nth-child(-n + 2) {
			border-block-start: 0.1rem solid var(--palette-green-alt);
		}
	}

	& .menu-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: start;
	}

	& .menu-content .h4::before {
		content: none;
	}

	& .menu-content a {
		display: inline-block;
		margin-block-start: 0.5rem;

		&::before {
			position: absolute;
			inset: 0;
			inline-size: 100%;
			block-size: 100%;
			content: "";
		}
	}

	& .img-zoom-wrap {
		position: relative;
		border-radius: 100vmax;
		aspect-ratio: 1/1;
		overflow: clip;

		& img {
			transition: transform var(--transition);
			inline-size: 100%;
			block-size: 100%;
			object-fit: cover;
		}
	}

	& li:has(:hover, :focus-visible) {
		& img {
			transform: scale(1.075);
		}
	}
}