.site-header,
.page-header {
    display: flex;
    column-gap: 20px;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
    padding: 0 8px;
}

.site-header {
    flex-wrap: wrap-reverse;
}

.site-header__icon {
    max-width: 135px;
    width: 50%;
    height: auto;
}

body.dark-theme .site-header__icon {
    filter: invert(1);
    color: var(--color-text);
}

.site-header__site-title,
.page-header__title {
    font-weight: bold;
}

@media (min-width: 300px) {
    .site-header {
        flex-wrap: nowrap;
    }
    
    .site-header__icon {
        width: 33%;
    }
}