/* Components */

/* Buttons */

.btn {
    display: block;
    font-size: var(--font-size-24);
    padding: var(--space-16) var(--space-48);
    font-weight: var(--font-weight-bold);
    margin-block: var(--space-32) 0;
    max-width: fit-content;
    transition: all 0.3s ease-in-out;
    background-color: var(--primary);
    color: var(--background);
    text-decoration: none;
}

.btn:hover {
    background-color: var(--accent);
    color: var(--background);
}

.btn--center {
    margin-inline: auto;
}

/* Structural Helpers */

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

.flex--1 {
    flex: 1;
}

.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(0px, 5vw, var(--space-128));
}

.grid--1  { grid-column: span 1; }
.grid--2  { grid-column: span 2; }
.grid--3  { grid-column: span 3; }
.grid--4  { grid-column: span 4; }
.grid--5  { grid-column: span 5; }
.grid--6  { grid-column: span 6; }
.grid--7  { grid-column: span 7; }
.grid--8  { grid-column: span 8; }
.grid--9  { grid-column: span 9; }
.grid--10 { grid-column: span 10; }
.grid--11 { grid-column: span 11; }
.grid--12 { grid-column: span 12; }

@media screen and (max-width: 768px) {
    .grid > .image { order: -1; }
    .grid--1,.grid--2,.grid--3,.grid--4,.grid--5,.grid--6,
    .grid--7,.grid--8,.grid--9,.grid--10,.grid--11 {
        grid-column: span 12;
    }
}

.gap--16  { gap: clamp(0px, 5vw, var(--space-16)); }
.gap--24  { gap: clamp(0px, 5vw, var(--space-24)); }
.gap--32  { gap: clamp(0px, 5vw, var(--space-32)); }
.gap--48  { gap: clamp(0px, 5vw, var(--space-48)); }
.gap--64  { gap: clamp(0px, 5vw, var(--space-64)); }
.gap--96  { gap: clamp(0px, 5vw, var(--space-96)); }
.gap--128 { gap: clamp(0px, 5vw, var(--space-128)); }

/* Alignment Helpers */

.align--center  { align-items: center; }
.order--reverse { order: -1; }

/* Text Helpers */

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

/* Typography Helpers */

.fs--72 { font-size: var(--font-size-72); }
.fs--60 { font-size: var(--font-size-60); }
.fs--54 { font-size: var(--font-size-54); }
.fs--48 { font-size: var(--font-size-48); }
.fs--42 { font-size: var(--font-size-42); }
.fs--36 { font-size: var(--font-size-36); }
.fs--30 { font-size: var(--font-size-30); }
.fs--24 { font-size: var(--font-size-24); }
.fs--18 { font-size: var(--font-size-18); }
.fs--16 { font-size: var(--font-size-16); }
.fs--14 { font-size: var(--font-size-14); }

.fw--light    { font-weight: var(--font-weight-light); }
.fw--normal   { font-weight: var(--font-weight-normal); }
.fw--medium   { font-weight: var(--font-weight-medium); }
.fw--semibold { font-weight: var(--font-weight-semibold); }
.fw--bold     { font-weight: var(--font-weight-bold); }

/* Colour Helpers */

.color--primary   { color: var(--primary); }
.color--secondary { color: var(--secondary); }
.color--accent    { color: var(--accent); }
.color--white     { color: var(--white); }
.color--black     { color: var(--black); }

.bg--primary    { background-color: var(--primary); }
.bg--secondary  { background-color: var(--secondary); }
.bg--accent     { background-color: var(--accent); }
.bg--background { background-color: var(--background); }
.bg--white      { background-color: var(--white); }
.bg--black      { background-color: var(--black); }

/* Spacing Helpers */

.m--0   { margin: 0; }
.m--auto { margin-inline: auto; }
.m--16  { margin: var(--space-16); }
.m--24  { margin: var(--space-24); }
.m--32  { margin: var(--space-32); }
.m--48  { margin: var(--space-48); }
.m--64  { margin: var(--space-64); }
.m--96  { margin: var(--space-96); }
.m--128 { margin: var(--space-128); }
.my--256 { margin: var(--space-256); }

.my--0   { margin-block: 0; }
.my--16  { margin-block: var(--space-16); }
.my--24  { margin-block: var(--space-24); }
.my--32  { margin-block: var(--space-32); }
.my--48  { margin-block: var(--space-48); }
.my--64  { margin-block: var(--space-64); }
.my--96  { margin-block: var(--space-96); }
.my--128 { margin-block: var(--space-128); }
.my--256 { margin-block: var(--space-256); }

.mx--16  { margin-inline: var(--space-16); }
.mx--24  { margin-inline: var(--space-24); }
.mx--32  { margin-inline: var(--space-32); }
.mx--48  { margin-inline: var(--space-48); }
.mx--64  { margin-inline: var(--space-64); }
.mx--96  { margin-inline: var(--space-96); }
.mx--128 { margin-inline: var(--space-128); }
.mx--256 { margin-inline: var(--space-256); }

.p--16  { padding: var(--space-16); }
.p--24  { padding: var(--space-24); }
.p--32  { padding: var(--space-32); }
.p--48  { padding: var(--space-48); }
.p--64  { padding: var(--space-64); }
.p--96  { padding: var(--space-96); }
.p--128 { padding: var(--space-128); }
.p--256 { padding: var(--space-256); }

.py--16  { padding-block: var(--space-16); }
.py--24  { padding-block: var(--space-24); }
.py--32  { padding-block: var(--space-32); }
.py--48  { padding-block: var(--space-48); }
.py--64  { padding-block: var(--space-64); }
.py--96  { padding-block: var(--space-96); }
.py--128 { padding-block: var(--space-128); }
.py--256 { padding-block: var(--space-256); }

.px--16  { padding-inline: var(--space-16); }
.px--24  { padding-inline: var(--space-24); }
.px--32  { padding-inline: var(--space-32); }
.px--48  { padding-inline: var(--space-48); }
.px--64  { padding-inline: var(--space-64); }
.px--96  { padding-inline: var(--space-96); }
.px--128 { padding-inline: var(--space-128); }
.px--256 { padding-inline: var(--space-256); }

.pt--16  { padding-top: var(--space-16); }
.pt--24  { padding-top: var(--space-24); }
.pt--32  { padding-top: var(--space-32); }
.pt--48  { padding-top: var(--space-48); }
.pt--64  { padding-top: var(--space-64); }
.pt--96  { padding-top: var(--space-96); }
.pt--128 { padding-top: var(--space-128); }
.pt--256 { padding-top: var(--space-256); }

.pb--16  { padding-bottom: var(--space-16); }
.pb--24  { padding-bottom: var(--space-24); }
.pb--32  { padding-bottom: var(--space-32); }
.pb--48  { padding-bottom: var(--space-48); }
.pb--64  { padding-bottom: var(--space-64); }
.pb--96  { padding-bottom: var(--space-96); }
.pb--128 { padding-bottom: var(--space-128); }
.pb--256 { padding-bottom: var(--space-256); }

/* Border Helpers */

.border        { border: 2px solid var(--white); }
.border--bottom { border-bottom: 2px solid rgba(255, 255, 255, 0.25); }

.overflow-hidden { overflow: hidden; }
.relative        { position: relative; }

.circle    { border-radius: 50%; }
.radius--8  { border-radius: var(--space-8); }
.radius--16 { border-radius: var(--space-16); }
.radius--24 { border-radius: var(--space-24); }
.radius--32 { border-radius: var(--space-32); }

/* Checklist Helper */

.checklist {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
}

.checklist li { align-items: baseline; }

.checklist li::before {
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
    flex-shrink: 0;
    margin-right: var(--space-8);
}

/* Icons */

.icon { max-width: 64px; }