:root {
  /* GAP */
  --gapS: 5px;
  --gapM: 10px;
  --gapL: 15px;
  --gapXL: 20px;
  --gapXXL: 40px;

  /* BORDER */
  --borderRadiusS: 10px;
  --borderRadius: 20px;
  --borderWidth: 2px;
  --borderWidthActive: 5px;

  /* BOX-SHADOW */
  --boxShadow: 2px 5px 12px #00000029;

  /* CONSENT-BUTTON */
  --consentButtonHeight: 56px;

  /* COLOR */
  --lightGrey: #e2e2e2;
  --grey: #707070;

  /* FONT-SIZES */
  --fontsizeXS: 10px;
  --fontsizeXS-small: calc(var(--fontsizeXS) / 2);
  --fontsizeS-XS: 15px;
  --fontsizeS: 20px;
  --fontsizeS-small: calc(var(--fontsizeS) / 2);
  --fontsizeM: calc(var(--fontsizeS) * 2);
  --fontsizeM-small: calc(var(--fontsizeM) / 2);
  --fontsizeL: calc(var(--fontsizeS) * 3);
  --fontsizeL-small: calc(var(--fontsizeL) / 2);
  --fontsizeXL: calc(var(--fontsizeM) * 2);
  --fontsizeXL-small: calc(var(--fontsizeXL) / 2);
  --fontsizeXXL: calc(var(--fontsizeL) * 2);
  --fontsizeXXL-small: calc(var(--fontsizeXXL) / 2);
  --fontsizeTitle: 11.9vw;

  /* WIDTH */
  --detailsWidth: 50%;
}

@media screen and (max-width: 1000px) {
  :root {
    --fontsizeS: 15px;
    --detailsWidth: 66%;
  }
}

@media screen and (max-width: 600px) {
  :root {
    --fontsizeS: 10px;
    --detailsWidth: 100%;
    --fontsizeTitle: 11.7vw;
  }
}