/* RESETS */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
}
/* CUSTOM PROPERTIES */
:root {
    /* COLORS */
    --clr-light: #fafafa;
    --clr-dark: #111111;

    /* dark light switch */
    --clr-base: #fafafa;
    --clr-text: #111;

    --clr-bg-dark: #1b1b1b;
    --clr-bg-light: #fafafa;
    --clr-bg-color: #999999;

    --clr-text-1: #222222;
    --clr-text-2: #555555;

    /* COLOR SCALE EXAMPLE */
    --clr-gray-50: #e7e7e7; /* lightest shade */
    --clr-gray-100: #dddddd;
    --clr-gray-200: #bbbbbb;
    --clr-gray-300: #999999;
    --clr-gray-400: #777777; /* standard shade, typically used for primary elements */
    --clr-gray-500: #555555; /* primary color */
    --clr-gray-600: #444444;
    --clr-gray-700: #333333;
    --clr-gray-800: #222222;
    --clr-gray-900: #1f1f1f; /* darkest shade */

    --clr-success: #007e33;
    --clr-success-outline: #62af81;
    --clr-success-bg: #d9ece1;

    --clr-danger: #b61212;
    --clr-danger-outline: #bb2424;
    --clr-danger-bg: #f1d3d3;

    --clr-primary-400: #999999;
    --clr-primary-500: #777777;
    --clr-primary-600: #555555;

    --clr-primary-400: #5c9ae0;
    --clr-primary-500: #2e6eb8;
    --clr-primary-600: #2a486b;

    --clr-secondary-400: ;
    --clr-secondary-500: ;
    --clr-secondary-600: ;

    --clr-tertiary-400: ;
    --clr-tertiary-500: ;
    --clr-tertiary-600: ;
    
    --clr-quaternary-400: ;
    --clr-quaternary-500: ;
    --clr-quaternary-600: ;

    /* MISCELLANEOUS */
    --soft-shadow: 0 0.75rem 1rem #eee;
    --gradient-generic: linear-gradient(
        45deg,
        #ddd,
        #444
    );

    /* FONTS */
    --font-heading: 'Arial', Helvetica, sans-serif;
    --font-body: 'Arial', Helvetica, sans-serif;
    --font-accent: ;

    /* 8PT GRID SPACING */
    --gap8: 0.5rem;
    --gap16: 1rem;
    --gap24: 1.5rem;
    --gap32: 2rem;
    --gap40: 2.5rem;
    --gap48: 3rem;
    --gap56: 3.5rem;
    --gap64: 4rem;
    --gap72: 4.5rem;
    --gap80: 5rem;
    --gap88: 5.5rem;
    --gap96: 6rem;
    --gap104: 6.5rem;


    /* ROUNDED BORDERS */
    --rounded-corners: 0.25rem;
    --rounded: 25rem;

}
/* ------------------------------- */
/* For dark and light mode functionality */
/* @media (prefers-color-scheme: dark) {
    :root {
        insert dark mode colors here
    }
}

html {
    color-scheme: dark light;
} */
/* ------------------------------- */
body {
    position: relative;
    overflow-x: hidden;
    scroll-behavior: smooth;
    font-family: 'Arial', Helvetica, sans-serif;
    font-family: var(--font-body);
}
header {
    color: #111;
    color: var(--clr-text);
    background-color: #fafafa;
    background-color: var(--clr-base);
}
main {
    color: #111;
    color: var(--clr-text);
    background-color: #fafafa;
    background-color: var(--clr-base);
}
footer {
    color: #111;
    color: var(--clr-text);
    background-color: #fafafa;
    background-color: var(--clr-base);
}
.body-locked {
    overflow: hidden;
}
/* GLOBAL FONT FAMILY */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Arial', Helvetica, sans-serif;
    font-family: var(--font-heading);
    line-height: 112%;
}
p,
a,
li,
span,
input,
details,
dialog,
summary,
label,
select,
textarea,
button,
datalist,
fieldset,
legend,
meter,
optgroup,
option,
output,
progress {
    font-family: 'Arial', Helvetica, sans-serif;
    font-family: var(--font-body);
    line-height: 1.25rem;
    letter-spacing: 0.25px;
}
/* RESPONSIVE CLASSES */
body .desktop,
body .desktop-flex,
body .desktop-grid {
    display: none;
}
/* 1024px */
@media (min-width: 64rem) {

    body .desktop {
        display: block;
    }

    body .desktop-flex {
        display: flex;
    }

    body .desktop-grid {
        display: grid;
    }
    
    .mobile {
        display: none !important;
    }
    
}
a {
    -webkit-text-decoration: none;
    text-decoration: none;
    color: #111;
    color: var(--clr-text);
}
.--uppercase {
    text-transform: uppercase;
}
select,
input,
textarea,
button {
    font-size: 1rem;
}
h1 {
    font-size: 2.5rem;
}
h2 {
    font-size: 2rem;
}
.footer__link-list span {
    font-weight: 600;
    font-size: 1.25rem;
}
/* 768px */
@media (min-width: 48rem) {

    h1 {
        font-size: 3.5rem;
    }
    
    h2 {
        font-size: 2.5rem;
    }

}
body:has(> aside) main,
body:has(> aside) aside {
    outline: 4px solid red;
}
aside {
    display: grid;
    z-index: 1;
}
body:has(> aside) {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    padding-top: 6rem;
}
/* 1024px */
@media (min-width: 64rem) {

    body:has(> aside) {
        display: flex;
        flex-wrap: nowrap;
        padding-top: 0;
    }

    aside {
        flex-grow: 2;
        flex-shrink: 1;
        flex-basis: 280px; /* Base size of 280px */
        min-width: 280px;
        max-width: 360px;
        padding-top: 6rem;
        height: 100vh;
    }    

    body:has(> aside) main {
        flex-grow: 1;
        flex-shrink: 1;
        padding-top: 6rem;

    }

}
/* fluid container size */
.container--fluid {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}
.container--fluid {
    min-width: 14rem;
    width: 100%;
    grid-column: 1 / -1;
}
/* controlled container sizes */
.container {
    width: 14rem;
}
/* 320px */
@media (min-width: 20rem) {

    .container {
        width: 17.5rem;
    }
}
/* 480px */
@media (min-width: 30rem) {

    .container {
       width: 25rem;
    }
}
/* 560px */
@media (min-width: 35rem) {

    .container {
       width: 32rem;
    }
}
/* 768px */
@media (min-width: 48rem) {

    .container {
       width: 44rem;
    }
}
/* 1024px */
@media (min-width: 64rem) {

    .container--fluid {
        padding-left: 4rem !important;
        padding-right: 4rem !important;
    }

    .container {
       width: 56rem;
    }
}
/* 1200px */
@media (min-width: 75rem) {

    .container {
       width: 63rem;
    }
}
/* 1440px */
@media (min-width: 90rem) {

    .container {
       width: 70.5rem;
    }
}
/* 1600px */
@media (min-width: 100rem) {

    .container {
       width: 80rem;
    }
}
footer {
    display: grid;
    align-content: center;
    width: 100%;
    transition-duration: 250ms;
    border-top: 1px solid #111;
    border-bottom: 1px solid #111;
    padding-top: 6rem;
    padding-bottom: 2rem;
}
.footer__container {
    display: flex;
    justify-content: space-between;
    align-items: start;
}
.footer-top,
.footer-bottom {
    display: grid;
    justify-content: center;
}
.footer-top .footer__container {
    flex-direction: column;
}
.footer--basic-1 .footer-top .footer__container {
    flex-direction: row;
}
.footer__content-grid {
    display: flex;
    flex-direction: column;
}
.footer__content-wrapper,
.footer__content-wrapper--m-col-2,
.footer__content-wrapper--lg-col-2 {
    display: flex;
    flex-direction: column;
}
.footer--contact-1 .footer__content-wrapper-1 {
    flex-direction: row;
    flex-wrap: wrap;
}
.footer__content-wrapper--horizontal {
    display: flex;
    flex-wrap: nowrap;
}
footer ul {
    list-style: none;
}
.footer__link-list,
.footer__link-list ul {
    display: flex;
    flex-direction: column;
}
.footer--contact-1 .footer__link-list {
    width: -moz-fit-content;
    width: fit-content;
}
.footer__sm-list {
    display: flex;
}
.footer__sm-list--vertical {
    display: flex;
    flex-direction: column;
}
.footer__sm-list img {
    aspect-ratio: 1/1;
    /* min size should be 1rem */
    /* max size should be 1.5rem */
    height: 1.25rem;
    width: 1.25rem;
    -o-object-fit: contain;
       object-fit: contain;
}
.footer__gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.footer__gallery-item-wrapper {
    width: -moz-fit-content;
    width: fit-content;
    height: -moz-fit-content;
    height: fit-content;
}
.footer__gallery-item {
    position: relative;
    height: 6rem;
    width: 6rem;
}
.footer__gallery-item .overlay {
    position: absolute;
    display: grid;
    justify-content: center;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: rgba(17,17,17,0.46667);
}
.footer__gallery-item .overlay-text {
    display: grid;
    justify-content: center;
    align-content: center;
    text-align: center;
}
.footer-bottom {
    padding-top: 2rem;
}
/* 400px */
@media (min-width: 25rem) {

    .footer__gallery {
        grid-template-columns: 1fr 1fr 1fr;
    }

}
/* 440px */
@media (min-width: 27.5rem) {

    .footer--simple-1 .footer__content-wrapper {
        flex-direction: row;
        width: 100%;
        flex-wrap: wrap;
        white-space: none;
    }

}
/* 560px */
@media (min-width: 35rem) {
    
    .footer--contact-1 .footer__content-wrapper,
    .footer__content-wrapper--m-col-2 {
        gap: 6rem !important;
    }
    
    .footer--contact-1 .footer__content-wrapper,
    .footer__content-wrapper--m-col-2 {
        flex-direction: row;
    }

}
/* 680px */
@media (min-width: 42.5rem) {

    .footer--simple-1 .footer__container,
    .footer--contact-1 .footer__content-wrapper {
        flex-direction: row;
    }

    .footer--simple-1 .footer__content-wrapper {
        width: auto;
    }

    .footer__content-wrapper {
        flex-direction: row;
    }

    .footer--complex-1 .footer__content-wrapper {
        flex-direction: column;
    }

}
/* 768px */
@media (min-width: 48rem) {

    .footer__content-grid {
        flex-direction: row;
    }

}
/* 880px */
@media (min-width: 55rem) {
    
    .footer__content-wrapper--lg-col-2 {
        flex-direction: row;
    }

}
/* 1200px */
@media (min-width: 75rem) {

    .footer--complex-1 .footer__container > .footer__content-wrapper {
        flex-direction: row;
    }

    .footer--complex-1 .footer__container > .footer__content-wrapper > .flex-col-1,
    .footer__content-wrapper--lg-col-2 {
        flex-grow: 1;
    }

    .footer__content-wrapper--lg-col-2 > .flex-col-1,
    .footer__content-wrapper--m-col-2 {
        flex-grow: 0;
    }

    .footer--complex-1 .iframe,
    .footer--complex-1 iframe {
        max-width: 32rem;
    }

}
footer .content-centered {
    justify-content: center;
}
footer .content-right {
    justify-content: right;
}
footer .content-left {
    justify-content: left;
}
footer .content-spaced {
    justify-content: space-between;
}
header {
    position: absolute;
    display: grid;
    align-content: center;
    height: 6rem;
    width: 100%;
    z-index: 10;
    transition-duration: 250ms;
    border-top: 1px solid #111;
    border-bottom: 1px solid #111;
}
header:has(> .container) {
    justify-content: center;
}
.header__container,
.header__content-wrapper,
.header__content-wrapper-left,
.header__content-wrapper-right {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header__button-options {
    display: flex;
    align-items: center;
}
.header__content-wrapper-left {
    width: 100%;
    gap: 4rem;
}
.header__content-wrapper,
.header__content-wrapper-right {
    gap: 3rem;
}
.header__button-options {
    gap: 1rem;
}
/* multi-level header styles */
.header--multi-level {
    height: auto
}
.header--multi-level .header__container {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.header__container-bottom {
    display: flex;
    align-items: center;
    gap: 3rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-top: 1px solid #dddddd;
    border-top: 1px solid var(--clr-gray-100);
}
.header__container-bottom .header__nav__options {
    width: -moz-fit-content;
    width: fit-content;
}
.header__container-top {
    display: flex;
    align-items: center;
    gap: 3rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #dddddd;
    border-bottom: 1px solid var(--clr-gray-100);
}
/* -------------------------------------------- convert to utility? */
header .content-centered {
    justify-content: center;
}
header .content-right {
    justify-content: right;
}
header .content-left {
    justify-content: left;
}
header .content-spaced {
    justify-content: space-between;
}
/* additional styles */
.header--transparent {
    background-color: rgba(0,0,0,0.00392);
}
.header--fixed {
    position: fixed;
    top: 0;
}
.logo img {
    height: 3.5rem;
    -o-object-fit: contain;
       object-fit: contain;
}
.header__sm-list img {
    aspect-ratio: 1/1;
    /* min size should be 1rem */
    /* max size should be 1.5rem */
    height: 1.25rem;
    width: 1.25rem;
    -o-object-fit: contain;
       object-fit: contain;
}
/* Currently for single level headers ONLY */
.header--shrink {
    height: 4rem;
}
/* Optional change for shrinking headers */
.header--shrink .logo img {
    height: 1.75rem;
}
/* 1024px */
@media (min-width: 64rem) {

    .header--multi-level .header__container {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .header__content-wrapper-left {
        width: -moz-fit-content;
        width: fit-content;
    }

    .header__content-wrapper-right {
        flex-direction: row;
    }

    .header__sm-list {
        display: flex;
        gap: 1.25rem;
    }
}
.section__container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.aside__container {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}
.aside__container {
    width: 100%;
    grid-column: 1 / -1;
    padding-top: 4rem;
    padding-bottom: 4rem;
}
/* grid layouts */
.grid-col-1 {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
}
.grid-col-2 {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
}
.grid-col-3--grow {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
}
.grid--fluid {
    display: flex;
    flex-wrap: wrap;
}
.flex-col-1 {
    display: flex;
    flex-direction: column;
}
.flex-col-2 {
    display: flex;
    flex-direction: column;
    justify-content: left;
}
.flex-col-3 {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.flex-col-left {
    align-items: start;
}
.testimonial-grid {
    row-gap: 4rem;
    flex-direction: column;
}
.portfolio-grid {
    gap: 1rem;
}
/* 560px */
@media (min-width: 35rem) {

    .flex-col-3 {
        flex-direction: row;
        align-items: center;
    }

}
/* 640px */
@media (min-width: 40rem) {

    .flex-col-3 {
        flex-direction: row;
        align-items: center;
    }

    .grid-col-3--grow {
        display: grid;
        grid-template-columns: repeat(1, minmax(240px, 480px));
    }

}
/* 768px */
@media (min-width: 48rem) {

    .flex-col-2 {
        flex-wrap: nowrap;
    }

    .grid-col-2 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        justify-content: center;
    }

    .grid-col-3 {
        grid-template-columns: repeat(3, minmax(360px, 1fr));
    }

    .grid-col-3--grow {
        display: grid;
        grid-template-columns: repeat(3, minmax(160px, 480px));
    }

    .testimonial-grid {
        -moz-column-gap: 4rem;
             column-gap: 4rem;
        flex-direction: row;
    }

}
/* 1024px */
@media (min-width: 64rem) {

    .flex-col-2 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
/* 
    .flex-col-2 .flex-col-1:nth-child(1),
    .flex-col-2 .flex-col-1:nth-child(2) {
        min-width: 25rem;
    } */

    .grid-col-3--grow {
        grid-template-columns: repeat(3, minmax(240px, 1fr));
    }

}
/* 1200px */
@media (min-width: 75rem) {

    .about-content .flex-col-1 {
        max-width: 30rem;
    }
}
/* 1600px */
@media (min-width: 100rem) {

    .about-content .flex-col-1 {
        max-width: 35rem;
    }
}
/* experimental */
.fluid-grid--grow {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
}
/* 640px */
@media (min-width: 40rem) {

}
/* 768px */
@media (min-width: 48rem) {

}
/* 1024px */
@media (min-width: 64rem) {

    .fluid-grid--grow {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }

}
section {
    display: grid;
    padding-top: 4rem;
    padding-bottom: 4rem;
    z-index: 1;
}
section:has(> .container) {
    justify-content: center;
}
/* created for scroller as it cannot function inside a normal section */
.section {
    padding-top: 4rem;
    padding-bottom: 4rem;
    z-index: 1;
}
.hero {
    min-height: 80vh;
    padding-top: 10rem; /* adjust with header size */
    background-image: linear-gradient(
        to right,
        rgba(0,0,0,0.66),
        rgba(0,0,0,0.1)
        ), url('assets/paint-hero-2.jpg');
    color: #fafafa;
    color: var(--clr-light);
    background-size: cover;
    background-position: right;
}
.hero--about,
.hero--services,
.hero--portfolio,
.hero--contact {
    padding-top: 16rem !important; 
}
.hero--about,
.hero--services,
.hero--portfolio,
.hero--contact {
    min-height: auto;
    padding-bottom: 10rem; 
}
.hero--about,
.hero--services,
.hero--portfolio,
.hero--contact {
    background-image: linear-gradient(
        to bottom,
        rgba(0,0,0,0.50),
        rgba(0,0,0,0.25)
        ), url('assets/paint-hero.jpg');
    background-size: cover;
    background-position: center;
}
.banner-image {
    width: 100%;
    aspect-ratio: 2 / 1;
    background-color: #777777;
    background-color: var(--clr-gray-400);
    background-position: center;
    background-size: cover;
}
.--colored-bg {
    background-color: #2a486b;
    background-color: var(--clr-primary-600);
    color: #fafafa;
    color: var(--clr-light);
}
.about-content {
    row-gap: 4rem;
    row-gap: var(--gap64);
}
.about-content img {
    -o-object-fit: cover;
       object-fit: cover;
}
/* 1024px */
@media (min-width: 64rem) {
    
    section {
        /* padding: 7.5rem 0; */
        padding-top: 6rem;
        padding-bottom: 6rem;
    }

    .hero {
        padding-top: 8rem; /* adjust with header size */
    }

    .banner-image {
        aspect-ratio: 4 / 1;
    }

}
/* tabs */
.tab {
    display: none;
    gap: 2rem;
}
.tab.active {
    display: grid;
}
.tab-options {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
.tab-button {
    display: inline-flex;
}
.tab-button.underline {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.tab-button.pill {
    padding: 0.75rem 1rem;
}
.tab-button.underline.active {
    border-bottom: 2px solid #777777;
    border-bottom: 2px solid var(--clr-gray-400);
}
.tab-button.pill.active {
    background-color: #dddddd;
    background-color: var(--clr-gray-100);
}
@media (min-width: 32rem) {

    .tab-options {
        gap: 4rem;
    }

}
.form-tab {
    display: none;
}
.alert-wrapper {
    /* position: absolute; */
}
.alert {
    position: relative;
    display: inline-flex;
    padding: 1rem 1.5rem;
}
.alert span {
    line-height: 1.5rem;
}
.alert--1r {
    align-items: start;
}
.alert-header {
    display: flex;
    justify-content: space-between;
}
.alert--2r {
    flex-direction: column;
}
.alert span:nth-child(1) {
    font-weight: 600;
}
.success {
    /* color: var(--clr-light); */
    border: 1px solid #62af81;
    border: 1px solid var(--clr-success-outline);
    background-color: #d9ece1;
    background-color: var(--clr-success-bg);
}
.danger {
    /* color: var(--clr-light); */
    border: 1px solid #bb2424;
    border: 1px solid var(--clr-danger-outline);
    background-color: #f1d3d3;
    background-color: var(--clr-danger-bg);
}
.alert-close {
  color: #111111;
  color: var(--clr-dark);
  font-size: 1.5rem;
  line-height: 1.5rem;
  cursor: pointer;
}
.alert--1r .alert-close {
    margin-left: 1rem;
}
.alert--2r .alert-close {
    position: absolute;
    right: calc(0% + 1.5rem);
}
/* 
Syntax and order for button classes:
class="btn btn--hierarchy-level btn--style hover-effect" 
*/
/* Base Styling */
button {
    position: relative;
    cursor: pointer;
    background-color: transparent;
}
.btn-wrapper {
    position: relative; 
    width: -moz-fit-content; 
    width: fit-content;
    height: -moz-fit-content;
    height: fit-content;
}
.btn {
    position: relative; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border: 1px solid transparent;
    transition: 400ms;
    overflow: hidden;
}
.btn img {
    width: 0.88rem;
    height: 0.88rem;
    -o-object-fit: contain;
       object-fit: contain;
    background-color: #111111;
}
/* Button Hierarchy */
/* 
btn--primary
btn--secondary
btn--tertiary 

These classes exist to define hierarchy for semantic purposes. They hold no visual styles.
*/
.btn--primary { /* No visual styles here */ }
.btn--secondary { /* No visual styles here */ }
.btn--tertiary { /* No visual styles here */ }
/* Button Styling */
.btn--default {
    border: 1px solid #2e6eb8;
    border: 1px solid var(--clr-primary-500);
    background-color: #2e6eb8;
    background-color: var(--clr-primary-500);
    color: #fafafa;
    color: var(--clr-light);
}
.btn--outline {
    border: 1px solid #2e6eb8;
    border: 1px solid var(--clr-primary-500);
    color: #fafafa;
    color: var(--clr-light);
}
.btn--link {
    padding: 0;
    overflow: visible;
}
/* 
A ghost button in this template is a button with padding that is transparent and is revealed on hover with a fill or outline.
*/
.btn--ghost { /* No visual styles here */ }
/* Icon Button Styles */
/* 
Remember to include aria-labels when creating icon buttons. Icon buttons exist outside the typical button hierarchy.
*/
.btn--icon {
    border-radius: 5rem;
    border: 1px solid #dddddd;
    border: 1px solid var(--clr-gray-100);
    padding: 0.75rem;
}
.btn--icon img {
    background-color: transparent; /* removes placeholder */
    width: 1rem;
    height: 1rem;
}
.icon--lg {
    padding: 1.125rem;
}
.icon--xl {
    padding: 1.5rem;
}
.icon--lg img {
    background-color: transparent; /* removes placeholder */
    width: 1.5rem;
    height: 1.5rem;
}
.icon--xl img {
    background-color: transparent; /* removes placeholder */
    width: 1.75rem;
    height: 1.75rem;
}
/* arrows w/ hover effects */
.arrow-img--right { /* default */ }
.arrow-img--left { 
    transform: rotate(180deg); 
}
.arrow-img--up { 
    transform: rotate(-90deg); 
}
.arrow-img--down { 
    transform: rotate(90deg); 
}
.arrow,
.arrow-right {
    height: 1rem;
    width: 1rem;
}
.arrow::after {
    display: inline-block;
    position: absolute;
    content: "";
    border: solid #111111;
    border: solid var(--clr-dark);
    border-width: 0 1px 1px 0;
    padding: 4px;
}
.right::after {
    transform: rotate(-45deg);
    top: 40%;
    right: 45%;
}
.left::after {
    transform: rotate(135deg);
    top: 40%;
    right: 35%;
}
.up::after {
    transform: rotate(-135deg);
    top: 46%;
    right: 38%;
}
.down::after {
    transform: rotate(45deg);
    top: 36%;
    right: 38%;
}
.arrow-right::after {
    display: inline-block;
    position: absolute;
    top: 42%;
    content: "";
    border: solid #111111;
    border: solid var(--clr-dark);
    border-width: 0 1px 1px 0;
    padding: 4px;
    transition: transform 0.3s ease-out;
    transform: rotate(-45deg);
}
.btn:hover .arrow-right::after,
.btn:focus .arrow-right::after {
    transform: translateX(0.25rem) rotate(-45deg);
}
.arrow-right-2::after {
    display: inline-block;
    content: "➞";
    transition: transform 0.3s ease-out;
}
.btn:hover .arrow-right-2::after,
.btn:focus .arrow-right-2::after {
    transform: translateX(0.5rem);
}
.btn--icon .arrow-right::after {
    top: 40%;
    right: 42%;
}
.btn--link .arrow-right {
    margin-right: 0.75rem;
}
.btn--link .arrow-right::after {
    top: 25%;
}
.card {
    display: inline-flex;
    border: 1px solid #dddddd;
    border: 1px solid var(--clr-gray-100);
}
.card--padded {
    padding: 1.5rem;
    gap: 1rem;
}
.card--horizontal {
    flex-direction: row;
}
.card--vertical {
    flex-direction: column;
}
.card__body {
    display: inline-flex;
    flex-direction: column;
}
.card__header,
.card__body,
.card__footer {
    padding: 1rem;
}
.card--padded .card__header,
.card--padded .card__body,
.card--padded .card__footer {
    padding: 0;
}
.card__img {
    width: 100%;
    height: 100%;
}
.card__img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
/* item box */
/* item boxes are meant for small pieces of content, max-width: 360px  */
.item-box-wrapper {
    width: -moz-fit-content;
    width: fit-content;
}
.item-box {
    display: flex;
    max-width: 20rem;
}
.item-box img {
    -o-object-fit: contain;
       object-fit: contain;
}
.item-box-1r {
    flex-direction: row;
    align-items: center;
}
.item-box-2r {
    flex-direction: row;
    align-items: start;
}
.item-box-2r div,
.item-box-3r div {
    display: flex;
    flex-direction: column;
}
.item-box-2r div span:nth-child(1),
.item-box-3r div span:nth-child(1) {
    font-size: 1.25rem;
    font-weight: 600;
}
header .item-box-2r div span:nth-child(2) {
    font-size: 1rem;
    font-weight: 600;
}
header .item-box-2r div span:nth-child(1) {
    font-size: 1rem;
    font-weight: 400;
}
.review-box div span:nth-child(1) {
    font-size: 1rem;
    font-weight: 400;
}
.review-box div span:nth-child(2) {
    font-size: 1.25rem;
    font-weight: 600;
}
.item-box-3r {
    flex-direction: column;
}
.item-box--centered {
    align-items: center;
    text-align: center;
}
/* content box */
/* content boxes are meant for larger pieces of content such as the text content in sections,  max-width: ~560px */
.content-box-wrapper {
    width: -moz-fit-content;
    width: fit-content;
}
.content-box {
    display: flex;
    flex-direction: column;
    max-width: 35rem;
}
.content-box--hero {
    max-width: 40rem;
}
.content-box img {
    -o-object-fit: contain;
       object-fit: contain;
}
.content-box div {
    display: flex;
    flex-direction: column;
}
.content-box--centered {
    align-items: center;
    text-align: center;
}
/* 1024px */
@media (min-width: 64rem) {
  
    .item-box {
        max-width: 22.5rem;
    }

}
.counter-wrapper {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 0.5rem;
}
.counter-wrapper--centered {
    align-items: center;
}
.dropdown {
    position: relative;
}
.dropdown__menu {
    list-style: none;
}
.dropdown::after,
.dropdown__submenu::after {
    position: absolute;
    content: '';
    height: 0.4rem;
    width: 0.4rem;
    border-bottom: 1px solid #111111;
    border-bottom: 1px solid var(--clr-dark);
    border-right: 1px solid #111111;
    border-right: 1px solid var(--clr-dark);
    transform: rotate(45deg);
    margin-left: 0.5rem;
    right: 0%;
    top: 30%;
    transition: 100ms;
}
.dropdown__submenu::after {
    margin-right: 1rem;

}
.dropdown:hover::after,
.dropdown__submenu:hover::after {
    top: 40%;
}
.dropdown__item {
    padding: 1.125rem 1rem;
    padding-left: 0rem;
}
.dropdown__menu,
.dropdown__submenu .dropdown__menu {
    opacity: 0;
    position: absolute;
    display: none;
    background-color: #fafafa;
    background-color: var(--clr-light);
    width: 10rem;
    z-index: 11;
    border: 1px solid #e7e7e7;
    border: 1px solid var(--clr-gray-50);
    transition: 250ms;
    transform: translateY(1rem);
}
.dropdown__submenu {
    position: relative;
}
.dropdown__submenu .dropdown__menu {
    position: absolute;
    transform: translateX(99%);
    top: 0%;
}
.dropdown__menu,
.dropdown__item {
    border-radius: 0.5rem;
}
.dropdown__menu .dropdown__item {
    display: block;
    padding: 0.75rem 1rem;
    transition-duration: 250ms;
}
.dropdown__menu .dropdown__item:hover {
    background-color: #e7e7e7;
    background-color: var(--clr-gray-50);
}
.dropdown:hover > .dropdown__menu,
.dropdown:focus-within > .dropdown__menu,
.dropdown__submenu:hover > .dropdown__menu,
.dropdown__submenu:focus-within > .dropdown__menu  {
    display: grid;
    opacity: 1;
    animation: dropdownopen;
    animation-duration: 250ms ;
}
@keyframes dropdownopen  {
    from {opacity: 0}
    to {opacity: 1}
  }
/* mega menu */
.dropdown-mega,
.dropdown__mega-sub-nav {
    list-style: none;
}
.dropdown-mega {
    position: static !important;
}
.dropdown-mega__toggle {
    position: relative;
}
.dropdown-mega__toggle::after {
    position: absolute;
    content: '';
    height: 0.4rem;
    width: 0.4rem;
    border-bottom: 1px solid #111111;
    border-bottom: 1px solid var(--clr-dark);
    border-right: 1px solid #111111;
    border-right: 1px solid var(--clr-dark);
    transform: rotate(45deg);
    margin-left: 0.5rem;
    right: 0%;
    top: 43%;
    transition: 100ms;
}
.dropdown-mega__toggle:hover::after {
    top: 45%;
}
.dropdown__mega-menu {
    opacity: 0;
    position: absolute;
    display: none;
    justify-content: center;
    background-color: #fafafa;
    background-color: var(--clr-light);
    width: 100%;
    left: 0;
    z-index: 11;
    border: 1px solid #e7e7e7;
    border: 1px solid var(--clr-gray-50);
    transition: 250ms;
    transform: translateY(1rem);
    padding: 2rem;
}
.dropdown__mega-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 2rem;
}
.dropdown-mega:hover > .dropdown__mega-menu,
.dropdown-mega:focus-within > .dropdown__mega-menu {
    display: flex;
    opacity: 1;
    animation: dropdownopen;
    animation-duration: 250ms ;
}
.dropdown__mega-sub-nav {
    display: flex;
    flex-direction: column;
}
.dropdown__mega-sub-title {
    font-weight: 600;
    padding: 0.75rem 1rem;
}
.dropdown__mega-sub-nav .dropdown__item {
    display: block;
    padding: 0.75rem 1rem;
    transition-duration: 250ms;
    min-width: 12rem;
}
.dropdown__mega-sub-nav .dropdown__item:hover {
    background-color: #e7e7e7;
    background-color: var(--clr-gray-50);
}
/* 1200px */
@media (min-width: 75rem) {

    .dropdown__mega-sub-nav .dropdown__item {
        min-width: 13rem;
    }
}
/* 1440px */
@media (min-width: 90rem) {

    .dropdown__mega-sub-nav .dropdown__item {
        min-width: 14rem;
    }
}
/* input[type="range"] */
select,
input,
textarea {
    border: 1px solid #bbbbbb;
    border: 1px solid var(--clr-gray-200);
    background-color: transparent;
    padding: 0.5rem;
    transition: 250ms;
    color: #111111;
    color: var(--clr-dark);
}
.input--textfield {
    -moz-appearance: textfield;
}
.input--textfield::-webkit-outer-spin-button,
.input--textfield::-webkit-inner-spin-button  {
    -webkit-appearance: none;
}
input::-moz-placeholder, textarea::-moz-placeholder {
    color: #777777;
    color: var(--clr-gray-400);
}
input::placeholder,
textarea::placeholder {
    color: #777777;
    color: var(--clr-gray-400);
}
textarea {
    width: 100%;
    height: 7.25rem;
    resize: none;
}
input[type="date"] {
    cursor: text;
}
select {
    cursor: pointer;
}
.form-supergroup {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.form-group {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.form-group-1 {
    position: relative;
}
/* add form layouts here ?  */
.input-group,
.option-group {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.check-option,
.radio-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* floating label */
.input-group--label-float,
.input-group--label-float-2 {
    position: relative;
}
.input-group--label-float input,
.input-group--label-float-2 input {
    width: 100%;
    color: #111111;
    color: var(--clr-dark);
    border: none;
    outline: none;
    background: transparent;
}
.input-group--label-float input {
    border-bottom: 1px solid #999999;
    border-bottom: 1px solid var(--clr-gray-300);
    padding: 0.5rem 0;
}
.input-group--label-float label,
.input-group--label-float-2 label {
    position: absolute;
    font-size: 1rem;
    color: #999999;
    color: var(--clr-gray-300);
    pointer-events: none;
    transition: 500ms;
}
.input-group--label-float label {
    top: 0;
    left: 0;
    padding: 0.5rem 0;
}
.input-group--label-float input:focus ~ label,
.input-group--label-float input:valid ~ label,
.input-group--label-float-2 input:focus ~ label,
.input-group--label-float-2 input:valid ~ label {
    color: #999999;
    color: var(--clr-gray-300);
    font-size: 0.75rem;
}
.input-group--label-float input:focus ~ label,
.input-group--label-float input:valid ~ label {
    top: -1.25rem;
    left: 0;
}
.input-group--label-float-2 input {
    border: 1px solid #999999;
    border: 1px solid var(--clr-gray-300);
    padding: 0.5rem;
}
.input-group--label-float-2 label {
    top: 0.5rem;
    left: 0.25rem;
    padding: 0rem 0.325rem;
    background-color: #fff;
}
.input-group--label-float-2 input:focus ~ label,
.input-group--label-float-2 input:valid ~ label {
    top: -0.5rem;
    left: 0.5rem;
}
/* custom radio button */
.custom-radio input[type="radio"] {
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    padding: 0;
    border: 1px solid #111111;
    border: 1px solid var(--clr-dark);
    border-radius: 50%;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background-color: transparent;
    outline: none;
}
.custom-radio input[type="radio"]:checked {
    border-color: #111111;
    border-color: var(--clr-dark);
    background-color: #111111;
    background-color: var(--clr-dark);
    background-clip: content-box;
    padding: 2px;
    background-image: radial-gradient(
      circle,
      #111111 0%,
      #111111 50%,
      transparent 60%,
      transparent 100%
    );
    background-image: radial-gradient(
      circle,
      var(--clr-dark) 0%,
      var(--clr-dark) 50%,
      transparent 60%,
      transparent 100%
    );
}
/* switch toggle */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 2.5rem;
    height: 1.25rem;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-switch__slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    border: 2px solid #111111;
    border: 2px solid var(--clr-dark);
    transition: 400ms;
    border-radius: 2rem;
}
.toggle-switch__slider:before {
    position: absolute;
    content: "";
    height: 1rem;
    width: 1rem;
    left: 0;
    bottom: 0;
    background-color: #999999;
    background-color: var(--clr-gray-300);
    transition: 400ms;
    border-radius: 50%;
}
input:checked + .toggle-switch__slider {
    background-color: #111111;
    background-color: var(--clr-dark);
}
input:checked + .toggle-switch__slider:before {
    transform: translateX(1.175rem);
}
/* pill style options */
.option-group--pill {
    display: flex;
    flex-direction: row;
    padding: 0.25rem;
    gap: 0.25rem;
    border: 1px solid #bbbbbb;
    border: 1px solid var(--clr-gray-200);
    width: -moz-fit-content;
    width: fit-content;
}
.pill-option label { 
    display: inline-block; 
    padding: 0.5rem 1rem;
}
.pill-option input[type="radio"],
.pill-option input[type="checkbox"] { 
    display: none; 
}
.pill-option input[type="radio"]:checked + label,
.pill-option input[type="checkbox"]:checked + label  { 
    border: none;
    background-color: #dddddd;
    background-color: var(--clr-gray-100);
}
/* range inputs */
.range-number-input {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1rem 0;
    gap: 1rem;
    max-width: 40rem;
}
.range-number-input__field {
    display: flex;
    align-items: center;
}
.range-number-input__field input {
    width: 100%;
    margin-left: 0.75rem;
    text-align: center;
}
.range-slider {
    height: 0.25rem;
    position: relative;
    background: #dddddd;
    background: var(--clr-gray-100);
    max-width: 40rem;

}
.range-slider__progress {
    height: 100%;
    left: 25%;
    right: 25%;
    position: absolute;
    background: #111111;
    background: var(--clr-dark);
}
.range-input {
    position: relative;
}
.range-input--1pt input {
    position: absolute;
    width: 100%;
    height: 4px;
    top: -20px;
    pointer-events: none;
    cursor: grab;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    padding: 0;
    max-width: 40rem;
  }
.range-input--2pt input {
    position: absolute;
    width: 100%;
    height: 4px;
    top: -20px;
    background: none;
    pointer-events: none;
    cursor: grab;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    padding: 0;
    max-width: 40rem;
}
input[type="range"]::-webkit-slider-thumb {
    height: 1rem;
    width: 1rem;
    border-radius: 50%;
    background: #111111;
    background: var(--clr-dark);
    pointer-events: auto;
    -webkit-appearance: none;
}
input[type="range"]::-moz-range-thumb {
    height: 1rem;
    width: 1rem;
    border: none;
    border-radius: 50%;
    background: #111111;
    background: var(--clr-dark);
    pointer-events: auto;
    -moz-appearance: none;
}
/* multi-step form styles */
.form-steps {
    display: inline-flex;
    flex-direction: row;
    gap: 1rem; 
}
.step-wrapper {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
/* required for each instance */
#step-1,
#step-2,
#step-3 {
    position: relative;
}
.step {
    position: relative;
    height: 1.25rem;
    width: 1.25rem;
    background-color: #999999;
    background-color: var(--clr-gray-300);
    color: #111111;
    color: var(--clr-dark);
    border: none;
    border-radius: 50%;
    display: inline-block;
    z-index: 2;
}
.active-step span:last-child {
    color: #777777;
    color: var(--clr-gray-400);
}
.active-step .step {
    background-color: #bbbbbb;
    background-color: var(--clr-gray-200);
    border: 0.25rem solid #777777;
    border: 0.25rem solid var(--clr-gray-400);
}
/* ------------------------ Default Menu Button and Animation */
.menu-toggle {
    display: block;
    z-index: 3;
    -webkit-user-select: none;
    -moz-user-select: none;
         user-select: none;
    height: 3rem;
    width: 3rem;
    padding: 0.5rem;
}
.menu-toggle span {
    display: block;
    width: 2.0625rem;
    height: 0.125rem;
    margin-bottom: 0.35rem;
    position: relative;
    background: #111111;
    background: var(--clr-dark);
    border-radius: 0.25rem;
    z-index: 1;
    transform-origin: 0.25rem 0;
    transition: transform 300ms cubic-bezier(0.77,0.2,0.05,1.0), opacity 550ms ease;
}
.menu-toggle span:first-child {
    transform-origin: 0% 0%;
}
.menu-toggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}
.menu-toggle span:nth-last-child(1) {
    margin-bottom: 0;
}
.menu-toggle.active span {
    opacity: 1;
    transform: rotate(-45deg) translate(0.1rem, 0);
    background: #111111;
    background: var(--clr-dark);
}
.menu-toggle.active span:nth-last-child(3) {
    transform: rotate(45deg) translate(-0.1rem, -0.425rem);
}
.menu-toggle.active span:nth-last-child(2) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}
/* ------------------------ v2 Menu Button and Animation */
/* .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 3;
    -webkit-user-select: none;
    user-select: none;
    height: 3rem;
    width: 3rem;
    padding: 0.5rem;
    transition: transform 300ms ease-out;
}

.menu-toggle span {
    display: block;
    width: 2.0625rem;
    height: 0.125rem;
    margin-bottom: 0.35rem;
    position: relative;
    background: var(--clr-dark);
    border-radius: 0.25rem;
    z-index: 1;
    transform-origin: 0.25rem 0;
    transition: transform 300ms cubic-bezier(0.77,0.2,0.05,1.0),
    opacity 550ms ease;
}
   
.menu-toggle span:first-child {
    transform-origin: 0% 0%;
    width: 50%;
    transform-origin: right;
    transition: transform 300ms cubic-bezier(0.52, -0.8, 0.52, 0.52);
}
   
.menu-toggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

.menu-toggle span:nth-last-child(1) {
    margin-bottom: 0;
    width: 50%;
    align-self: flex-end;
    transform-origin: left;
    transition: transform 300ms cubic-bezier(0.52, -0.8, 0.52, 0.52);
}

.menu-toggle.active {
    transform: rotate(-45deg);
}
   
.menu-toggle.active span:first-child {
    transform: rotate(-90deg) translateX(1px);
}
   
.menu-toggle.active span:last-child {
    transform: rotate(-90deg) translateX(-1px);
} */
/* ------------------------ v3 Menu Button and Animation */
/* .menu-toggle {
    display: block;
    z-index: 3;
    -webkit-user-select: none;
    user-select: none;
    height: 3rem;
    width: 3rem;
    padding: 0.5rem;
}

.menu-toggle span {
    display: block;
    width: 2.0625rem;
    height: 0.125rem;
    margin-bottom: 0.35rem;
    position: relative;
    background: var(--clr-dark);
    border-radius: 0.25rem;
    z-index: 1;
    transform-origin: 0.25rem 0;
    transition: transform 300ms cubic-bezier(0.77,0.2,0.05,1.0),
    opacity 550ms ease;
}
   
.menu-toggle span:first-child {
    transform-origin: 0% 0%;
}
   
.menu-toggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

.menu-toggle span:nth-last-child(1) {
    margin-bottom: 0;
}
   
.menu-toggle.active span {
    opacity: 1;
    background: var(--clr-dark);
}
   
.menu-toggle.active span:first-child {
    transform: rotateZ(-45deg) scaleX(0.5) translate(-14px, 5px);
}
  
.menu-toggle.active span:last-child {
    transform: rotateZ(45deg) scaleX(0.5) translate(-14px, -3px);
} */
/* ------------------------ v4 Menu Button and Animation */
/* .menu-toggle {
    display: block;
    z-index: 3;
    -webkit-user-select: none;
    user-select: none;
    height: 3rem;
    width: 3rem;
    padding: 0.5rem;
}

.menu-toggle span {
    display: block;
    width: 2.0625rem;
    height: 0.125rem;
    margin-bottom: 0.35rem;
    position: relative;
    background: var(--clr-dark);
    border-radius: 0.25rem;
    z-index: 1;
    transform-origin: 0.25rem 0;
    transition: transform 500ms cubic-bezier(0.77,0.2,0.05,1.0),
    background-color 550ms ease;
}
   
.menu-toggle span:first-child {
    transform-origin: 0% 0%;
    transition-delay: 500ms;
}
   
.menu-toggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}


.menu-toggle span:nth-last-child(2):before,
.menu-toggle span:nth-last-child(2):after {
    content: "";
    position: absolute;
    width: 2.0625rem;
    height: 0.125rem;
    background: var(--clr-dark);
    transition-duration: 500ms;
    transition-delay: 0ms;
    left: 0;
}

.menu-toggle span:last-child {
    margin-bottom: 0;
    transition-delay: 500ms;
}

.menu-toggle.active span {
    opacity: 1;
    background-color: transparent;
}
   
.menu-toggle.active span:first-child {
    transform: translateY(8px);
    transition-delay: 0ms;
}
  
.menu-toggle.active span:last-child {
    transform: translateY(-8px);
    transition-delay: 0ms;
}

.menu-toggle.active span:nth-last-child(2):before {
    transform: rotateZ(45deg) translate(0px, 0px);
    transition-delay: 500ms;
}

.menu-toggle.active span:nth-last-child(2):after {
    transform: rotateZ(-45deg) translate(0px, 0px);
    transition-delay: 500ms;
} */
/* ------------------------ v5 Menu Button and Animation */
/* .menu-toggle {
    display: block;
    z-index: 3;
    -webkit-user-select: none;
    user-select: none;
    height: 3rem;
    width: 3rem;
    padding: 0.5rem;
}

.menu-toggle span {
    display: block;
    width: 2.0625rem;
    height: 0.125rem;
    margin-bottom: 0.35rem;
    position: relative;
    background: var(--clr-dark);
    border-radius: 0.25rem;
    z-index: 1;
    transform-origin: 0.25rem 0;
    transition: transform 500ms cubic-bezier(0.77,0.2,0.05,1.0),
    opacity 550ms ease;
}
   
.menu-toggle span:first-child {
    transform-origin: 0% 0%;
    transition-delay: 500ms;
}
   
.menu-toggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

.menu-toggle span:nth-last-child(2):before,
.menu-toggle span:nth-last-child(2):after {
    content: "";
    position: absolute;
    width: 2.0625rem;
    height: 0.125rem;
    background: var(--clr-dark);
    transition-duration: 500ms;
    transition-delay: 0ms;
    left: 0;
    transform: scaleX(0.5);
}

.menu-toggle span:last-child {
    margin-bottom: 0;
    transition-delay: 500ms;
}

.menu-toggle.active span {
    opacity: 1;
    background: var(--clr-dark);
}
   
.menu-toggle.active span:first-child {
    transform: translateY(8px);
    opacity: 0;
    transition-delay: 0ms;
}
  
.menu-toggle.active span:last-child {
    transform: translateY(-8px);
    opacity: 0;
    transition-delay: 0ms;
}

.menu-toggle.active span:nth-last-child(2):before {
    transform: rotateZ(45deg) scaleX(0.5) translate(-6px, 11px);
    transition-delay: 500ms;
}

.menu-toggle.active span:nth-last-child(2):after {
    transform: rotateZ(-45deg) scaleX(0.5) translate(-6px, -11px);
    transition-delay: 500ms;
} */
/* ------------------------ v3 Menu Button and Animation */
/* .menu-toggle {
    display: block;
    z-index: 3;
    -webkit-user-select: none;
    user-select: none;
    height: 3rem;
    width: 3rem;
    padding: 0.5rem;
    transition: transform 300ms ease-out;
    transform: rotate(180deg)
}

.menu-toggle span {
    display: block;
    width: 2.0625rem;
    height: 0.125rem;
    margin-bottom: 0.35rem;
    position: relative;
    background: var(--clr-dark);
    border-radius: 0.25rem;
    z-index: 1;
    transform-origin: 0.25rem 0;
    transition: transform 300ms ease-out;
}
   
.menu-toggle span:first-child {
    transform-origin: 0% 0%;
}
   
.menu-toggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

.menu-toggle span:nth-last-child(1) {
    margin-bottom: 0;
}

.menu-toggle.active {
    transform: rotate(0deg)
}
   
.menu-toggle.active span {
    opacity: 1;
    background: var(--clr-dark);
}
   
.menu-toggle.active span:first-child {
    transform: rotateZ(-45deg) scaleX(0.5) translate(-14px, 5px);
}
  
.menu-toggle.active span:last-child {
    transform: rotateZ(45deg) scaleX(0.5) translate(-14px, -3px);
} */
/* mobile menu */
.mobile-menu {
    position: fixed;
    align-content: start;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 3.25rem;
    padding-top: 6rem;
    top: 0;
    right: 0;
    list-style: none;
    background: #fafafa;
    background: var(--clr-light);
    -webkit-font-smoothing: antialiased;
    transform-origin: 0% 0%;
    transform: none;
    transition: transform 500ms cubic-bezier(0.77,0.2,0.05,1.0);
    animation-name: menuopen;
    animation-duration: 300ms;
    z-index: 2;
}
@keyframes menuopen {
    from {transform: translate(100%, 0)}
    to {transform: none}
}
.mobile-menu li {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 1.5rem;
}
.mobile-menu__item-group,
.mobile-menu__accordian-group {
    list-style: none;
}
.mobile-menu__item-group li,
.mobile-menu__accordian-group li {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1.25rem;
    font-size: 1.25rem;
}
/* mobile menu accordian */
.mobile-menu__accordian {
    padding-bottom: 0.5rem !important;
}
.mobile-menu__accordian {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.mobile-menu__accordian label {
    position: relative;
    display: block;
    width: 100%;
    max-width: 25rem;
}
.mobile-menu__accordian-group {
    visibility: hidden;
    opacity: 0;
    height: 0;
}
.accordian-toggle {
    width: 100%;
    max-width: 25rem;
    display: none;
}
.mobile-menu__accordian label:before {
    content: '';
    position: absolute;
    border-left: 2px solid #777777;
    border-left: 2px solid var(--clr-gray-400);
    border-top: 2px solid #777777;
    border-top: 2px solid var(--clr-gray-400);
    width: 1rem;
    height: 1rem;
    transform: rotate(-135deg);
    right: 0%;
    transition-duration: 200ms;
}
.accordian-toggle:checked ~ .mobile-menu__accordian-group {
    visibility: visible;
    opacity: 1;
    height: auto;
}
.accordian-toggle:checked ~ label:before {
    transform: rotate(-220deg);
    right: 1%;
}
.modal {
    position: fixed;
    height: 100vh;
    width: 100%;
    background-color: rgba(62,62,62,0.33);
    z-index: 30;
    display: none;
    justify-content: center;
    align-items: center;
    top: 0%;
    left: 0%;
}
.modal__content-wrapper {
    position: relative;
    display: flex;
    background-color: #dddddd;
    background-color: var(--clr-gray-100);
    border: 1px solid #777777;
    border: 1px solid var(--clr-gray-400);
    overflow: hidden;
}
.modal__content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    justify-content: start;
}
.modal__header,
.modal__body {
    padding: 1rem
}
.modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #999999;
    background-color: var(--clr-gray-300);
    height: -moz-fit-content;
    height: fit-content;
    width: 100%;
}
.modal__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}
.modal-close {
    color: #111111;
    color: var(--clr-dark);
    font-size: 2rem;
    line-height: 2rem;
    cursor: pointer;
  }
.header__nav__options {
    list-style: none;
}
.header__nav__options li {
    position: relative;
}
@media (min-width: 64rem) {
    
    .header__nav__options {
        display: flex;
        gap: 2rem;
    }
}
.scroller__wrapper {
    width: 100%;
}
.scroller {
    width: 625rem;
    overflow: hidden;
}
.scroller__inner {
    display: flex;
    flex-direction: row;
    justify-content: left;
    gap: 2rem;
    padding: 0.5rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    flex-wrap: nowrap;
}
/* scroller w/ 240px width slides */
.scroller__inner:has(> .slide--240) {
    animation: scroller240 25000ms forwards linear infinite;
    animation: scroller240 25000ms var(--_scroll-direction, forwards) linear infinite;
}
@keyframes scroller240 {
    from {
        transform: translatex(0);
    }
    to {
        transform: translatex(calc(-18.2% - 5.25rem));
    }
}
/* scroller w/ 280px width slides */
.scroller__inner:has(> .slide--280) {
    animation: scroller280 25000ms forwards linear infinite;
    animation: scroller280 25000ms var(--_scroll-direction, forwards) linear infinite;
}
@keyframes scroller280 {
    from {
        transform: translatex(0);
    }
    to {
        transform: translatex(calc(-21% - 5.25rem));
    }
}
/* scroller w/ 320px width slides */
.scroller__inner:has(> .slide--320) {
    animation: scroller320 25000ms forwards linear infinite;
    animation: scroller320 25000ms var(--_scroll-direction, forwards) linear infinite;
}
@keyframes scroller320 {
    from {
        transform: translatex(0);
    }
    to {
        transform: translatex(calc(-23.8% - 5.25rem));
    }
}
/* scroller w/ 348px width slides */
.scroller__inner:has(> .slide--348) {
    animation: scroller348 25000ms forwards linear infinite;
    animation: scroller348 25000ms var(--_scroll-direction, forwards) linear infinite;
}
@keyframes scroller348 {
    from {
        transform: translatex(0);
    }
    to {
        transform: translatex(calc(-25.75% - 5.25rem));
    }
}
/* scroller w/ 360px width slides */
.scroller__inner:has(> .slide--360) {
    animation: scroller360 25000ms forwards linear infinite;
    animation: scroller360 25000ms var(--_scroll-direction, forwards) linear infinite;
}
@keyframes scroller360 {
    from {
        transform: translatex(0);
    }
    to {
        transform: translatex(calc(-26.60% - 5.25rem));
    }
}
/* Underline Hover Effects */
/* 
Can be used for list options and btn-links.
For buttons, be sure to wrap inner text with a <span> element to assign hover effect class. 
*/
.underline-ltr::after {
    content: "";
    height: 0.1875rem;
    width: 0;
    background: #111111;
    background: var(--clr-dark);
    position: absolute;
    left: 0;
    bottom: -0.5rem;
    transition: 250ms;
}
.underline-ltr:hover::after,
.underline-ltr:focus-within::after {
    width: 100%;
}
.underline-ltr-2::after {
    content: "";
    height: 0.75rem;
    width: 0;
    background: #111111;
    background: var(--clr-dark);
    position: absolute;
    left: 0;
    bottom: -0.7rem;
    transition: 250ms;
}
.underline-ltr-2:hover::after,
.underline-ltr-2:focus-within::after {
    bottom: -0.5rem;
    height: 0.1875rem;
    width: 100%;
}
.underline-rtl::after {
    content: "";
    height: 0.1875rem;
    width: 0;
    background: #111111;
    background: var(--clr-dark);
    position: absolute;
    right: 0;
    bottom: -0.5rem;
    transition: 250ms;
}
.underline-rtl:hover::after,
.underline-rtl:focus-within::after {
    width: 100%;
}
.underline-middle-expand::after {
    content: "";
    height: 0.1875rem;
    width: 0%;
    background: #111111;
    background: var(--clr-dark);
    position: absolute;
    display: flex;
    align-content: center;
    left: 50%;
    bottom: -0.5rem;
    transition: 250ms;
}
.underline-middle-expand:hover::after,
.underline-middle-expand:focus-within::after {
    width: 100%;
    left: 0;
}
.underline-fade::after {
    content: "";
    height: 0.1875rem;
    width: 100%;
    background: #111111;
    background: var(--clr-dark);
    position: absolute;
    left: 0;
    bottom: -0.5rem;
    transition: 250ms;
    opacity: 0;
}
.underline-fade:hover::after,
.underline-fade:focus-within::after {
    opacity: 1;
}
.underline-up::after {
    content: "";
    height: 0.1875rem;
    width: 100%;
    background: #111111;
    background: var(--clr-dark);
    position: absolute;
    left: 0;
    bottom: -1rem;
    transition: 250ms;
    opacity: 0;
}
.underline-up:hover::after,
.underline-up:focus-within::after {
    opacity: 1;
    bottom: -0.5rem;
}
.underline-expand-up::after {
    content: "";
    height: 0.1875rem;
    width: 0%;
    background: #111111;
    background: var(--clr-dark);
    position: absolute;
    display: flex;
    align-content: center;
    left: 50%;
    bottom: -1rem;
    transition: 250ms;
    opacity: 0;
}
.underline-expand-up:hover::after,
.underline-expand-up:focus-within::after {
    width: 100%;
    left: 0;
    bottom: -0.5rem;
    opacity: 1;
}
/* Button Hover Effects */
/* Round Corners */
.round-corners:hover,
.round-corners:focus {
    border: 1px solid #e7e7e7;
    border: 1px solid var(--clr-gray-50);
    border-radius: 1.5rem;
}
/* Lighten */
.lighten:hover,
.lighten:focus {
    border: 1px solid #5c9ae0;
    border: 1px solid var(--clr-primary-400);
    background-color: #5c9ae0;
    background-color: var(--clr-primary-400);
}
/* Darken */
.darken:hover,
.darken:focus {
    border: 1px solid #bbbbbb;
    border: 1px solid var(--clr-gray-200);
    background-color: #bbbbbb;
    background-color: var(--clr-gray-200);
}
/* Unfill Basic */
.unfill-fade:hover,
.unfill-fade:focus {
    border: 1px solid #dddddd;
    border: 1px solid var(--clr-gray-100);
    background-color: transparent;
}
/* Fill Fade */
.fill-fade:hover,
.fill-fade:focus {
    border: 1px solid #dddddd;
    border: 1px solid var(--clr-gray-100);
    background-color: #dddddd;
    background-color: var(--clr-gray-100);
}
/* Fill Right */
.fill-right:hover,
.fill-right:focus {
    color: #111111;
    box-shadow: inset 14rem 0 0 0 #dddddd;
    box-shadow: inset 14rem 0 0 0 var(--clr-gray-100);
    border: 1px solid #dddddd;
    border: 1px solid var(--clr-gray-100);
}
/* Fill Right Bezier*/
.fill-right-bez {
    transition: 1000ms cubic-bezier(0.77,0.2,0.05,1.0);
}
.fill-right-bez:hover,
.fill-right-bez:focus {
    color: #111111;
    box-shadow: inset 13rem 0 0 0 #dddddd;
    box-shadow: inset 13rem 0 0 0 var(--clr-gray-100);
    border: 1px solid #dddddd;
    border: 1px solid var(--clr-gray-100);
}
/* Fill Right Diagonal*/
.fill-right-diag:before {
    content: "";
    position: absolute;
    top: 0;
    right: -50px;
    bottom: 0;
    left: 0;
    border-right: 50px solid transparent;
    border-bottom: 80px solid #dddddd;
    border-bottom: 80px solid var(--clr-gray-100);
    transform: translateX(-100%);
    transition-duration: 500ms;
    z-index: -1;
}
.fill-right-diag:hover:before,
.fill-right-diag:focus:before {
    transform: translateX(0);
}
/* Fill Inward */
.fill-in:hover,
.fill-in:focus {
    color: #111111;
    box-shadow: inset 0 0 0 2rem #dddddd;
    box-shadow: inset 0 0 0 2rem var(--clr-gray-100);
    border: 1px solid #dddddd;
    border: 1px solid var(--clr-gray-100);
}
/* Fill Up */
.fill-up:hover,
.fill-up:focus {
  box-shadow: inset 0 -4rem 0 0 #dddddd;
  box-shadow: inset 0 -4rem 0 0 var(--clr-gray-100);
}
/* Fill Up 2 */
.fill-up-2 {
    backface-visibility: hidden;
    box-shadow: inset 0 0 0 1px #dddddd;
    box-shadow: inset 0 0 0 1px var(--clr-gray-100);
    transform: translateZ(0);
}
.fill-up-2:hover,
.fill-up-2:focus {
    border: 1px solid #dddddd;
    border: 1px solid var(--clr-gray-100);
}
.fill-up-2::before {
    content: "";
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    height: 120%;
    width: 120%;
    border-radius: 20%;
    background-color: #dddddd;
    background-color: var(--clr-gray-100);
    scale: 0 0;
    translate: 0 140%;
    transition: scale 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), translate 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.fill-up-2:hover::before,
.fill-up-2:focus::before {
    scale: 1.5 1.5;
    translate: 0 0;
    border-radius: 50%;
}
/* Fill Aware */
/* 
Ensure <span> element is inside designated buttons. Link btn-aware.js file to HTML.
*/
.fill-aware span {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-radius: 50%;
    background-color: #dddddd;
    background-color: var(--clr-gray-100);
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
    transform: translate(-50%, -50%);
    z-index: -1;
}
.fill-aware:hover span {
    width: 225%;
    height: 562.5px;
}
/* Close */
.close:hover,
.close:focus {
  box-shadow: inset -7rem 0 0 0 #dddddd, inset 7rem 0 0 0 #dddddd;
  box-shadow: inset -7rem 0 0 0 var(--clr-gray-100), inset 7rem 0 0 0 var(--clr-gray-100);
}
/* Diagonal Close */
.close-diag:before, 
.close-diag:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    transition-duration: 500ms;
}
.close-diag:before {
    right: -50px;
    border-right: 50px solid transparent;
    border-bottom: 80px solid #dddddd;
    border-bottom: 80px solid var(--clr-gray-100);
    transform: translateX(-100%);
}
.close-diag:after {
    left: -50px;
    border-left: 50px solid transparent;
    border-top: 80px solid #dddddd;
    border-top: 80px solid var(--clr-gray-100);
    transform: translateX(100%);
}
.close-diag:hover:before,
.close-diag:focus:before {
    transform: translateX(-49%);
}
.close-diag:hover:after,
.close-diag:focus:after {
    transform: translateX(49%);
}
/* Glow */
.glow {
    transition-duration: 0.3s;
    transition-property: box-shadow;
}
.glow:hover,
.glow:focus {
    box-shadow: 0 0 8px #dddddd;
    box-shadow: 0 0 8px var(--clr-gray-100);
}
/* Shadow */
.shadow {
    transition-duration: 0.3s;
    transition-property: box-shadow;
}
.shadow:hover,
.shadow:focus {
    box-shadow: 0 4px 4px #dddddd;
    box-shadow: 0 4px 4px var(--clr-gray-100);
}
/* Outline Inset */
.outline-inset {
    transition-duration: 0.3s;
    transition-property: box-shadow;
}
.outline-inset:hover,
.outline-inset:focus {
    box-shadow: inset 0 0 0 4px #777777, 0 0 1px transparent;
    box-shadow: inset 0 0 0 4px var(--clr-gray-400), 0 0 1px transparent;
}
/* Outline Change */
.outline-change:hover,
.outline-change:focus {
    border: 1px solid #fafafa;
    border: 1px solid var(--clr-light);
}
/* Outline Outward */
.outline-outward {
    overflow: visible;
}
.outline-outward:before {
    content: '';
    position: absolute;
    border: #dddddd solid 4px;
    border: var(--clr-gray-100) solid 4px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition-duration: .3s;
    transition-property: top right bottom left;
}
.outline-outward:hover:before,
.outline-outward:focus:before {
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
}
/* Outline Inward */
.outline-inward {
    overflow: visible;
}
.outline-inward:before {
    content: '';
    position: absolute;
    border: #dddddd solid 4px;
    border: var(--clr-gray-100) solid 4px;
    top: -16px;
    right: -16px;
    bottom: -16px;
    left: -16px;
    opacity: 0;
    transition-duration: .3s;
    transition-property: top right bottom left;
}
.outline-inward:hover:before,
.outline-inward:focus:before {
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
    opacity: 1;
}
/* Lift */
.lift {
    transition-duration: 0.3s;
    transition-property: transform;
    -webkit-tap-highlight-color: transparent;
    transform: translateZ(0);
    box-shadow: 0 0 1px transparent;
}
.lift:hover,
.lift:focus {
    transform: translateY(-5px);
}
/* Float */
.float {
    transition-property: transform, box-shadow;
}
.float:hover,
.float:focus {
    box-shadow: 0 0.5em 0.75rem -0.5rem #dddddd;
    box-shadow: 0 0.5em 0.75rem -0.5rem var(--clr-gray-100);
    transform: translateY(-0.25rem);
}
/* Pulse */
.pulse:hover,
.pulse:focus {
    animation: pulse 750ms;
    box-shadow: 0 0 0 2rem transparent;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 #bbbbbb; box-shadow: 0 0 0 0 var(--clr-gray-200); }
}
/* Corners */
.corners {
    border: none;
}
.corners::after,
.corners::before {
  content: '';
  display: block;
  position: absolute;
  width: 20%;
  height: 50%;
  border: 1px solid;
  transition: all 750ms cubic-bezier(0.77,0.2,0.05,1.0);
  border-radius: 2px;
}
.corners::after {
  bottom: 0;
  right: 0;
  border-top-color: transparent;
  border-left-color: transparent;
  border-bottom-color: #777777;
  border-bottom-color: var(--clr-gray-400);
  border-right-color: #777777;
  border-right-color: var(--clr-gray-400);
}
.corners::before {
  top: 0;
  left: 0;
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-top-color: #777777;
  border-top-color: var(--clr-gray-400);
  border-left-color: #777777;
  border-left-color: var(--clr-gray-400);
}
.corners:hover:after,
.corners:hover:before,
.corners:focus:after,
.corners:focus:before {
  width: 100%;
  height: 100%;
}
.corners:hover,
.corbers:focus {
    border: none;
}
/* Overlapping Outlines */
.overlap {
    overflow: visible;
    border: none;
}
.overlap::after,
.overlap::before {
      content: '';
      display: block;
      position: absolute;
      width: 20%;
      height: 50%;
      border: 1px solid;
      transition: all 750ms cubic-bezier(0.77,0.2,0.05,1.0);
      border-radius: 2px;
}
.overlap::after {
      bottom: 0;
      right: 0;
      border-top-color: transparent;
      border-left-color: transparent;
      border-bottom-color: #777777;
      border-bottom-color: var(--clr-gray-400);
      border-right-color: #777777;
      border-right-color: var(--clr-gray-400);
}
.overlap::before {
      top: 0;
      left: 0;
      border-bottom-color: transparent;
      border-right-color: transparent;
      border-top-color: #777777;
      border-top-color: var(--clr-gray-400);
      border-left-color: #777777;
      border-left-color: var(--clr-gray-400);
}
.overlap:hover:after,
.overlap:hover:before,
.overlap:focus:after,
.overlap:focus:before {
      border-bottom-color: #777777;
      border-bottom-color: var(--clr-gray-400);
      border-right-color: #777777;
      border-right-color: var(--clr-gray-400);
      border-top-color: #777777;
      border-top-color: var(--clr-gray-400);
      border-left-color: #777777;
      border-left-color: var(--clr-gray-400);
      width: 102%;
      height: 104%;
}
.overlap:hover,
.overlap:focus {
    border: none;
}
/* Infinite Bounce */
.bounce {
    animation: .7s down infinite alternate;
    -webkit-animation: .7s down infinite alternate;
}
@keyframes down {
    0% {
        transform: translateY(0px)
    }

    100% {
        transform: translateY(20px)
    }
}
.parallax {
    background-attachment: fixed;
}
/* ------------------------------------------------------------------------------ */
/* DELETE */
.modal__header img {
    width: 2rem; 
    height: 2rem;
}
/* ------------------------------------------------------------------------------ */
.--rounded-corners {
    border-radius: 0.25rem;
}
.--rounded {
    border-radius: 25rem;
}
.--borderless {
    border: none !important;
}
.--text-centered {
    text-align: center;
}
.--full-width {
    width: 100%;
}
.--wrap-reverse {
    flex-direction: column-reverse;
}
/* 1200px */
@media (min-width: 75rem) {

    .--wrap-reverse {
        flex-direction: inherit;
    }

}
/* 8pt grid spacing */
.--gap4 {
    gap: 0.25rem;
}
.--gap8 {
    gap: 0.5rem;
}
.--gap16 {
    gap: 1rem;
}
.--gap24 {
    gap: 1.5rem;
}
.--gap32 {
    gap: 2rem;
}
.--gap40 {
    gap: 2.5rem;
}
.--gap48 {
    gap: 3rem;
}
.--gap56 {
    gap: 3.5rem;
}
.--gap64 {
    gap: 4rem;
}
.--gap72 {
    gap: 4.5rem;
}
.--gap80 {
    gap: 5rem;
}
.--gap88 {
    gap: 5.5rem;
}
.--gap96 {
    gap: 6rem;
}
.--gap104 {
    gap: 6.5rem;
}
/* grid utility styles */
.--content-centered {
    justify-content: center;
}
.--content-right {
    justify-content: right;
}
.--content-left {
    justify-content: left;
}
.--content-spaced {
    justify-content: space-between;
}
.--align-center {
    align-items: center;
}
.align-top {
    align-items: start;
}
.--justify-right {
    justify-self: end;
}
.--reverse-wrap {
    flex-wrap: wrap-reverse;
}
.--center-to-left {
    text-align: center;
}
/* 768 */
@media (min-width: 48rem) {

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

}
/* img wrappers */
img {
    width: 100%;
    height: 100%;
}
.img--xs {
    width: 1rem;
    height: 1rem;
    aspect-ratio: 1/1;
}
.img--s {
    width: 1.5rem;
    height: 1.5rem;
    aspect-ratio: 1/1;
}
.img--m {
    width: 2.5rem;
    height: 2.5rem;
    aspect-ratio: 1/1;

}
.img--lg {
    width: 4rem;
    height: 4rem;
    aspect-ratio: 1/1;

}
.img--xl {
    width: 5rem;
    height: 5rem;
    aspect-ratio: 1/1;
}
/* max-widths */
/* 560 */
@media (min-width: 35rem) {

    .--maxwidth400 {
        max-width: 25rem;
    }

}
/* 768 */
@media (min-width: 48rem) {

    .--maxwidth480 {
        max-width: 30rem;
    }

}
/* 1024px */
@media (min-width: 64rem) {

    .--maxwidth280 {
        max-width: 17.5rem;
    }

    .--maxwidth400 {
        max-width: 25rem;
    }

    .--maxwidth480 {
        max-width: 30rem;
    }
    
    .--maxwidth560 {
        max-width: 35rem;
    }

    .--maxwidth640 {
        max-width: 40rem;
    }

    .--maxwidth680 {
        max-width: 42.5rem;
    }

    .--maxwidth768 {
        max-width: 48rem;
    }

    .--maxwidth1024 {
        max-width: 64rem;
    }

    .--maxwidth1200 {
        max-width: 75rem;
    }

    .--maxwidth1440 {
        max-width: 90rem;
    }

}
.portfolio-image {
    width: 100%;
    aspect-ratio: 1.5/1;
}
.portfolio-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    background-color: black;
}
/* 768px */
@media (min-width: 48rem) {

    .portfolio-image {
        max-width: 20rem;
    }

}
/* 1600px */
@media (min-width: 100rem) {

    .portfolio-image {
        max-width: 25rem;
    }

}
.iframe,
iframe {
    background-color: #111; /* delete */
    width: 100%; 
    height: 17.5rem;
}
/* 680px */
@media (min-width: 42.5rem) {

    .iframe,
    iframe {
        min-width: 32rem;
}
}