:root {
	--color-1: #FF885C; //

	--color-2: #101828; //
	--color-3: #475467; //
	--color-4: #F2F4F7; //
	--color-5: #EAECF0; //

	--misc-color: #98A2B3; //

	--text-1: #344054; //
	--text-2: #5f6266; //
	--link-color: #667085; //

	--title-size-1: 4.8rem; //
	--title-size-2: 4rem; //
	--title-size-3: 3.2rem; //
	--title-size-4: 2.4rem; //
	--title-size-5: 20px; //
	--title-size-6: 18px; //

	--body-size: 18px;
	--body-size-2: 16px;

	--site-transition: .3s all; //

	--line-height-1: 1.17; //
	--line-height-2: 1.36; //
	--line-height-3: 1.145; //

	--spacing-1: 4.8rem; //
	--spacing-2: 3.2rem; //
	--spacing-3: 2.4rem; //
}

$mob-max: 599.5px;
$tab-min: 599.6px;
$tab-max: 797.5px;
$limbo-min: 797.6px;
$limbo-max: 1199.5px;
$desk-min: 1199.6px;
$sm-desk-max: 1360.5px;
$md-desk-min: 1360.6px;
$md-desk-max: 1659.5px;
$lg-desk-min: 1659.6px;
$huge-desk-min: 2560px;

@mixin mob-only {
  @media (max-width: $mob-max) {
    @content;
  }
}

@mixin tab-min {
  @media (min-width: $tab-min) {
    @content;
  }
}

@mixin tab-max {
  @media (max-width: $tab-max) {
    @content;
  }
}

@mixin tab-only {
  @media (min-width: $tab-min) and (max-width: $tab-max) {
    @content;
  }
}

@mixin limbo-min {
  @media (min-width: $limbo-min) {
    @content;
  }
}

@mixin limbo-max {
  @media (max-width: $limbo-max) {
    @content;
  }
}

@mixin limbo-only {
  @media (min-width: $limbo-min) and (max-width: $limbo-max) {
    @content;
  }
}

@mixin desk-min {
  @media (min-width: $desk-min) {
    @content;
  }
}

@mixin sm-desk-only {
  @media (min-width: $desk-min) and (max-width: $sm-desk-max) {
    @content;
  }
}

@mixin sm-desk-max {
  @media (max-width: $sm-desk-max) {
    @content;
  }
}

@mixin md-desk-min {
  @media (min-width: $md-desk-min) {
    @content;
  }
}

@mixin md-desk-max {
  @media (min-width: $md-desk-max) {
    @content;
  }
}

@mixin md-desk-only {
  @media (min-width: $md-desk-min)  and (max-width: $md-desk-max) {
    @content;
  }
}

@mixin lg-desk-min {
  @media (min-width: $lg-desk-min) {
    @content;
  }
}

@mixin huge-desk-min {
  @media (min-width: $huge-desk-min) {
    @content;
  }
}


@mixin img-fit {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@mixin pseudo {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;
}

@mixin clean-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

@mixin sidebar-stick {
	position: sticky;
	top: 0;
	@include limbo-only {
		top: 60px;
	}
}

@mixin flex {
	display: flex;
	flex-wrap: wrap;
}

@mixin flex-between {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

:root {
	@include md-desk-min {
		--sh-site-width: 1220px;
	}

	@include sm-desk-only {
		--sh-site-width: 95%;
	}

	@include limbo-max {
		--sh-container-spacing: 0 25px;
	}
	@include tab-max {
		--spacing-1: 6rem; //
		--spacing-2: 4.8rem; //
		--spacing-3: 4rem; //
		--title-size-1: 30px; //
		--title-size-2: 28px; //
		--title-size-3: 24px; //
		--title-size-4: 22px; //
	}
}