// Had to use JavaScript
if (card.querySelector('img')) {
  card.classList.add('has-image');
}

/* Style card when it contains an image */
.card:has(img) {
  display: grid;
  grid-template-columns: 200px 1fr;
}

/* No image? Different layout */
.card:not(:has(img)) {
  padding: 1rem;
}

/* Parent that has a child */
.parent:has(.child) { }

/* Parent that has a direct child */
.parent:has(> .child) { }

/* Parent that has a checked input */
form:has(input:checked) { }

/* Highlight field group with error */
.field:has(input:invalid) {
  border-left: 3px solid red;
}

/* Show success when valid */
.field:has(input:valid:not(:placeholder-shown)) {
  border-left: 3px solid green;
}

/* Card with image: side-by-side layout */
.card:has(img) {
  display: flex;
  gap: 1rem;
}

.card:has(img) img {
  width: 40%;
  object-fit: cover;
}

/* Highlight nav item with active link */
nav li:has(a[aria-current="page"]) {
  background: var(--accent);
}

/* If toggle is checked, dark mode */
body:has(#dark-mode:checked) {
  background: #1a1a1a;
  color: white;
}

/* Add asterisk to labels of required fields */
label:has(+ input:required)::after {
  content: " *";
  color: red;
}

/* Grid when 3+ items */
.container:has(:nth-child(3)) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* Single column when less than 3 */
.container:not(:has(:nth-child(3))) {
  max-width: 500px;
}

/* Parent that has both */
.card:has(img):has(h2) { }

/* Parent that has either */
.card:has(img, video) { }

/* Sibling of element that has */
.card:has(img) + .card { }

/* Fallback */
.card {
  display: block;
}

/* Enhanced experience */
@supports selector(:has(*)) {
  .card:has(img) {
    display: grid;
  }
}