:root {
  --font-size: 20px;
  --dist-h: 24px;
  --dist-v: 40px;
  --columngap: calc(var(--dist-h));
  --rowgap: calc(var(--dist-v) / 2);
  --header-height: 73px;
  --block-margin: 120px;
  --block-margin-slim: 100px;
  --content-max-width: 1920px;
  --content-col-max-width: 550px;
  --content-max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - var(--header-height) - 1px);
  /* --content-image-min-height: clamp(150px, min(80vh, 90vw), 840px); */
  --content-image-min-height: clamp(150px, min(60vh, 60vw), min(740px, var(--content-max-height)));
  --fab-bg: transparent;
  /* @media (min-width: 834px) {
    --content-col-max-width: 700px;
  } */

  /* COLORS */
  --strawberry: #FF6133;
  --black-rgb: 0 0 0;
  --black: rgb(var(--black-rgb));
  --white-rgb: 255 255 255;
  --white: rgb(var(--white-rgb));
  --white-transp: rgb(255 255 255 / .75);
  --lighter-grey-rgb: 212 212 212;
  --lighter-grey: rgb(var(--lighter-grey-rgb) / 1);
  --light-grey: rgb(237 237 237 / 1);
  --grey: rgb(167 167 167);
  --grey-dark: rgb(87, 87, 87);
  --blanco-blue: rgb(51 51 153 / 1);
  --blanco-blue-100: rgb(214 214 233 / 1);
  --blanco-color-background: var(--blanco-blue);

  /* SINK COLORS */
  --sink-black: var(--black);
  --sink-anthracite: rgb(52 52 57);
  --sink-volcanogrey: rgb(83 83 84);
  --sink-rockgrey: rgb(122 120 119);
  --sink-white: rgb(237 238 235);
  --sink-softwhite: rgb(217 215 209);
  --sink-coffee: rgb(76 61 56);
  --sink-tartufo: rgb(160 152 144);
  --sink-steel: linear-gradient(90deg, #797372 0%, #7B7574 13%, #837D7C 22.01%, #918C89 28.01%, #A5A09C 34.01%, #BEBAB4 40.01%, #DDDAD2 45.01%, #F7F5EB 48.01%, #F7F5EB 52.01%, #DDDAD2 55.01%, #BEBAB4 60.02%, #A5A09C 66.02%, #918C89 72.02%, #837D7C 78.02%, #7B7574 87.02%, #797372 100.03%);

  /* TAP COLORS */
  --tap-satingold: linear-gradient(90deg, #74655C 0%, #77695F 8%, #837568 16%, #968A77 24.01%, #B0A78D 32.01%, #D2CCA8 40.01%, #FAF7C8 48.01%, #FAF7C8 52.01%, #D2CCA8 60.02%, #B0A78D 68.02%, #968A77 76.02%, #837568 84.02%, #77695F 92.02%, #74655C 100.03%);
  --tap-satinplatinum: linear-gradient(90deg, #777165 0%, #7c766a 8%, #8c867a 16%, #9e988c 24.01%, #a49e91 32.01%, #c8c1b3 40.01%, #f2efde 48.01%, #f2efde 52.01%, #c8c1b3 60.02%, #a49e91 68.02%, #9e988c 76.02%, #8c867a 84.02%, #7c766a 92.02%, #777165 100.03%);
  --tap-satindarksteel: linear-gradient(90deg, #403d38 0%, #484540 8%, #5e5b56 16%, #77746e 24.01%, #827f78 32.01%, #aeaaa1 40.01%, #e3e0d7 48.01%, #e3e0d7 52.01%, #aeaaa1 60.02%, #77746e 76.02%, #5e5b56 84.02%, #484540 92.02%, #403d38 100.03%);
  --tap-rockgrey: linear-gradient(90deg, #413832 0%, #433A34 14%, #4B423B 22.01%, #5A4F48 29.01%, #6E635A 35.01%, #887C71 41.01%, #A89A8D 46.01%, #B8A99B 48.01%, #B8A99B 52.01%, #A89A8D 54.01%, #887C71 59.02%, #6E635A 65.02%, #5A4F48 71.02%, #4B423B 78.02%, #433A34 86.02%, #413832 100.03%);
  --tap-steel: linear-gradient(90deg, #797372 0%, #7B7574 13%, #837D7C 22.01%, #918C89 28.01%, #A5A09C 34.01%, #BEBAB4 40.01%, #DDDAD2 45.01%, #F7F5EB 48.01%, #F7F5EB 52.01%, #DDDAD2 55.01%, #BEBAB4 60.02%, #A5A09C 66.02%, #918C89 72.02%, #837D7C 78.02%, #7B7574 87.02%, #797372 100.03%);
  --tap-blackmatt: linear-gradient(90deg, #40403F 0%, #424141 20%, #494948 29%, #555554 36%, #676666 41%, #7E7C7D 46%, #999798 50%, #7E7C7D 54%, #676666 59%, #555554 64%, #494948 71%, #424141 80%, #40403F 100%);
  --tap-black: var(--black);
  --tap-anthracite: linear-gradient(90deg, #40403F 0%, #424141 20%, #494948 29%, #555554 36%, #676666 41%, #7E7C7D 46%, #999798 50%, #7E7C7D 54%, #676666 59%, #555554 64%, #494948 71%, #424141 80%, #40403F 100%);
  --tap-chrome: linear-gradient(90deg, #797372 0%, #7B7574 13%, #837D7C 22.01%, #918C89 28.01%, #A5A09C 34.01%, #BEBAB4 40.01%, #DDDAD2 45.01%, #F7F5EB 48.01%, #F7F5EB 52.01%, #DDDAD2 55.01%, #BEBAB4 60.02%, #A5A09C 66.02%, #918C89 72.02%, #837D7C 78.02%, #7B7574 87.02%, #797372 100.03%);
  --tap-coffee: rgb(76 61 56);
  --tap-tartufo: rgb(160 152 144);
  --tap-volcanogrey: rgb(83 83 84);
  --tap-white: rgb(237 238 235);
  --tap-softwhite: rgb(217 215 209);
}

@media (min-width: 480px) and (max-width:659px),
(min-width: 834px) {
  :root {
    --font-size: 24px;
  }
}

@media screen and (min-width:320px) {
  :root {
    --dist-h: var(--dist-v);
  }
}

@media screen and (min-width:660px) {
  :root {
    --block-margin: 180px;
    --block-margin-slim: 120px;
  }
}

@media screen and (min-width:834px) {
  :root {
    --dist-v: 60px;
    --header-height: 88px;
  }
}