.active {
    background-color: #585B5C;
    text-decoration: none;
}

/* md: and up — 768px+ */
@media (min-width: 768px) {
    .active {
        background-color: transparent;
        text-decoration: underline;

        /* or use 'underline double' if browser supports it */
        text-decoration-thickness: 2px;

        /* optional: make it thicker */
        /* text-decoration-style: double; */
        /* uncomment for double underline, but limited browser support */
    }
}

.hero-section {
    background-image: url('../img/picture-cto-scaled.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    /* left-align by default */
    color: white;
}

@media (max-width: 768px) {
    .hero-section {
        background-image: url('../img/image-from-rawpixel-id-1015313-jpeg.jpg');
        justify-content: center;

        /* center-align on mobile */
        text-align: center;
    }
}