The sort of CSS we write at work

example.css

.home-popup:--has(test-24) {
  padding: 1em 2em .75em;
}

.home-popup test-24 ~ * {
  display: none;
}

@--reset test-24;

test-24 {
  display: flex;
  flex-direction: column;
  align-items: center;
}
test-24 button.close {
  padding: .5em .75em;
}
test-24 h1,
test-24 h2 {
  display: block;
  margin: 0 0 .5em;
  color: black;
  line-height: 1.2;
  font-weight: bold;
  text-align: center;
}
test-24 a.button.blue {
  padding: 14px 40px;
  transition: background-color .2s ease-in-out;
}
test-24 a.button.blue:focus,
test-24 a.button.blue:hover {
  color: white;
  background-color: #23527c;
}
test-24 a.text-link {
  display: block;
  padding: .5em;
  margin: 0;
  color: #23527c;
  text-decoration: underline;
}
test-24 a.text-link:focus,
test-24 a.text-link:hover {
  text-decoration: none;
}

@media (max-width: 750px) {
  test-24 h1 br,
  test-24 h2 br {
    display: none;
  }
}

@media (max-width: 1200px) {
  #chat-widget-container {
    display: none !important;
  }
}

@--variation '24-1' {
  test-24 h1 {
    --clamped-font-size: 24, 7, 32;
  }
}

@--variation '24-2' {
  test-24 h1 {
    margin-bottom: .25em;
    font-weight: normal;
    --clamped-font-size: 18, 5, 24;
  }
  test-24 h2 {
    --clamped-font-size: 24, 7, 35;
  }
}

@--variation '24-3' {
  test-24 h1 {
    --clamped-font-size: 24, 7, 35;
  }
}