/* mobile/tablet tabs */
@media (max-width: 767px)
{
	#tabLinks,
    h2.visibleSectionTitle
	{
		display: none !important;
	}

	h2.sectionTitle
	{
		display: block;
	}

	.contentSection
	{
		display: block !important;
	}

	.contentSection > *
	{
		display: none;
		padding: 10px 0 10px 0;
	}

	#tabLinks a#tabViewAll
	{
		display: none;
	}
}

/* desktop tabs */
@media (min-width: 768px)
{
    #tabLinks
    {
        margin-bottom: 64px;
    }
    
    #tabLinks::before 
    {
        content: 'Browse by Category';
        display: block;
        margin-bottom: 15px;
        font-size: 19px;
    }

	#tabLinks a
	{
		/* sizing/spacing modified from mockup per jessica */
		display: inline-block;
        padding: 5px 30px;
		margin-bottom: 22px;
		background: #ffffff;
        border-radius: 21px;
        color: var(--Black);
		--max-font-size: 18;
	}

    #tabLinks a:not(:last-child)
    {
        margin-right: 20px;
    }

	#tabLinks .current
	{
		text-decoration: none;
		cursor: default;
        background: var(--Canary-Yellow);
	}
    
    #tabLinks a:is(:hover, :focus)
    {
        background: var(--Canary-Yellow);
    }

	.sectionTitle
	{
		display: none;
	}

	#tabLinks a#tabViewAll
	{
		float: right;
		padding: 0.5em 0;
		border: none;
	}
}