:root {--page-header-icon-width-mobile: 24px;}
@media (min-width: 500px) and (min-height: 500px) {:root {--page-header-icon-width-mobile: 32px;}}
@media (min-width: 800px) and (min-height: 700px) {:root {--page-header-icon-width-mobile: 40px;}}

 #page-header {
	width : 100%;
	display: grid;
}

#page-header.mobile {
	grid-template-columns: var(--page-header-icon-width-mobile) calc(var(--page-header-icon-width-mobile) + 8px) minmax(0, 1fr) auto minmax(0, 1fr) var(--page-header-icon-width-mobile) 8px var(--page-header-icon-width-mobile);
	grid-template-areas: 'm_menu . . m_logo . m_search . m_login';
	align-items: center;
}

#page-header.mobile #jbjs-logo {grid-area: m_logo;}
#page-header.mobile .menu  {grid-area: m_menu;}
#page-header.mobile #search-box  {grid-area: m_search;}
#page-header.mobile #user-info  {grid-area: m_login;}

/* desktop */

#page-header.desktop {
	grid-row-gap: 8px;
	grid-template-rows: auto fit-content(0);
	grid-template-areas: 'line1' 'line2';
}

 #page-header.desktop #page-header__line1 {
	grid-area: line1;
    display: grid;
	grid-template-columns: auto minmax(0, 1fr) 728px minmax(0, 1fr);
	grid-template-areas: 'logo . ad .';
	align-items: center;
}
 #page-header.desktop #page-header__line2 {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto 48px auto;
	grid-template-areas: 'menu . search . login';
	align-items: center;
}

#page-header.desktop  #page-header__line1 {grid-area: line1;}
#page-header.desktop  #page-header__line2 {grid-area: line2;}
#page-header.desktop #jbjs-logo {grid-area: logo;}
#page-header.desktop .ad-container  {grid-area: ad;}
#page-header.desktop .menu  {grid-area: menu;}
#page-header.desktop #search-box  {grid-area: search;}
#page-header.desktop #user-info  {grid-area: login;}