/* Figma Styles of your File */
:root {
  /* Colors */
  --gradient: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 100%
  );
  --artist-card-gradient-strong: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.9) 60%,
    rgba(0, 0, 0, 1) 100%
  );

  /* Fonts */
  --p-small-regular-font-family: PpNeueMontreal-Regular, sans-serif;
  --p-smallest-regular-font-size: 16px;
  --p-smallest-regular-line-height: 24px;
  --p-small-regular-font-size: 24px;
  --p-small-regular-line-height: 34px;
  --p-small-regular-font-weight: 400;
  --p-small-regular-font-style: normal;
  --p-small-bold-font-family: PpNeueMontreal-Bold, sans-serif;
  --p-small-bold-font-size: 24px;
  --p-small-bold-line-height: 34px;
  --p-small-bold-font-weight: 700;
  --p-small-bold-font-style: normal;
  --numbers-secondary-font-family: PpEditorialOld-Regular, Garamond, "Times New Roman", serif;
  --numbers-secondary-font-size: 72px;
  --numbers-secondary-line-height: 72px;
  --numbers-secondary-font-weight: 400;
  --numbers-secondary-font-style: normal;
  --h1-regular-font-family: PpEditorialOld-Regular, Garamond, "Times New Roman", serif;
  --h1-regular-font-size: 124px;
  --h1-regular-line-height: 120px;
  --h1-regular-font-weight: 400;
  --h1-regular-font-style: normal;
  --p-primary-regular-font-family: PpNeueMontreal-Regular, sans-serif;
  --p-primary-regular-font-size: 36px;
  --p-primary-regular-line-height: 48px;
  --p-primary-regular-font-weight: 400;
  --p-primary-regular-font-style: normal;
  --p-primary-bold-font-family: PpNeueMontreal-Bold, sans-serif;
  --p-primary-bold-font-size: 36px;
  --p-primary-bold-line-height: 48px;
  --p-primary-bold-font-weight: 700;
  --p-primary-bold-font-style: normal;
  --h2-regular-font-family: PpEditorialOld-Regular, Garamond, "Times New Roman", serif;
  --h2-regular-font-size: 124px;
  --h2-regular-line-height: 136px;
  --h2-regular-font-weight: 400;
  --h2-regular-font-style: normal;

  /* Effects */
}
/* Figma Color Variables of your File */
:root,
[data-variable-collection-mode="mode-1"] {
  /* mode-1 */
  --black: #000000;
  --gray: rgba(0, 0, 0, 0.5);
  --text-dimmed-color: rgba(255, 255, 255, 0.1);
  --gold: #d8ae00;
  --white: #ffffff;
  --card: #f5f5f5;
  --light: rgba(0, 0, 0, 0.1);
  --lightinverted: rgba(255, 255, 255, 0.2);
}

@media (max-width: 560px) {
  :root {
    /* Mobile Font Sizes & Line Heights */

    /* For .h-1 & .section-number */
    --h1-regular-font-size: 76px;
    --h1-regular-line-height: 80px;

    /* For H2 elements */
    --h2-regular-font-size: 76px;
    --h2-regular-line-height: 80px;

    /* For .nav-item-number */
    --numbers-secondary-font-size: 48px;
    --numbers-secondary-line-height: 54px;

    /* For .text .text-regular & .review-card-text */
    --p-small-regular-font-size: 16px;
    --p-small-regular-line-height: 22px;

    /* For .text .text-bold */
    --p-small-bold-font-size: 16px;
    --p-small-bold-line-height: 22px;

    /* For .p & .artist-card-review-text */
    --p-primary-regular-font-size: 24px;
    --p-primary-regular-line-height: 34px;
    
    /* For .list-item-text */
    --p-smallest-regular-font-size: 14px;
    --p-smallest-regular-line-height: 22px;
  }
}