:root {
  --font-size: 20px;
  --font-size-s: 16px;
  --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 / 0.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-rockgrey: rgb(83 83 84);
  --sink-volcanogrey: 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-pvdsteel: linear-gradient(
    90deg,
    #9c9c9e 0%,
    #98989a 13%,
    #a4a4a6 22.01%,
    #b5b5b7 28.01%,
    #a5a09c 34.01%,
    #b2b2b4 40.01%,
    #b6b6b8 45.01%,
    #c1c1c3 48.01%
  );
  --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%,
    #aeaaa1 32.01%,
    #cecac1 40.01%,
    #eeebe2 48.01%,
    #cecac1 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,
    #000000 0%,
    #0e0e0e 20%,
    #0e0e0e 29%,
    #1f1c1e 36%,
    #323032 41%,
    #474446 46%,
    #7c797c 50%,
    #474446 54%,
    #323032 59%,
    #1f1c1e 64%,
    #0e0e0e 71%,
    #0e0e0e 80%,
    #000000 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;
  }
}