: root{
  --min-screen-width: 380px;
    --max-screen-width: 1320px;
    --primary: hsl(240, 100%, 30%);
    --secondary: hsl(241, 100%, 24%);
    --accent: hsl(25, 83%, 55%);
    --primary-l-1: hsl(0, 0%, 100%);
    --primary-l-2: hsl(240, 37%, 97%);
    --primary-l-3: hsl(240, 29%, 90%);
    --primary-d-1: hsl(240, 40%, 15%);
    --primary-d-2: hsl(240, 30%, 25%);
    --primary-d-3: hsl(240, 20%,35%);
    --light: hsl(0, 0%, 100%);
    --dark: hsl(0, 0%, 0%);
    --shadow-primary: hsla(0, 0%, 0%, 0.5);
    --transparent: hsla(0, 0%, 0%, 0);
    --success: hsl(136, 95%, 56%);
    --error: hsl(351, 95%, 56%);
    --link-light: hsl(240, 100%, 32%);
    --link-dark: hsl(240, 100%, 22%);
    --space-2xs: clamp(0.25rem, calc(0.43vw + 0.15rem), 0.5rem);
    --space-xs: clamp(0.5rem, calc(0.43vw + 0.4rem), 0.75rem);
    --space-s: clamp(0.75rem, calc(0.43vw + 0.65rem), 1rem);
    --space-m: clamp(1rem, calc(0.43vw + 0.9rem), 1.25rem);
    --space-l: clamp(1.25rem, calc(0.43vw + 1.15rem), 1.5rem);
    --space-xl: clamp(1.5rem, calc(0.85vw + 1.3rem), 2rem);
    --space-2xl: clamp(2rem, calc(1.7vw + 1.6rem), 3rem);
    --space-3xl: clamp(3rem, calc(1.7vw + 2.6rem), 4rem);
    --space-4xl: clamp(4rem, calc(1.7vw + 3.6rem), 5rem);
    --title-xs: clamp(0.69rem, calc(0.02vw + 0.69rem), 0.7rem);
    --title-s: clamp(0.83rem, calc(0.18vw + 0.79rem), 0.94rem);
    --title-m: clamp(1rem, calc(0.43vw + 0.9rem), 1.25rem);
    --title-l: clamp(1.2rem, calc(0.79vw + 1.01rem), 1.67rem);
    --title-xl: clamp(1.44rem, calc(1.33vw + 1.12rem), 2.22rem);
    --title-2xl: clamp(1.73rem, calc(2.1vw + 1.23rem), 2.96rem);
    --title-3xl: clamp(2.07rem, calc(3.19vw + 1.32rem), 3.95rem);
    --title-4xl: clamp(2.49rem, calc(4.72vw + 1.37rem), 5.26rem);
    --text-s: clamp(0.75rem, 0.699rem + 0.213vw, 0.875rem);
    --text-m: clamp(1.00rem, 0.96000rem + 0.20000vw, 1.13rem);
    --text-l: clamp(1.25rem, 1.149rem + 0.426vw, 1.5rem);
    --line-height-xs: 1.1;
    --line-height-s: 1.2;
    --line-height-m: 1.3;
    --line-height-l: 1.4;
    --line-height-xl: 1.5;
    --space-0: 0px;
    --pad-btn-vertical: 0.5rem;
    --pad-btn-horizontal: 1rem;
    --site-content-width: 82.5rem;
    --container-padding: 0px;
    --container-gap: 25px;
    --radius-xs: clamp(0.5rem, calc(-0.43vw + 0.85rem), 0.75rem);
    --radius-s: clamp(0.75rem, calc(-0.43vw + 1.1rem), 1rem);
    --radius-m: clamp(1rem, calc(-0.85vw + 1.7rem), 1.5rem);
    --radius-l: clamp(1.5rem, calc(-0.85vw + 2.2rem), 2rem);
    --border-width-s: 1px;
    --border-width-m: 2px;
    --border-width-l: 4px;
    --border-width-bottom-s: 0px 0px 1px 0px;
    --width-boxed: 82.5rem;
    --width-full: 100%;
}
.bg-primary-l-1 {
    background-color: var(--primary-l-1);
}
.bg-primary-l-2 {
    background-color: var(--primary-l-2);
}
.bg-primary-l-3 {
    background-color: var(--primary-l-3);
}
.bg-primary-d-1 {
    background-color: var(--primary-d-1);
}
.bg-primary-d-2 {
    background-color: var(--primary-d-2);
}
.bg-primary-d-3 {
    background-color: var(--primary-d-3);
}
.bg-transparent {
    color: var(--transparent);
}
.color-secondary {
    color: var(--secondary);
}
.color-accent {
    color: var(--accent);
}
.color-primary {
    color: var(--primary);
}
.title-4xl {
    font-size: var(--title-4xl);
    line-height: var(--line-height-xs);
    font-weight: 700;
}
.title-3xl {
    font-size: var(--title-3xl);
    line-height: var(--line-height-s);
    font-weight: 700;
}
.title-2xl {
    font-size: var(--title-2xl);
    line-height: var(--line-height-s);
    font-weight: 700;
}
.title-xl {
    font-size: var(--title-xl);
    line-height: var(--line-height-s);
    font-weight: 700;
}
.title-l {
    font-size: var(--title-l);
    line-height: var(--line-height-s);
    font-weight: 700;
}
.title-m {
    font-size: var(--title-m);
    line-height: var(--line-height-s);
    font-weight: 600;
}
.title-s {
    font-size: var(--title-s);
    line-height: var(--line-height-s);
}
.title-xs {
    font-size: var(--title-xs);
    line-height: var(--line-height-s);
}
.text-medium {
    font-size: var(--text-m);
    line-height: var(--line-height-m);
}
.text-large {
    font-size: var(--text-l);
    line-height: var(--line-height-m);
}
.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.pad-0 {
    padding: var(--space-0);
}
.pad-s {
    padding: var(--space-s);
}
.pad-m {
    padding: var(--space-m);
}
.pad-l {
    padding: var(--space-l);
}
.pad-xl {
    padding: var(--space-xl);
}
.pad-lm {
    padding-top: var(--space-l);
    padding-bottom: var(--space-l);
    padding-left: var(--space-m);
    padding-right: var(--space-m);
}
.pad-ms {
    padding-top: var(--space-m);
    padding-bottom: var(--space-m);
    padding-left: var(--space-s);
    padding-right: var(--space-s);
}
.pad-xlm {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
    padding-left: var(--space-m);
    padding-right: var(--space-m);
}
.pad-xsm {
    padding-top: var(--space-xs);
    padding-bottom: var(--space-xs);
    padding-left: var(--space-m);
    padding-right: var(--space-m);
}
.pad-2xl {
    padding: var(--space-2xl);
}
.pad-3xl {
    padding: var(--space-3xl);
}
.pad-4xl {
    padding: var(--space-4xl);
}
.gap-xs {
    column-gap: var(--space-xs);
    row-gap: var(--space-xs);
}
.gap-s {
    column-gap: var(--space-s);
    row-gap: var(--space-s);
}
.gap-m {
    column-gap: var(--space-m);
    row-gap: var(--space-m);
}
.gap-l {
    column-gap: var(--space-l);
    row-gap: var(--space-l);
}
.gap-xl {
    column-gap: var(--space-xl);
    row-gap: var(--space-xl);
}
.gap-2xl {
    column-gap: var(--space-2xl);
    row-gap: var(--space-2xl);
}
.gap-3xl {
    column-gap: var(--space-3xl);
    row-gap: var(--space-3xl);
}
.gap-4xl {
    column-gap: var(--space-4xl);
    row-gap: var(--space-4xl);
}
.width-boxed {
    width: var(--site-content-width);
}
.width-full {
    width: 100%;
}
.width-half {
    width: 50%;
}
.width-third {
    width: 33.3%;
}
.flex-row {
    display: flex;
    flex-direction: row;
}
.flex-row-reverse {
    flex-direction: row-reverse;
}
.flex-column {
    display: flex;
    flex-direction: column;
}
.flex-column-reverse {
    flex-direction: column-reverse;
}
.flex-grow {
    flex-grow: 1;
}
.flex-shrink {
    flex-shrink: 2;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex-nowrap {
    flex-wrap: nowrap;
}
.align-items-center {
    align-items: center;
}
.align-items-start {
    align-items: flex-start;
}
.align-items-end {
    align-items: flex-end;
}
.align-items-stretch {
    align-items: stretch;
}
.justify-content-start {
    justify-content: flex-start;
}
.justify-content-end {
    justify-content: flex-end;
}
.justify-content-center {
    justify-content: center;
}
.justify-content-space-between {
    justify-content: space-between;
}
.justify-space-around {
    justify-content: space-around;
}
.justify-content-space-evenly {
    justify-content: space-evenly;
}
.display-flex {
    display: flex;
}
.display-block {
    display: block;
}
.display-grid {
    display: grid;
}
.display-inline-block {
    display: inline-block;
}
.display {
    display: inline-flex;
}
.display-none {
    display: none;
}
.radius-xs {
    border-radius: var(--radius-xs);
}
.radius-s {
    border-radius: var(--radius-s);
}
.radius-m {
    border-radius: var(--radius-m);
}
.radius-l {
    border-radius: var(--radius-l);
}
.border-light {
    border-width: var(--border-width-l);
    border-style: solid;
    border-color: var(--primary-l-3);
    border-radius: var(--radius-m);
    border-top-color: var(--primary-l-2);
}
.border-dark {
    border-width: var(--border-width-l);
    border-style: solid;
    border-color: var(--primary-d-3);
    border-radius: var(--radius-m);
    border-top-color: var(--primary-d-2);
}
.icon-size-4xl {
    height: auto;
    width: var(--space-4xl);
}
.icon-size-3xl {
    height: auto;
    width: var(--space-3xl);
}
.icon-size-2xl {
    height: auto;
    width: var(--space-2xl);
}
.icon-size-xl {
    height: auto;
    width: var(--space-xl);
}
.icon-size-l {
    height: auto;
    width: var(--space-l);
}
.icon-size-m {
    height: auto;
    width: var(--space-m);
}
.aspect-1 {
    aspect-ratio: 1;
}
.aspect-4-3 {
    aspect-ratio: 4/3;
}
.aspect-3-4 {
    aspect-ratio: 3/4;
}
.aspect-3-2 {
    aspect-ratio: 3/2;
}
.aspect-2-3 {
    aspect-ratio: 2/3;
}
.aspect-16-9 {
    aspect-ratio: 16/9;
}
.aspect-9-16 {
    aspect-ratio: 9/16;
}
.btn-primary {
    color: var(--light);
    background-color: var(--primary);
    border-style: solid;
    border-width: var(--border-width-m);
    border-color: var(--primary);
    border-radius: var(--radius-m);
    display: inline-block;
    padding-top: var(--pad-btn-vertical);
    padding-bottom: var(--pad-btn-vertical);
    padding-left: var(--pad-btn-horizontal);
    padding-right: var(--pad-btn-horizontal);
}
.btn-primary:hover {
    color: var(--primary);
    background-color: var(--light);
    text-decoration: underline;
    font-weight: 500;
}
.btn-secondary {
    color: var(--light);
    background-color: var(--secondary);
    border-style: solid;
    border-width: var(--border-width-m);
    border-color: var(--secondary);
    border-radius: var(--radius-m);
    display: inline-block;
    padding-top: var(--pad-btn-vertical);
    padding-bottom: var(--pad-btn-vertical);
    padding-left: var(--pad-btn-horizontal);
    padding-right: var(--pad-btn-horizontal);
}
.btn-secondary:hover {
    color: var(--secondary);
    background-color: var(--light);
    text-decoration: underline;
    font-weight: 500;
}
.btn-outline {
    color: var(--primary);
    background-color: var(--transparent);
    border-style: solid;
    border-width: var(--border-width-m);
    border-color: var(--primary);
    border-radius: var(--radius-m);
    display: inline-block;
    padding-top: var(--pad-btn-vertical);
    padding-bottom: var(--pad-btn-vertical);
    padding-left: var(--pad-btn-horizontal);
    padding-right: var(--pad-btn-horizontal);
}
.btn-outline:hover {
    color: var(--primary);
    background-color: transparent;
    text-decoration: underline;
    font-weight: 500;
}
.card-light {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-m);
    font-size: var(--text-m);
    line-height: var(--line-height-xl);
    color: var(--primary);
    background-color: var(--primary-l-2);
    border-style: solid;
    border-width: var(--border-width-m);
    border-color: var(--primary-l-3);
    border-radius: var(--radius-m);
}
.card-dark {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-m);
    font-size: var(--text-m);
    line-height: var(--line-height-xl);
    color: var(--primary-l-1);
    background-color: var(--primary-d-2);
    border-style: solid;
    border-width: var(--border-width-l);
    border-color: var(--primary-d-3);
    border-radius: var(--radius-m);
}
.visible {
    visibility: visible;
}
.hidden {
    visibility: hidden;
}
.list-none {
    list-style-type: none;
}
.white-space-nowrap {
    white-space: nowrap;
}