.wrapper {
  container-type: inline-size;
  container-name: card;
}

.c-article {
  /* Default stacked style */
}

@container card (min-width: 400px) {
  /* Horizontal style. */
  .c-article {
    display: flex;
    align-items: center;
  }
}

/* Input */
.foo {
  opacity: 45%;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
}

@layer components {
  .btn-blue {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
}

@layer utilities {
  .filter-none {
    filter: none;
  }
  .filter-grayscale {
    filter: grayscale(100%);
  }
}

.element {
  width: min(50%, 500px);
}

.element {
  width: max(50%, 500px);
}

.element {
  width: clamp(200px, 50%, 1000px);
}

font-size: [value-fallback]; /* Fallback value */
font-size: clamp([value-min], [value-preferred], [value-max]);

@supports selector(:has(a)) {
	.post {
		display: none;
	}

	.filter-bar:has(#css-tag:checked) ~ .post:has([data-tag="CSS"]),
	.filter-bar:has(#html-tag:checked) ~ .post:has([data-tag="HTML"]) {
		display: block;
	}

	.filter-bar { /* styles */ }
}

@supports not selector(:has(a)) {
	.filter-bar {
		display: none;
	}
}

.settings-popover {
  &:popover-open {
    /*  0. BEFORE-OPEN  */
    @starting-style {
      transform: translateY(20px);
      opacity: 0;
    }
    
    /*  1. OPEN STATE   */
    transform: translateY(0);
    opacity: 1;
  }

  /*  2. EXIT STATE   */
  transform: translateY(-50px);
  opacity: 0;

  transition: transform 0.5s, opacity 0.5s, display 0.5s;
}