/* Header logo (fragments/logo.html) */
.header-logo {
    display: block;
    width: 160px;
    margin: 0 auto 1rem;
    position: relative;
    z-index: 1;
}

.header-logo img {
    display: block;
    width: 100%;
    height: auto;
}

/* Wide screens: top-left corner of the header (narrower ones keep it centered above the title so it can't overlap it) */
@media (min-width: 992px) {
    .header-logo {
        position: absolute;
        top: 1rem;
        left: 1.5rem;
        width: 160px;
        margin: 0;
    }
}

@media (min-width: 1200px) {
    .header-logo {
        width: 220px;
    }
}