header {
    h1,
    p:first-child {
        margin: 50px 0 0;
    }
}

main,
section {
    &.image {
        background-color: light-dark(var(--accent), color-mix(in srgb, var(--accent), transparent 25%));
        img {
            display: block;
            margin: 0 auto;
            max-width: 346px;
            width: 100%;
        }
    }
}

:root {
    .kopquiz {
        --accent: #DB2732;
    }
    .portfolio {
        --accent: #F50;
    }
    .gridmates {
        --accent: #5a9af8;
    }
    .bettershots {
        --accent: teal;
    }
    .teamsheets {
        --accent: green;
    }
}