@function --narrow-wide(--narrow, --wide) {
  result: var(--wide);
  @media (width < 700px) {
    result: var(--narrow);
  }
}

/*
This could also be written using a CSS if() function, like so:
@function --narrow-wide(--narrow, --wide) {
  result: if(media(width < 700px): var(--narrow) ; else: var(--wide));
}
*/

/* Function that returns a value of none to hide a "not supported" banner
if CSS custom functions are supported. If not, the banner will show. */
@function --supports() {
  result: none;
}

html {
  font-family: system-ui;
}

body {
  display: grid;
  grid-template-columns: repeat(--narrow-wide(1, 3), 1fr);
  gap: --narrow-wide(0, 20px);
  padding: 0 20px;
}

h2 {
  font-size: --narrow-wide(2.5rem, 2rem);
}

p {
  font-size: --narrow-wide(1.4rem, 1rem);
  line-height: 1.5;
}

/* Styling for the support banner */
.support {
  border-radius: 0;
  border: 6px dashed black;
  background-color: #fef0c3;
  font-size: 1.3rem;
  padding: 1rem;
  position: absolute;
  inset: 25%;
  display: --supports();
}