/* Website Stylekit - Classes Framework v2.1 */
/* Variables */

:root {
  --primary-brand-1: #BE123C;
  --primary-brand-2: #780B26;
  --primary-light-1: #FDFBFB;
  --primary-light-2: #F9F4F5;
  --primary-light-3: #EBDEE1;
  --primary-dark-1: #32191F;
  --primary-dark-2: #4E2F37;
  --primary-dark-3: #674A51;
  --secondary-brand-1: #12BE94;
  --secondary-brand-2: #0B785E;
  --secondary-light-1: #FBFDFD;
  --secondary-dark-1: #19322C;
  --primary-transparent-1: #BE123C1F;
  --size-0: 0rem;
  --size-4: 0.25rem;
  --size-8: 0.5rem;
  --size-12: 0.75rem;
  --size-16: 1rem;
  --size-20: 1.25rem;
  --size-24: 1.5rem;
  --size-32: clamp(1.75rem, 1.662rem + 0.376vw, 2rem);
  --size-40: clamp(2.125rem, 1.993rem + 0.563vw, 2.5rem);
  --size-48: clamp(2.5rem, 2.324rem + 0.751vw, 3rem);
  --size-64: clamp(3.25rem, 2.986rem + 1.127vw, 4rem);
  --size-80: clamp(3.875rem, 3.479rem + 1.69vw, 5rem);
  --size-96: clamp(4.5rem, 3.972rem + 2.254vw, 6rem);
  --size-128: clamp(5.8rem, 5.025rem + 3.305vw, 8rem);
  --size-160: clamp(7rem, 5.944rem + 4.507vw, 10rem);
  --title-size-1: clamp(3rem, 2.6151rem + 1.7105vw, 3.8125rem);
  --title-size-2: clamp(2.5rem, 2.2336rem + 1.1842vw, 3.0625rem);
  --title-size-3: clamp(2.0625rem, 1.8849rem + 0.7895vw, 2.4375rem);
  --title-size-4: clamp(1.75rem, 1.6612rem + 0.3947vw, 1.9375rem);
  --title-size-5: clamp(1.4375rem, 1.3783rem + 0.2632vw, 1.5625rem);
  --title-size-6: clamp(1.1875rem, 1.1579rem + 0.1316vw, 1.25rem);
  --title-subtitle: 0.875rem;
  --body-size-l: 1.125rem;
  --body-size-m: 1rem;
  --body-size-s: 0.875rem;
  --heading-font: "Fraunces", serif;
  --body-font: "Work Sans", sans-serif;
  --button-radius: 1rem;
  --radius-s: 0.5rem;
  --radius-m: 1rem;
  --radius-l: 2rem;
}

/* Typography: size */

.title-1 {
  font-size: var(--title-size-1);
  font-weight: 700;
  line-height: 110%;
}

.title-2 {
  font-size: var(--title-size-2);
  font-weight: 700;
  line-height: 115%;
}

.title-3 {
  font-size: var(--title-size-3);
  font-weight: 700;
  line-height: 120%;
}

.title-4 {
  font-size: var(--title-size-4);
  font-weight: 700;
  line-height: 125%;
}

.title-5 {
  font-size: var(--title-size-5);
  font-weight: 700;
  line-height: 130%;
}

.title-6 {
  font-size: var(--title-size-6);
  font-weight: 700;
  line-height: 130%;
}

.sub-title {
  font-size: var(--title-subtitle);
  font-weight: 700;
  line-height: 140%;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.body-l {
  font-size: var(--body-size-l);
  font-weight: 400;
  line-height: 160%;
}

.body-m {
  font-size: var(--body-size-m);
  font-weight: 400;
  line-height: 160%;
}

.body-s {
  font-size: var(--body-size-s);
  font-weight: 400;
  line-height: 160%;
}

.text-link {
  font-weight: 600;
  text-decoration: underline;
}

/* Typography: font family overrides */

.use-heading-font {
  font-family: var(--heading-font);
}

.use-body-font {
  font-family: var(--body-font);
}

/* Typography: color roles */

.heading-on-light {
  color: var(--primary-dark-1);
}

.heading-on-dark {
  color: var(--primary-light-1);
}

.body-on-light {
  color: var(--primary-dark-2);
}

.body-on-dark {
  color: var(--primary-light-2);
}

.detail-on-light {
  color: var(--primary-dark-3);
}

.detail-on-dark {
  color: var(--primary-light-3);
}

.subtitle-on-light {
  color: var(--primary-brand-2);
}

.subtitle-on-dark {
  color: var(--primary-brand-1);
}

.link-on-light {
  color: var(--primary-brand-2);
}

.link-on-light:hover {
  color: var(--primary-dark-1);
}

.link-on-dark {
  color: var(--primary-brand-1);
}

.link-on-dark:hover {
  color: var(--primary-light-1);
}

/* Backgrounds */

.bg-light-1 {
  background-color: var(--primary-light-1);
}

.bg-light-2 {
  background-color: var(--primary-light-2);
}

.bg-light-3 {
  background-color: var(--primary-light-3);
}

.bg-dark-1 {
  background-color: var(--primary-dark-1);
}

.bg-dark-2 {
  background-color: var(--primary-dark-2);
}

.bg-dark-3 {
  background-color: var(--primary-dark-3);
}

.bg-brand-1 {
  background-color: var(--primary-brand-1);
}

.bg-brand-2 {
  background-color: var(--primary-brand-2);
}

/* Buttons */

.btn-solid {
  padding-top: var(--size-12);
  padding-bottom: var(--size-12);
  padding-left: var(--size-24);
  padding-right: var(--size-24);
  font-size: var(--body-size-m);
  font-weight: 600;
  line-height: 1;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--button-radius);
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
  color: var(--primary-light-1);
  background-color: var(--primary-brand-1);
  border-color: var(--primary-brand-1);
}

.btn-solid:hover {
  background-color: var(--primary-brand-2);
  border-color: var(--primary-brand-2);
}

.btn-outline {
  padding-top: var(--size-12);
  padding-bottom: var(--size-12);
  padding-left: var(--size-24);
  padding-right: var(--size-24);
  font-size: var(--body-size-m);
  font-weight: 600;
  line-height: 1;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--button-radius);
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
  color: var(--primary-brand-2);
  background-color: #00000000;
  border-color: var(--primary-brand-1);
}

.btn-outline:hover {
  background-color: var(--primary-brand-1);
  color: var(--primary-light-1);
}

.btn-solid-on-dark {
  padding-top: var(--size-12);
  padding-bottom: var(--size-12);
  padding-left: var(--size-24);
  padding-right: var(--size-24);
  font-size: var(--body-size-m);
  font-weight: 600;
  line-height: 1;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--button-radius);
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
  color: var(--primary-dark-1);
  background-color: var(--primary-light-1);
  border-color: var(--primary-light-1);
}

.btn-solid-on-dark:hover {
  background-color: var(--primary-light-2);
  border-color: var(--primary-light-2);
}

.btn-outline-on-dark {
  padding-top: var(--size-12);
  padding-bottom: var(--size-12);
  padding-left: var(--size-24);
  padding-right: var(--size-24);
  font-size: var(--body-size-m);
  font-weight: 600;
  line-height: 1;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--button-radius);
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
  color: var(--primary-light-1);
  background-color: #00000000;
  border-color: var(--primary-light-1);
}

.btn-outline-on-dark:hover {
  background-color: var(--primary-light-1);
  color: var(--primary-dark-1);
}

/* Layout: boxed containers */

.boxed-s {
  padding-left: max(5%, calc((100% - 47.5rem) / 2));
  padding-right: max(5%, calc((100% - 47.5rem) / 2));
}

.boxed-m {
  padding-left: max(5%, calc((100% - 70rem) / 2));
  padding-right: max(5%, calc((100% - 70rem) / 2));
}

.boxed-l {
  padding-left: max(5%, calc((100% - 77.5rem) / 2));
  padding-right: max(5%, calc((100% - 77.5rem) / 2));
}

.boxed-full {
  padding-left: 5%;
  padding-right: 5%;
}

/* Layout: rounded corners */

.rounded-zero {
  border-radius: var(--size-0);
}

.rounded-s {
  border-radius: var(--radius-s);
}

.rounded-m {
  border-radius: var(--radius-m);
}

.rounded-l {
  border-radius: var(--radius-l);
}

.rounded-full {
  border-radius: 9999px;
}

/* Layout: shadow */

.shadow-s {
  box-shadow: 0 2px 8px #32191F14;
}

.shadow-m {
  box-shadow: 0 8px 24px #32191F1F;
}

.shadow-l {
  box-shadow: 0 16px 48px #32191F33;
}

/* Layout: divider and hidden */

.divider {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: var(--primary-light-3);
  margin-top: var(--size-40);
  margin-bottom: var(--size-40);
}

.hidden {
  display: none;
}

/* Spacing */

.pad-0 {
  padding: var(--size-0);
}

.pad-4 {
  padding: var(--size-4);
}

.pad-8 {
  padding: var(--size-8);
}

.pad-12 {
  padding: var(--size-12);
}

.pad-16 {
  padding: var(--size-16);
}

.pad-20 {
  padding: var(--size-20);
}

.pad-24 {
  padding: var(--size-24);
}

.pad-32 {
  padding: var(--size-32);
}

.pad-40 {
  padding: var(--size-40);
}

.pad-48 {
  padding: var(--size-48);
}

.pad-64 {
  padding: var(--size-64);
}

.pad-80 {
  padding: var(--size-80);
}

.pad-96 {
  padding: var(--size-96);
}

.pad-128 {
  padding: var(--size-128);
}

.pad-160 {
  padding: var(--size-160);
}

.pad-tb-0 {
  padding-top: var(--size-0);
  padding-bottom: var(--size-0);
}

.pad-tb-4 {
  padding-top: var(--size-4);
  padding-bottom: var(--size-4);
}

.pad-tb-8 {
  padding-top: var(--size-8);
  padding-bottom: var(--size-8);
}

.pad-tb-12 {
  padding-top: var(--size-12);
  padding-bottom: var(--size-12);
}

.pad-tb-16 {
  padding-top: var(--size-16);
  padding-bottom: var(--size-16);
}

.pad-tb-20 {
  padding-top: var(--size-20);
  padding-bottom: var(--size-20);
}

.pad-tb-24 {
  padding-top: var(--size-24);
  padding-bottom: var(--size-24);
}

.pad-tb-32 {
  padding-top: var(--size-32);
  padding-bottom: var(--size-32);
}

.pad-tb-40 {
  padding-top: var(--size-40);
  padding-bottom: var(--size-40);
}

.pad-tb-48 {
  padding-top: var(--size-48);
  padding-bottom: var(--size-48);
}

.pad-tb-64 {
  padding-top: var(--size-64);
  padding-bottom: var(--size-64);
}

.pad-tb-80 {
  padding-top: var(--size-80);
  padding-bottom: var(--size-80);
}

.pad-tb-96 {
  padding-top: var(--size-96);
  padding-bottom: var(--size-96);
}

.pad-tb-128 {
  padding-top: var(--size-128);
  padding-bottom: var(--size-128);
}

.pad-tb-160 {
  padding-top: var(--size-160);
  padding-bottom: var(--size-160);
}

.pad-lr-0 {
  padding-left: var(--size-0);
  padding-right: var(--size-0);
}

.pad-lr-4 {
  padding-left: var(--size-4);
  padding-right: var(--size-4);
}

.pad-lr-8 {
  padding-left: var(--size-8);
  padding-right: var(--size-8);
}

.pad-lr-12 {
  padding-left: var(--size-12);
  padding-right: var(--size-12);
}

.pad-lr-16 {
  padding-left: var(--size-16);
  padding-right: var(--size-16);
}

.pad-lr-20 {
  padding-left: var(--size-20);
  padding-right: var(--size-20);
}

.pad-lr-24 {
  padding-left: var(--size-24);
  padding-right: var(--size-24);
}

.pad-lr-32 {
  padding-left: var(--size-32);
  padding-right: var(--size-32);
}

.pad-lr-40 {
  padding-left: var(--size-40);
  padding-right: var(--size-40);
}

.pad-lr-48 {
  padding-left: var(--size-48);
  padding-right: var(--size-48);
}

.pad-lr-64 {
  padding-left: var(--size-64);
  padding-right: var(--size-64);
}

.pad-lr-80 {
  padding-left: var(--size-80);
  padding-right: var(--size-80);
}

.pad-lr-96 {
  padding-left: var(--size-96);
  padding-right: var(--size-96);
}

.pad-lr-128 {
  padding-left: var(--size-128);
  padding-right: var(--size-128);
}

.pad-lr-160 {
  padding-left: var(--size-160);
  padding-right: var(--size-160);
}

/* Flex direction */

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

/* Flex alignment */

.flex-align-start {
  align-items: flex-start;
}

.flex-align-center {
  align-items: center;
}

.flex-align-end {
  align-items: flex-end;
}

.flex-align-stretch {
  align-items: stretch;
}

.flex-justify-start {
  justify-content: flex-start;
}

.flex-justify-center {
  justify-content: center;
}

.flex-justify-end {
  justify-content: flex-end;
}

.flex-justify-between {
  justify-content: space-between;
}

/* Gap */

.gap-0 {
  row-gap: var(--size-0);
  column-gap: var(--size-0);
}

.gap-4 {
  row-gap: var(--size-4);
  column-gap: var(--size-4);
}

.gap-8 {
  row-gap: var(--size-8);
  column-gap: var(--size-8);
}

.gap-12 {
  row-gap: var(--size-12);
  column-gap: var(--size-12);
}

.gap-16 {
  row-gap: var(--size-16);
  column-gap: var(--size-16);
}

.gap-20 {
  row-gap: var(--size-20);
  column-gap: var(--size-20);
}

.gap-24 {
  row-gap: var(--size-24);
  column-gap: var(--size-24);
}

.gap-32 {
  row-gap: var(--size-32);
  column-gap: var(--size-32);
}

.gap-40 {
  row-gap: var(--size-40);
  column-gap: var(--size-40);
}


/* Text alignment */

.text-start {
  text-align: start;
}

.text-center {
  text-align: center;
}

.text-end {
  text-align: end;
}

/* Components */

.card {
  background-color: var(--primary-light-1);
  border-width: 1px;
  border-style: solid;
  border-color: var(--primary-light-3);
  border-radius: var(--radius-m);
}

.badge-1 {
  font-size: var(--body-size-s);
  font-weight: 600;
  letter-spacing: 0.03em;
  padding-top: var(--size-4);
  padding-bottom: var(--size-4);
  padding-left: var(--size-12);
  padding-right: var(--size-12);
  border-radius: 9999px;
  display: inline-block;
  background-color: var(--primary-transparent-1);
  color: var(--primary-brand-2);
}