:root {
  --typography-font-family: 'DM Sans', sans-serif;
  --typography-font-weight-medium: 500;
  --typography-font-weight-semi-bold: 600;
  --typography-font-weight-bold: 700;
  --typography-font-weight-extra-bold: 800;

  --border-radius-base: var(--border-radius-16);

  --max-view-width: var(--size-1180);

  --mixin-box-white-border-width: var(--size-0);
  --mixin-box-white-border-radius: var(--border-radius-base);
  --mixin-box-white-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  --mixin-rounded-button-border-radius: var(--border-radius-50-pct);

  --button-arrow-width-xs: var(--size-35);
  --button-arrow-height-xs: var(--size-35);
  --button-arrow-width-md: var(--size-35);
  --button-arrow-height-md: var(--size-35);
  --button-arrow-width-lg: var(--size-35);
  --button-arrow-height-lg: var(--size-35);
  --button-arrow-border-width: var(--size-2);

  --button-link-font-weight: var(--typography-font-weight-medium);
  --button-variant-outlined-border-color: var(--color-default);
  --button-variant-outlined-text-color: var(--color-default);

  --form-radio-size: var(--size-20);
  --form-radio-border-width: var(--size-2);
  --form-radio-box-border-width: var(--size-2);
  --form-text-field-border-radius: var(--border-radius-10);

  --navigation-link-font-weight: var(--typography-font-weight-medium);

  --filters-border-color: var(--color-primary-alternative);

  --recently-viewed-products-padding: var(--spacing-5) var(--spacing-0) var(--spacing-15)
    var(--spacing-0);
  --recently-viewed-min-height: var(--size-180);
  --recently-viewed-max-width: var(--size-296);

  --favourite-button-radius: var(--border-radius-50-pct);
  --favourite-button-size: var(--size-33);

  --booking-wizard-margin-top: var(--spacing-24);
  --booking-wizard-margin-bottom: var(--spacing-40);

  --booking-participants-form-width-lg: var(--size-560);
  --booking-gender-select-width: var(--size-130);

  --footer-social-media-list-gap: var(--spacing-20);
  --footer-social-media-list-item-width: var(--size-20);
  --footer-social-media-list-item-height: var(--size-20);
  --footer-payment-list-gap: var(--spacing-12);
  --footer-payment-list-item-width: var(--size-47);
  --footer-payment-list-item-height: var(--size-30);

  --toggle-icon-font-weight: normal;

  --filter-trigger-background-color: var(--color-gray-50);
  --price-color: var(--color-default);
  --header-offer-title-color: var(--color-default);
}

@media (min-width: 1200px) {
  .container-xl,
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: var(--max-view-width);
  }
}