Переменные CSS могут упростить использование медиа-запросов. Например, когда ваш экран меньше или больше точки прерывания вашего медиа-запроса, вы можете изменить значение переменной, и она будет применять свой стиль везде, где он используется.
В :root селекторе media query измените его так, чтобы --penguin-size переопределся с новым значением 200px. Кроме того, переопределите --penguin-skin и задайте ему значение black. Затем измените размер предварительного просмотра, чтобы увидеть это изменение в действии.