/*------------------------------------------------
/ Homepage 
/-----------------------------------------------*/

/* Hero Section */
.hero-banner {
    height: 90vh;
    width: 100%;
    background: url('../images/hero-bg.svg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -10;
    overflow: hidden;
}

.hero-banner__img {
    height: 90vh;
    width: 100%;
    background: url('../images/mobile-hero-logo.svg');
    background-position: right 0 bottom -2rem;
    background-size: auto 40vmin;
    background-repeat: no-repeat;
    opacity: 0.8;
    position: absolute;
}

.hero-banner > .container {
    height: auto;
    max-height: 90vh;
    position: relative;
}

.hero-banner .flex {
    height: 90vh;
}

.hero-banner__content {
    margin-top: 0;
}

.hero-banner__text {
    z-index: 1;
}

.hero-banner__text .h1 {
    display: block;
}

.hero-banner__text span.h1 {
    margin-bottom: var(--m-16);
}

.hero-banner__text h1 {
    margin-bottom: var(--m-24);
}

.hero-banner__text .h4 {
    font-size: 1.13rem;
}

/* Featured Projects Section */
.feat-projects__content > *:not(:last-child) {
    margin-bottom: var(--m-32); 
} 

.feat-project__card {
    display: flex;
    flex-direction: column;
    gap: var(--m-16);
}

.feat-project__img {
    border-radius: var(--round);
    overflow: hidden;
}

.feat-project__img img {
    aspect-ratio: 4 / 3;
    width: 100%;
    object-fit: cover;
    vertical-align: top;
    transition: all 0.2s ease-out;
}

.feat-project__img img:hover {
    opacity: 0.9;
    transform: scale(1.035);
}

.feat-project__text h3 > a {
    color: var(--rose);
}

.feat-project__text h3 > a:hover {
    color: var(--dark-med-rose);
}

.feat-project__text :first-child {
    margin-bottom: 0.1rem;
}

.feat-project__text :nth-child(2) {
    color: var(--dark-med-rose);
    margin-bottom: var(--m-8);
}

.feat-project__text :last-child {
    padding-right: 2rem;
}

.more-projects__link {
    text-align: right;
}

/* Prevent Hero Section Text Break on Narrow Phones */
@media screen and (max-width: 453px) {

    span.avoid-wrap {
        display: unset;
    }

    .hero-banner__text .h4 {
        font-size: 1.09rem;
    }

}

/* Tablet */
@media screen and (min-width: 768px) {

    /* Hero Section */
    .hero-banner {
        height: 90vh;
        width: 100%;
        background: url('../images/hero-bg.svg');
        background-position: top;
        background-size: cover;
        background-repeat: no-repeat;
        overflow: hidden;
    }

    .hero-banner > .container {
        height: auto;
        max-height: 90vh;
        position: relative;
    }

    .hero-banner__img {
        height: 90vh;
        width: 100%;
        background: url('../images/desktop-hero-logo.svg');
        background-position: right 0 bottom -3rem;
        background-size: auto 49vmin;
        background-repeat: no-repeat;
        opacity: 0.8;
        position: absolute;
    }

    .hero-banner__content {
        margin-top: var(--m-24);
        row-gap: 0.4rem;
    }

    .hero-banner__text .h1 {
        margin-bottom: var(--m-24);
    }
    
    .hero-banner__text .h4 {
        font-size: 1.2rem;
        line-height: 1.8rem;
        margin-bottom: var(--m-32);
    }

    .hero-banner__text span.h1 {
        margin-bottom: var(--m-16);
    }
    
    .hero-banner__text h1 {
        margin-bottom: unset;
    }

    /* Prevent Banner Text Wrapping */
    span.avoid-wrap {
        display: inline-block;
    }

    /* Featured Projects Section */
    .feat-projects__content > *:not(:last-child) {
        margin-bottom: var(--m-8); 
    }

    .feat-projects__content.flex {
        justify-content: center;
        align-items: start;
    }

    .feat-project__text :first-child {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    .feat-project__text :last-child {
        padding-right: 1.5rem;
    }

}

/* Desktop */
@media screen and (min-width: 1080px) {

    /* Hero Section */
    .hero-banner {
        height: 90vh;
        width: 100%;
        background: url('../images/hero-bg.svg');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        overflow: hidden;
        z-index: -10;
    }

    .hero-banner > .container {
        height: auto;
        max-height: 90vh;
        position: relative;
    }

    .hero-banner__img {
        height: 90vh;
        width: 100%;
        background: url('../images/desktop-hero-logo.svg');
        background-position: right 7rem bottom -8vh;
        background-size: auto 72vh;
        background-repeat: no-repeat;
        opacity: 0.8;
        position: absolute;
    }
    
    .hero-banner__content {
        margin-top: var(--m-16);
        row-gap: 0.6rem;
    }

    .hero-banner__text {
        margin-top: var(--m-56);
    }

    .hero-banner__text span.h1 {
        margin-bottom: var(--m-24);
    }

    .hero-banner__text .h4 {
        font-size: 1.25rem;
    }

    /* Featured Projects Section */
    .feat-project__card {
        display: flex;
        flex-direction: column;
        gap: var(--m-24);
    }

    .feat-project__text :last-child {
        padding-right: 1rem;
    }

}

/* Large Desktop */
@media screen and (min-width: 1920px) {

    /* Hero Section */
    .hero-banner__img {
        height: 90vh;
        width: 100%;
        background: url('../images/desktop-hero-logo.svg');
        background-position: right 6rem bottom -9vh;
        background-size: auto 74vh;
        background-repeat: no-repeat;
        opacity: 0.8;
        position: absolute;
    }

    .hero-banner__content {
        margin-top: 0;
        row-gap: 0.4rem;
    }

    .hero-banner__text span.h1 {
        margin-bottom: var(--m-24);
    }

}