.heroImageWrapper
{
display: block;
width: 100%;
position: relative;
max-width: 70rem;
margin: 0 auto 1rem;
}

.heroImage
{
width: 100%;
height: 26rem;
background: #222 url("https://dh36nblqpps8a.cloudfront.net/assets/used/480x2-Used-Landing-2026.jpg") center/cover no-repeat;
position: relative;
}

.heroImageWrapper .usedLogo
{
margin: 0 auto;
padding: 0;
position: absolute;
top: 1rem;
left: 0;
right: 0;
width: 13.75rem;
height: 13.75rem;
background: url("https://dh36nblqpps8a.cloudfront.net/assets/used/used-logo-2026.svg") center/cover no-repeat;
}

.sub-categories-wrapper
{
display: grid;
gap: .75rem;
grid-template-columns: 1fr 1fr;
padding: 0 .75rem;
max-width: 72rem;
margin: 0 auto;
}

.sub-categories-wrapper > a > div:first-of-type
{
border-radius: .375rem;
overflow: hidden;
}

.sub-categories-wrapper > a img
{
width: 100%;
height: auto;
display: block;
transition: transform .3s ease-out .1s;
}

.sub-categories-wrapper > a:hover img
{
transform: scale(1.04);
}

.sub-categories-wrapper > a > h3
{
padding: .5rem 0 0;
margin: 0;
color: #444;
font-size: 1.375rem;
text-underline-offset: .75rem;
text-decoration: underline transparent;
transition: text-decoration-color .3s ease-out .1s;
}

.sub-categories-wrapper > a > h3 i
{
vertical-align: -0.06rem;
}

.sub-categories-wrapper > a:hover h3
{
color: #005380;
text-decoration: underline;
}

.categoryListings
{
padding: 0 .75rem;
margin-top: 2rem;
}

#usedAbout
{
margin: 1rem auto 0;
padding: 1.25rem 1rem;
background: #eee;
background: linear-gradient(180deg,rgba(238, 238, 238, 1) 15%, rgba(255, 255, 255, 1) 50%);
}

.usedAbout-grid-image-1 { grid-area: usedAbout-grid-image-1; }
.usedAbout-grid-image-2 { grid-area: usedAbout-grid-image-2; }
.usedAbout-grid-image-3 { grid-area: usedAbout-grid-image-3; }

#usedAbout .usedAbout-grid
{
max-width: 48rem;
border-radius: .375rem;
overflow: hidden;
margin: 0 auto;
display: grid;
gap: .625rem;
grid-template-areas:
	"usedAbout-grid-image-2 usedAbout-grid-image-2"
	"usedAbout-grid-image-1 usedAbout-grid-image-3";
}

#usedAbout .usedAbout-grid img
{
display: block;
width: 100%;
height: auto;
}

#usedAbout .usedAbout-content
{
max-width: 38rem;
margin: 2rem auto;
padding: 0 1rem;
}

#usedAbout .usedAbout-content p
{
line-height: 1.4;
}

@media screen and (min-width: 30rem)
{

	.sub-categories-wrapper > a > h3
	{
	padding: .5rem .375rem 0;
	font-size: 1.5rem;
	}
	
	.usedAbout-grid-image-1, .usedAbout-grid-image-2, .usedAbout-grid-image-3
	{
	grid-area: auto;
	}
	
	#usedAbout .usedAbout-grid
	{
	grid-template-areas: none;
	grid-template-columns: 1fr 2fr 1fr;
	}
}

@media screen and (min-width: 40rem)
{
	
	.heroImage
	{
	height: 30rem;
	background: #222 url("https://dh36nblqpps8a.cloudfront.net/assets/used/1120x1.5_-Used-Landing-2026.jpg") 35% center/cover no-repeat;
	}
	
	.heroImageWrapper .usedLogo
	{
	top: 6rem;
	right: -20rem;
	width: 18rem;
	height: 18rem;
	}
	
	#usedAbout
	{
	margin: 3rem auto;
	padding: 4rem 1rem 0;
	}
	
	#usedAbout .usedAbout-content
	{
	margin: 3rem auto 0;
	}

	#usedAbout .usedAbout-content p
	{
	font-size: 1.125rem;
	}
	
} 

@media screen and (min-width: 48rem)
{
	
	.heroImage
	{
	background-position: center;
	}
	
	.heroImageWrapper .usedLogo
	{
	top: 5rem;
	right: -30rem;
	width: 20rem;
	height: 20rem;
	}
	
	.sub-categories-wrapper
	{
	gap: 1rem;
	grid-template-columns: repeat(4, 1fr);
	padding: 0 1rem;
	}

	.categoryListings
	{
	padding: 0 1rem;
	margin-top: 4rem;
	}
	
	#usedAbout
	{
	padding: 8rem 1rem 1rem;
	}
	
}

@media screen and (min-width: 70rem)
{
	
	.heroImageWrapper
	{
	overflow: hidden;
	border-radius: .375rem;
	}
	
	.heroImageWrapper .usedLogo
	{
	right: -34rem;
	}
	
	.categoryListings
	{
	padding: 0 .5rem;
	}
    	
}