Get your own website Result Size: 625 x 565
x
 
<!DOCTYPE html>
<html>
<head>
<style>
@property --item-size {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
@property --item-color {
  syntax: "<color>";
  inherits: false;
  initial-value: lightgray;
}
.container {
  display: flex;
  height: 200px;
  border: 1px solid black;
  /* set custom property values on parent */
  --item-size: 20%;
  --item-color: gold;
}
/* use custom properties to set item size and background color */
.item {
  width: var(--item-size);
  height: var(--item-size);
  background-color: var(--item-color);
}
/* set custom property values on item two */
.two {
  --item-size: initial;
  --item-color: inherit;
}
</style>
</head>
<body>