:root {
    --archivo-font-family: "Archivo", sans-serif;
    --instrument-font-family: "Instrument Serif", serif;
    --page-max-width: 82.5rem; /* 1400px */
    --page-padding: 2rem;
}

.homepage {
    color: #1D386D;
    font-family: var(--archivo-font-family);
    padding: 0;
}


.homepage .container {
    padding: 0;
}

/* Hero */
.hero {
    width: 100%;
}

.hero__content {
    padding: 1.375rem;
    margin-bottom: 2.75rem;
}

.hero__title {
    font-family: var(--instrument-font-family);
    font-size: 3rem;
}

.hero__title span {
    color: #B8860B;
    font-style: italic;
}

.hero__eyebrow {
    color: #2A5F8F;
    font-style: normal;
    font-stretch: 125%;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.99px;
    text-transform: uppercase;
}

.hero__cta {
    background-color: #FFCF01;
    border-radius: 0.5rem;
    color: #1D386D;
    display: inline-block;
    padding: 0.75rem 1.25rem;
    text-decoration: none;
    font-weight: 700;
}

.hero__cta:hover {
    background-color: #ffdc45;
    box-shadow: 0px 5px 15px #cccccc;
    color: #1D386D;
}

.hero__image img {
    display: block;
    width: 100%;
}

.hero__description {
    color: #43526C;
    font-size: 1.0625rem;
    margin: 1rem 0;
}

/* Intro */
.intro {
    margin: 3rem 1.5rem;
    border-bottom: 4px solid #FFCF01;
}

.intro__text {
    font-size: 1.1875rem;
    padding-bottom: 3rem;
}

/* Feature cards */
.feature-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 3.75rem 0;
    padding: 0 1.375rem;
}

.feature-card {
    background-color: #ffffff;
    border: 1px solid #E6EBF2;
    border-radius: 1rem;
    color: #43526C;
    display: flex;
    flex-direction: column;
    justify-content:;
    gap: 1.5rem;
    padding: 1.625rem;
    text-decoration: none;
}

a.feature-card:hover,
a.feature-card:active,
a.feature-card:visited {
    color: inherit;
}

.feature-card:hover {
    box-shadow: 0px 5px 25px #dddddd;
    cursor: pointer;
}

.feature-card:hover .feature-card__icon img {
    background-color: #FFCF01;
}

.feature-card:hover .feature-card__link .fa-arrow-right {
    margin-left: 1rem;
}

.feature-card__title {
    font-family: var(--instrument-font-family);
    font-size: 1.875rem;
}

.feature-card__description {
    color: #43526C;
}

.feature-card__link {
    color: #2A5F8F;
    font-weight: 500;
    text-decoration: none;
}

.feature-card__link .fa-arrow-right {
    margin-left: 0.5rem;
}

.feature-card__icon img {
    background-color: #f5f7fb;
    padding: .5rem;
    border-radius: 8px;
}

@media screen and (min-width: 768px) {
    .hero__title {
        font-size: 5.375rem;
    }
    
    .homepage .container {
        padding: 0;
        margin: 0 auto;
    }
    
    .hero__description {
        font-size: 1.25rem;
    }
    
    .intro__text {
        max-width: 60%;
        margin: 0 auto;
    }

    .feature-list {
        flex-direction: row;
    }

    .feature-card {
        flex: 1 1 0;
    }
}

@media screen and (min-width: 1024px) {
    .hero {
        background-color: #F4F7FB;
        display: grid;
        grid-template-columns:
            /* Simulate left margin based on display width */
            max(
                var(--page-padding),
                calc((100vw - var(--page-max-width)) / 2)
            )
            /* Text content width */
            minmax(28rem, 39rem)
            /* Image */
            minmax(0, 1fr);
    }

    .hero__content {
        grid-column: 2;
        margin: 0;
        padding: 4rem 3rem 4rem 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    .hero__image {
        grid-column: 3;
        min-width: 0;
    }

    .hero__image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: left;
    }

    .intro {
        margin: 3rem auto 1rem;
    }

    .intro__text {
        max-width: 62rem;
        margin: 0 auto;
    }

    .feature-list {
        margin: 3.75rem auto 5.375rem auto;
        padding: 0;
    }
}