/************************
HEADER
************************/
.header {
    background: var(--background-900);
    min-height: 100vh;
    padding: var(--spacing-grid);
}
.header__logo {
    display: block;
    text-align: center;
    margin-bottom: var(--spacing-grid);
}
.header__logo img {
    max-width: 80%;
    max-height: 250px;
}
.header__socials {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-m);
    margin-bottom: var(--spacing-grid);
}
.header__socials a {
    text-align: center;
    white-space: nowrap;
}
.header__socials a h2 {
    font-size: 1rem;
    margin: 0;
    padding: 0;
    display: block;
    margin-bottom: var(--spacing-xs);
}
a.header__custom {
    display: flex;
    align-items: center;
    justify-content: center;
}
a.header__custom h2 {
    margin: 0;
}
.header__socials a:first-child:nth-last-child(1), .header__socials a:first-child:nth-last-child(3) {
    grid-column: span 2;
}
.header .collection {
    margin-top: var(--spacing-m);
}
@media only screen and (max-width: 800px) {
    .header {
        border-radius: var(--border-radius);
        margin-top: var(--spacing-m);
        min-height: auto;
    }
    .header__socials small {
        display: none;
    }
    .header__socials a h2 {
        margin: 0;
    }
}
@media only screen and (max-width: 520px) {
    .header__logo img {
        max-height: 200px;
    }
}