:root {
	--space: 1rem;
	--bg: #09090b;
	--fg: #e3e3e3;
	--surface-1: #101012;
	--surface-2: #27272a;
	--surface-3: #52525b;
	--ease-out: cubic-bezier(0.5, 1, 0.89, 1);
	--ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  }
  
  
  main {
	display: grid;
	grid-template-columns: repeat(var(--count, 1), 1fr);
	gap: var(--space);
	margin: auto;
	inline-size: min(var(--max, 15rem), 100%);
  
	@media (min-width: 25rem) {
	  --count: 2;
	  --max: 30rem;
	}
  
	@media (min-width: 45rem) {
	  --count: 4;
	  --max: 60rem;
	}
  }
  
  .card {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-areas: "card";
	place-items: center;
	/*aspect-ratio: 4/5;*/
	aspect-ratio: 1;
	border: 1px solid var(--surface-2);
	isolation: isolate;
	transition: border-color 200ms var(--ease-out);
	user-select: none;
  
	&::before {
	  content: "";
	  position: absolute;
	  inset: 0;
	  /*
	  background: radial-gradient(
		circle at bottom left,
		transparent 55%,
		var(--surface-1)
	  );
	  */
	  pointer-events: none;
	  box-shadow: var(--bg) -0.5cqi 0.5cqi 2.5cqi inset;
	  transition: opacity 900ms var(--ease-out);
	}
  
	&::after {
	  content: "";
	  position: absolute;
	  inset: 0;
	  margin: auto;
	  aspect-ratio: 1;
	  background: radial-gradient(circle, var(--bg), transparent 65%);
	  opacity: 0;
	  transition: opacity 800ms var(--ease-out);
	}
  
	> * {
	  grid-area: card;
	}
  
	button {
	  opacity: 0;
	}
  
	&:focus-within {
	  outline: 5px auto Highlight;
	  outline: 5px auto -webkit-focus-ring-color;
	}
  
	&:where(:hover, :focus-within) {
	  border-color: var(--active-color, var(--fg));
	  transition: border-color 800ms var(--ease-in-out);
	}
  
	&:where(:hover, :focus-within) svg {
	  color: var(--active-color, var(--fg));
	  scale: 1.1;
	  transition: 300ms var(--ease-in-out);
	}
  
	&:where(:hover, :focus-within)::before {
	  opacity: 0;
	}
  
	&:where(:hover, :focus-within)::after {
	  opacity: 1;
	}
  }