section:has(.category-bento)
	{
		container: categories / inline-size;
		background: var(--colour-subtle);
	}
	.category-bento
	{
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));			
		gap: clamp(16px, 2vw, 24px);
		width: min(100%, 1344px);
		height: clamp(440px, 40.93vw, 550px);
		margin-inline: auto;
		padding: clamp(24px, 3.65vw, 48px) clamp(12px, 3.05vw, 32px);
	}
	.category-bento > .category-card
	{
		position: relative;
		isolation: isolate;
		min-width: 0;
		overflow: clip;
		border: 1px solid oklch(0.9121 0.0101 155.08);
		border-radius: 4px;
		background: oklch(0.2389 0.0139 154.16);
		box-shadow: 0 2px 6px transparent;
		color: oklch(1.0000 0.0000 89.88);
		transform: translateZ(0);
		transition: border-color 220ms ease, box-shadow 320ms cubic-bezier(.22, 1, .36, 1), transform 320ms cubic-bezier(.22, 1, .36, 1);			
		border-radius: 8px;
	}	
	.category-bento > .category-card:first-child
	{
			grid-row: 1;
	}				
	.category-bento > .category-card:first-child > a > img
	{
		object-position: 42% center;
	}
	
	.category-bento > .category-card > a
	{
		position: absolute;
		inset: 0;
		z-index: 1;
		border-radius: inherit;		
	}
	
	.category-bento > .category-card > a > img
	{
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;			
		z-index: -2;
		object-fit: cover;
		object-position: center;			
		transform: scale(1.02);
		transition: transform 900ms cubic-bezier(.22, 1, .36, 1), filter 420ms ease;
	}
	.category-bento > .category-card:hover > a > img
	{
		filter: saturate(1.04) contrast(1.02);
		transform: scale(1.045);		
	}
	.category-bento > .category-card:after
	{
		content: '';
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;	
		z-index: 1;
		background: linear-gradient(to top, oklch(0 0 0 / .66) 0%, oklch(0 0 0 / .28) 24%, oklch(0 0 0 / 0) 54%);
		transition: opacity 300ms ease;			
	}
	.category-bento > .category-card:hover
	{
		border-color: color-mix(in oklch, oklch(0.5442 0.1447 145.83) 46%, oklch(0.9121 0.0101 155.08));
		box-shadow: 0 14px 28px oklch(0 0 0 / .13);
		transform: translateY(-3px);
	}
	.category-bento > .category-card:active
	{
		transform: translateY(-1px) scale(.996);
	}
	.category-bento > .category-card > div
	{
		position: absolute;
		inset: auto 0 0;
		z-index: 2;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: clamp(12px, 2vw, 28px);
		width: 100%;
		padding: clamp(16px, 2.2vw, 24px);
		pointer-events: none;					    
		background: linear-gradient(to top, oklch(0 0 0 / .66) 0%, oklch(0 0 0 / .28) 24%, oklch(0 0 0 / 0) 54%);
		transition: opacity 300ms ease;
	}
	.category-bento > .category-card > div > div
	{
		display: grid;
		min-width: 0;
		gap: 8px;
	}
	.category-bento > .category-card > div > div > h2
	{
		margin: 0;
		color: oklch(1.0000 0.0000 89.88);
		font-family: "Figtree", "Avenir Next", sans-serif;
		font-size: clamp(26px, 3vw, 36px);
		font-weight: 600;
		line-height: 1.0556;
		letter-spacing: -.02em;
		text-shadow: 0 2px 6px oklch(0 0 0 / .25);
		text-wrap: balance;			
	}
	.category-bento > .category-card > div > div > p
	{
		display: flex;
		flex-wrap: wrap;
		gap: 4px 8px;
		margin: 0;		
	}
	.category-bento > .category-card > div > div > p > a,
	.category-bento > .category-card > div > div > p > a span		
	{
		pointer-events: auto;
		position: relative;
		display: inline-flex;
		align-items: baseline;
		gap: 2px;
		padding-bottom: 1px;
		border-radius: 4px;
		text-decoration: none;
		text-shadow: 0 1px 3px oklch(0 0 0 / .24);						
		color: oklch(1.0000 0.0000 89.88);			
		font-size: clamp(16px, 1.68vw, 20px);
		font-weight: 600;
		line-height: 1.2;
		letter-spacing: -.01em;				
	}

	.category-bento > .category-card > div > div > p > a:after
	{
		position: absolute;
		inset: auto 0 -1px;
		height: 1px;
		background: currentColor;
		content: "";
		opacity: 0;
		transform: scaleX(.55);
		transform-origin: left;
		transition: opacity 160ms ease, transform 220ms cubic-bezier(.22, 1, .36, 1);
	}
	.category-bento > .category-card > div > div > p > a:hover:after
	{
		opacity: .92;
		transform: scaleX(1);
	}

	.category-bento > .category-card > div > a		
	{
		pointer-events: auto;
		color: oklch(1.0000 0.0000 89.88);
		height: 48px;
		padding: 0 24px;
		border-radius: 999px;
		font-size: 16px;
		font-weight: 600;
		line-height: 24px;
		letter-spacing: .02em;
		display: grid;
		flex: 0 0 auto;
		place-items: center;
		min-width: 44px;
		min-height: 44px;
		border: 1px solid oklch(0.9121 0.0101 155.08);
		background: oklch(1.0000 0.0000 89.88);;
		box-shadow: 0 2px 7px oklch(0 0 0 / .12);
		color: oklch(0.2389 0.0139 154.16);
		text-decoration: none;
		transition: background 180ms ease, box-shadow 240ms ease, color 180ms ease, transform 260ms cubic-bezier(.22, 1, .36, 1);
	}		
	.category-bento > .category-card > div > a:hover
	{
		background: color-mix(in oklch, oklch(1.0000 0.0000 89.88) 92%, oklch(0.5442 0.1447 145.83));
		box-shadow: 0 7px 18px oklch(0 0 0 / .18);
		color: oklch(0.5442 0.1447 145.83);
		transform: translateY(-2px);		
	}
	
	@container categories (max-width: 1024px) 
	{
		.category-bento
		{
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			grid-template-rows: repeat(2, minmax(0, 1fr));
			gap: 24px;
			width: min(100%, 1344px);
			height: clamp(440px, 40.93vw, 550px);
			margin-inline: auto;
			padding: clamp(24px, 3.65vw, 48px) clamp(12px, 3.05vw, 32px);
		}
		.category-bento > .category-card:first-child
		{
			grid-row: 1 / span 2;
		}			
	}
	
	@container categories (max-width: 860px) 
	{
		.category-bento 
		{
			gap: 16px;
			height: clamp(400px, 58vw, 480px);
		}

		.category-bento > .category-card > div 
		{
			align-items: flex-start;
			flex-direction: column;
			gap: 12px;
		}

		.category-bento > .category-card > div > a		
		{
			position: absolute;
			right: clamp(16px, 2.2vw, 24px);
			bottom: clamp(16px, 2.2vw, 24px);
		}

		.category-bento > .category-card 
		{ 
			padding-right: 88px; 
		}
	}
	
	@container categories (max-width: 640px) 
	{
		.category-bento 
		{
			grid-template-columns: minmax(0, 1fr);
			grid-template-rows: none;
			height: auto;
			padding-inline: 16px;
			padding-block: clamp(20px, 7.5vw, 36px);
		}

		.category-bento .category-card
		{
			grid-column: auto;
			grid-row: auto;
			width: 100%;
			height: clamp(228px, 65vw, 330px);
		}

		.category-bento .category-card
		{ 
			padding: clamp(16px, 5vw, 24px); 
		}

		.category-bento > .category-card > div > a	
		{
			right: clamp(16px, 5vw, 24px);
			bottom: clamp(16px, 5vw, 24px);
		}
	}
	
	@container categories (max-width: 380px) 
	{
		.category-bento { gap: 16px; }

		.category-bento .category-card { height: 244px; }

		.category-bento h2 { font-size: 26px; }
		.category-bento a { font-size: 16px; }

		.category-bento .category-card 
		{
			gap: 6px;				
		}
		.category-bento .category-card h2
		{
			padding-right: 76px;
		}

		.category-bento > .category-card > div > a	
		{
			width: auto;
			min-width: 60px;
			height: 44px;
			padding: 0 16px;
		}
	}