:root {
    --primary-color: rgb(223, 97, 0);
    --background-color: #0d0504;
    --text-color: #e7d2af;
    --text-color-muted: #b4bacf;
}
body {
    font-family: 'Open Sans', sans-serif;
    background: var(--background-color);
}
.hero {
    margin-bottom: var(--gap);
    color: white;
    text-align: right;
    position: relative;
}
.hero > img { display: block; }
.hero h1 {
    display: inline-block;
    font-size: clamp(2rem, 5vw, 7rem);
    line-height: 0.85;
    margin-block: 10px;
    padding-bottom: 0.2em;
}
.hero .subtitle {
    font-size: smaller;
    text-wrap: balance;
}
.hero .award-logo {
    margin-left: auto;
}

@media screen and (min-width: 768px) {
    .hero h1 {
        position: absolute;
        top: 50%;
        right: var(--gap);
        font-weight: 700;
    }
    .hero .award-logo {
        position: absolute;
        bottom: var(--gap);
        left: var(--gap);
        width: 172px;
        height: 119px;
    }
}

.project-layout {
    max-width: 64em;
    margin: 0 auto;
}
.two-col.grid--tablet {
    grid-template-columns: 1fr 1.5fr;
}