.header-blog {
    --overflow-button-width: 60px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    background-color: var(--gray);
}
@media(min-width: 330px) {
    .header-blog {
        display: flex;
    }
}

.header-blog > * {
    flex: 1 0 40%;
}

.header-blog .container-nav {
    grid-column: 1 / span 2;
}

.header-blog .custom-navbar .label,
.header-blog .container-link {
    line-height: 60px;
}

.header-blog .container-link {
    background-color: var(--color1-alt-1);
    color: white;
    text-align: center;
}
.header-blog .container-link a {
    font-family: var(--saans-heavy);
    font-size: 18px;
    color: var(--gray);
    text-transform: uppercase;
	letter-spacing: .05em;
}

.header-blog .custom-navbar {
    display: grid;
    grid-template: auto / max-content minmax(0, 1fr);
    align-items: center;
    margin: 0;
    border: none;
    font-family: var(--saans-heavy);
    font-size: 18px;
    color: white;
    text-transform: uppercase;
	letter-spacing: .05em;
}
.header-blog .custom-navbar .label {
    color: var(--color1-alt-1);
    display: inline-block;
    padding: 0 0 0 40px;
    font-size: .8em;
}
.header-blog .custom-navbar .primary-list {
    flex-basis: calc(100% - var(--overflow-button-width));
    padding-right: 20px;
    line-height: 32px;
}
.header-blog .custom-navbar .inner {
    display: flex;
    justify-content: space-between;
    margin: 0;
    max-width: 100%;
}
.header-blog .custom-navbar .primary-list li a {
    color: white;
}
.header-blog .custom-navbar .overflow {
    background-color: transparent;
}
.header-blog .custom-navbar .overflow.open .overflow-list {
    min-width: 240px;
    bottom: 1px;
    background-color: var(--gray);
    border: none;
}
.header-blog .custom-navbar .overflow button {
    min-width: 0;
    width: var(--overflow-button-width);
    height: 100%;
    margin: 0;
}
.header-blog .custom-navbar .mobile-caption,
.header-blog .custom-navbar .desktop-caption {
    display: none;
}

.header-blog .container-search {
    order: 1;
    grid-column: 1 / span 3;
    padding: 0 10px;
    background-color: var(--color1-alt-1);
}
.header-blog .blogSearchForm {
    max-width: 400px;
    height: 34px;
    margin: 10px auto 0;
    border-bottom: 2px solid var(--gray);
}
.header-blog .blogSearchForm h3 {
    display: none;
}

.header-blog .blogSearchForm input[type="text"],
.header-blog .blogSearchForm select {
    color: var(--gray);
}

.header-blog .blogSearchForm input[type="text"],
.header-blog .blogSearchForm select {
    background-color: transparent;
    text-transform: uppercase;
	letter-spacing: .05em;
    font-family: var(--saans-heavy);
    font-size: .8em;
}

.header-blog .blogSearchForm input[type="text"]:focus,
.header-blog .blogSearchForm .submitSearch:focus {
    outline: 1px solid var(--color2);
}
@media (max-width: 400px) {
    .header-blog .custom-navbar .label {
        padding: 0 0 0 10px;
    }
    .header-blog .blogSearchForm input[type="text"] {
        font-size: .7em;
    }
    .custom-navbar .overflow button {
        padding: var(--vertical-padding) 5px;
    }
    
}

@media(min-width: 64em) {
    .header-blog .blogSearchForm input[type="text"],
    .header-blog .blogSearchForm input[type="text"]:focus {
        width: calc(100% - 25px);
        max-width: calc(100% - 25px);
    }
}

.header-blog .blogSearchForm .submitSearch:hover,
.header-blog .blogSearchForm .submitSearch:focus {
    background-color: transparent;
    background-image: url('https://www.visitsaltlake.com/includes/public/assets/shared/blog-header-search-grey.svg');
    background-size: contain;
    background-repeat: no-repeat;
    color: transparent;
}

.header-blog .blogSearchForm form > .row > div {
    position: relative;
}

.header-blog .blogSearchForm form {
    display: flex;
    justify-content: space-between;
}

.header-blog .blogSearchForm .submitSearch {
    width: 18px;
    height: 27px;
    padding: 0;
    background-image: url('https://www.visitsaltlake.com/includes/public/assets/shared/blog-header-search-grey.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-color: transparent;
    color: transparent;
    position: relative;
    top: 6px;
}

.header-blog .blogSearchForm form > .row:nth-child(1),
.header-blog .blogSearchForm form > .row:nth-child(2) {
    display: none;
}

@media (hover: hover) {
    .header-blog .custom-navbar .overflow a:hover {
        color: white;
    }
}

@media (min-width: 50em) {
    .header-blog {
        grid-template:
        'nav search' auto / minmax(0, 1fr) 310px;
    }

    .header-blog .container-nav {
        grid-area: nav;
    }

    .header-blog .container-search {
        grid-area: search;
        max-width: 310px;
        padding: 0 40px 0 33px;
        background: var(--color1-alt-1);
    }

    .header-blog .container-link {
        grid-area: link;
        max-width: 225px;
    }

    .header-blog .custom-navbar .label,
    .header-blog .container-link {
        line-height: 72px;
    }

    .header-blog .custom-navbar .overflow {
        position: static;
    }

    .header-blog .custom-navbar .overflow button {
        margin: 5px 0 0 0;
    }

    .header-blog .blogSearchForm {
        margin: 20px 0 0 auto;
        border-color: var(--gray);
    }
}

@media (min-width: 64em) {
    .header-blog {
        max-width: 100%;
    }
}