/* Square header logos: override the previous short, wide logo dimensions. */
.main-header .brand-logo {
    flex-shrink: 0;
}

.main-header .brand-logo .brand-logo-image {
    width: 170px !important;
    height: 170px;
    max-width: none;
    max-height: none;
    object-fit: contain;
    transition: width 0.3s ease, height 0.3s ease, transform 0.3s ease;
}

.main-header.scrolled {
    padding: 8px 0;
}

.main-header.scrolled .brand-logo .brand-logo-image {
    width: 90px !important;
    height: 90px;
}

/* Let the square logo fit inside the mobile header. */
@media (max-width: 991px) {
    .main-header,
    .main-header .header-container {
        height: 170px;
        min-height: 170px;
    }

    .main-header.scrolled,
    .main-header.scrolled .header-container {
        height: 90px;
        min-height: 90px;
    }
}