html {
    width: 100%;
}

.header-link {
    padding: 0;
}

.nav {
    grid: auto / 1fr 1fr 1fr 1fr;
}

.nav * {
    color: light-dark(var(--dark-3), var(--light-3));
    background-color: light-dark(var(--light-3), var(--dark-3));
}

img {
    width: 100%;
    padding: 0;
}

#intro {
    grid: auto / 1fr;
    background-color: light-dark(var(--light-2), var(--dark-2));
}

em,
strong {
    padding: 0;
}

em {
    font-style: italic;
}

#works,
#events {
    grid: auto / 1fr;
}

.work,
.event {
    height: 100%;
    background-color: light-dark(var(--light-2), var(--dark-2));
}

p>a, span {
    padding: 0;
}

.footer {
    position: static;
    left: 0;
    bottom: 0;
    border-radius: 0;
    width: 100%;
}

@media (pointer: fine) {
    html {
        margin: auto;
        width: 80%;
    }

    #intro {
        grid: auto / 1fr 3fr;
    }

    #works, #events {
        grid: auto / repeat(3, 1fr);
    }

    .footer {
        position: fixed;
    }
}