CSS

Multiplier
CSS custom properties are excellent when it comes to updating multiple elements at once. By injecting a --text-multiplier variable into the text elements' size, you can increase/decrease them all at a specific breakpoint by editing the variable.

// Method 3
h1 {
  font-size: calc(2em * var(--text-multiplier, 1));
}

p {
  font-size: calc(1em * var(--text-multiplier, 1));
}

@media (min-width: 48rem) {
  :root {
    --text-multiplier: 1.25;
  }
}
.outer {
  position: relative;
  &:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: (9 / 16) * 100%;
  }
  > .inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}
  

Similiar Collections