.clay {
  position: relative;
  background: var(--clay-background, rgba(0, 0, 0, .005));
  border-radius: var(--clay-border-radius, 32px);
  box-shadow: var(--clay-shadow-outset, 8px 8px 16px 0 rgba(0, 0, 0, .25)), inset var(--clay-shadow-inset-primary, -8px -8px 16px 0 rgba(0, 0, 0, .25)), inset var(--clay-shadow-inset-secondary, 8px 8px 16px 0 hsla(0, 0%, 100%, .2))
}
.clay2 {
/*  background-color: green;*/
/*  background: var(--clay-background, rgba(0, 0, 0, .005));*/
  border-radius: var(--clay-border-radius, 32px);
  box-shadow: var(--clay-shadow-outset, 8px 8px 16px 0 rgba(0, 0, 0, .25)), inset var(--clay-shadow-inset-primary, -8px -8px 16px 0 rgba(0, 0, 0, .25)), inset var(--clay-shadow-inset-secondary, 8px 8px 16px 0 hsla(0, 0%, 100%, .2))
}
.clay3 {
  background-color: lightcyan;
/*  background: var(--clay-background, rgba(0, 0, 0, .005));*/
  border-radius: var(--clay-border-radius, 32px);
  box-shadow: var(--clay-shadow-outset, 8px 8px 16px 0 rgba(0, 0, 0, .25)), inset var(--clay-shadow-inset-primary, -8px -8px 16px 0 rgba(0, 0, 0, .25)), inset var(--clay-shadow-inset-secondary, 8px 8px 16px 0 hsla(0, 0%, 100%, .2))
}