:root {
    --font-family: system-ui, sans-serif;

    --fs-300: clamp(0.94rem, calc(0.92rem + 0.08vw), 0.98rem);
    --fs-400: clamp(1.13rem, calc(1.06rem + 0.33vw), 1.31rem);
    --fs-500: clamp(1.35rem, calc(1.21rem + 0.69vw), 1.75rem);
    --fs-600: clamp(1.62rem, calc(1.37rem + 1.24vw), 2.33rem);
    --fs-700: clamp(1.94rem, calc(1.54rem + 2.03vw), 3.11rem);
    --fs-800: clamp(2.33rem, calc(1.7rem + 3.15vw), 4.14rem);
    --fs-900: clamp(2.8rem, calc(1.85rem + 4.74vw), 5.52rem);

    --clr-primary: #a21f4b;
    --clr-secondary: #0c2739;
    --clr-accent: #91e1fa;
    --clr-light: #94999d;
    --clr-light2: #585B5F;
}

/* site grid */
.container {
    --padding-inline: 1rem;
    --content-max-width: 990px;
    --breakout-max-width: 1200px;

    --breakout-size: calc(
        (var(--breakout-max-width) - var(--content-max-width)) / 2
    );

    position: relative;
    display: grid;
    grid-template-columns:
        [full-width-start] minmax(var(--padding-inline), 1fr)
        [breakout-start] minmax(0, var(--breakout-size))
        [content-start] min(
            100% - (var(--padding-inline) * 2),
            var(--content-max-width)
        )
        [content-end]
        minmax(0, var(--breakout-size)) [breakout-end]
        minmax(var(--padding-inline), 1fr) [full-width-end];
}

.container > :not(.breakout, .full-width),
.full-width > :not(.breakout, .full-width) {
    grid-column: content;
}

.container > .breakout {
    grid-column: breakout;
}

.container > .full-width {
    grid-column: full-width;

    display: grid;
    grid-template-columns: inherit;
}

/* standards */
body {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--fs-400);
    line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
ul,
ol {
    margin: 0 0 1rem 0;
    line-height: 1.4;
}
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    line-height: 1.25;
}

ul {
    padding-left: 15px;
}

a {
    color: #257ABB;
}

img {
    max-width: 100%;
    display: inline-block;
    height: auto;
}

main,
section {
    position: relative;
    scroll-margin-top: 85px;
}

h1,
.h1 {
    font-size: var(--fs-700);
}
h2,
.h2 {
    font-size: var(--fs-600);
}
h3,
.h3 {
    font-size: var(--fs-500);
}
h4,
.h4 {
    font-size: var(--fs-400);
}

/* utilities */
.bg-primary {
    background: var(--clr-primary);
}
.bg-secondary {
    background: var(--clr-secondary);
    color: #FFF;
}
.bg-accent {
    background: var(--clr-accent);
}
.bg-light {
    background: var(--clr-light);
    color: #FFF;
}
.bg-light2 {
    background: var(--clr-light2);
    color: #FFF;
}

.text-primary {
    color: var(--clr-primary);
}
.text-secondary {
    color: var(--clr-secondary);
}
.text-accent {
    color: var(--clr-accent);
}
.text-light {
    color: var(--clr-light);
}

.border-bottom-primary {
    border-bottom: solid 5px var(--clr-primary);
}
.border-bottom-white {
    border-bottom: solid 5px #FFF;
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.d-none {
    display: none !important;
    visibility: hidden;
}

.mb-0 {
    margin-bottom: 0;
}

.section-padding {
    padding-block: 2.5rem;
}

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

.list-unstyled {
    list-style: none;
    padding: 0;
}

.card {
    background-color: #FFF;
    border-radius: 30px;
    padding: 20px;
    color: #000;
}
.card h3 {
    color: var(--clr-secondary);
}
.card ul {
    text-align: left;
}

.skip-to-content {
    position: absolute;
    top: 0;
    left: 0;
    padding: 1rem;
    background: #fff;
    color: #000;
    transform: translateY(-100%);
    transition: transform 0.2s;
    z-index: 1000;
}
.skip-to-content:focus {
    transform: translateY(0);
}