:root {
    --min-screen-width: 320px;
    --max-screen-width: 1320px;
    --primary: #A5C569;
    --primary-light: #CDE1A7;
    --secondary: hsla(75.86000000000001, 55.56%, 50.59%, 1);
    --c-hover: #87A54F;
    --bg-body: #FFFFFF;
    --bg-surface: #F2F2F2;
    --bg-light-blue: hsla(206, 54%, 97%, 1);
    --text-body: hsla(0, 0%, 21%, 1);
    --text-body-light: hsla(0, 0%, 21%, 1);
    --text-title: hsla(0, 1%, 21%, 1);
    --border-primary: rgba(128, 128, 128, 0.25);
    --shadow-primary: rgba(0, 0, 0, 0.1);
    --shadow-alt: rgba(0, 0, 0, 0.05);
    --light: #ffffff;
    --dark: hsla(0, 0%, 0%, 1);
    --success: hsl(136, 95%, 56%);
    --error: hsl(351, 95%, 56%);
    --space-4xs: clamp(5.24px, calc(-0.03vw + 5.33px), 4.95px);
    --space-3xs: clamp(6.55px, calc(0.05vw + 6.41px), 7px);
    --space-2xs: clamp(8.19px, calc(0.17vw + 7.64px), 9.9px);
    --space-xs: clamp(10.24px, calc(0.38vw + 9.04px), 14px);
    --space-s: clamp(12.8px, calc(0.7vw + 10.56px), 19.8px);
    --space-m: clamp(16px, calc(1.2vw + 12.16px), 28px);
    --space-l: clamp(20px, calc(1.96vw + 13.73px), 39.59px);
    --space-xl: clamp(25px, calc(3.1vw + 15.09px), 55.98px);
    --space-2xl: clamp(31.25px, calc(4.79vw + 15.92px), 79.16px);
    --space-3xl: clamp(39.06px, calc(7.29vw + 15.74px), 111.93px);
    --space-4xl: clamp(48.83px, calc(10.94vw + 13.81px), 158.27px);
    --text-xs: clamp(12.5px, calc(0.05vw + 12.34px), 13px);
    --text-s: clamp(14px, calc(0.2vw + 13.36px), 16px);
    --text-m: clamp(16px, calc(0.2vw + 15.36px), 18px);
    --text-l: clamp(18px, calc(0.8vw + 15.44px), 26px);
    --text-xl: clamp(24px, calc(0.4vw + 22.72px), 28px);
    --text-2xl: clamp(32px, calc(0.4vw + 30.72px), 36px);
    --text-3xl: clamp(25.63px, calc(1.64vw + 20.39px), 42px);
    --hero-title-size: var(--text-4xl);
    --post-title-size: var(--text-2xl);
    --nav-link-size: var(--text-s);
    --header-space: var(--space-s);
    --btn-space: var(--space-xs) var(--space-s);
    --card-space: var(--space-s);
    --footer-space: var(--space-s) var(--space-m);
    --radius-xs: clamp(4px, calc(0vw + 4px), 4px);
    --radius-s: clamp(6px, calc(-0.2vw + 8.64px), 8px);
    --radius-m: clamp(10px, calc(-0.2vw + 12.64px), 12px);
    --radius-l: clamp(16px, calc(-0.4vw + 21.28px), 20px);
    --radius-xl: clamp(26px, calc(-0.6vw + 33.92px), 32px);
    --radius-full: 999rem;
    --shadow-small: 0 0 15px 0 var(--shadow-alt);
    --shadow-s: 0 1.5px 3px var(--shadow-primary);
    --shadow-m: 0 2px 6px var(--shadow-primary);
    --shadow-l: 0 3px 12px var(--shadow-primary);
    --shadow-xl: 0 6px 48px var(--shadow-primary);
}
.italic {
    font-style: italic;
}
.bold {
    font-weight: bold;
}
.lowercase {
    text-transform: lowercase;
}
.uppercase {
    text-transform: uppercase;
}
.underline {
    -webkit-text-decoration: underline;
    text-decoration: underline;
}
.font-300 {
    font-weight: 300;
}
.font-400 {
    font-weight: 400;
}
.font-500 {
    font-weight: 500;
}
.font-600 {
    font-weight: 600;
}
.font-700 {
    font-weight: 700;
}
.font-800 {
    font-weight: 800;
}
.font-900 {
    font-weight: 900;
}
.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.flex-row {
    display: flex;
    flex-direction: row;
}
.flex-column {
    display: flex;
    flex-direction: column;
}
.flex-1 {
    flex: 1;
}
.flex-2 {
    flex: 2;
}
.flex-3 {
    flex: 3;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex-nowrap {
    flex-wrap: nowrap;
}
.items-left {
    justify-items: start;
}
.content-left {
    justify-content: start;
}
.items-center {
    justify-items: center;
}
.content-center {
    justify-content: center;
}
.items-right {
    justify-items: end;
}
.content-right {
    justify-content: end;
}
.items-top {
    align-items: start;
}
.content-top {
    align-content: start;
}
.items-middle {
    align-items: center;
}
.content-middle {
    align-content: center;
}
.items-bottom {
    align-items: end;
}
.content-bottom {
    align-content: end;
}
.items-stretch {
    align-items: stretch;
}
.content-stretch {
    justify-content: stretch;
}
.space-between {
    justify-content: space-between;
}
.space-around {
    justify-content: space-around;
}

.flex-row-c-between {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}