@media (min-width: 768px /*tablet*/){}
@media (min-width: 1024px /*desktop*/ ){}
@media (min-width: 1216px /*widescreen*/ ){}
@media (min-width: 1408px /*fullhd*/ ){}

.home-notice{
	background: #fcfcfc;
	display: grid;
	grid-template-columns: 1fr;
	justify-items: center;
	padding: 0.3rem 0.6rem;
	align-items: center;
}
.home-notice > div{
	text-decoration: underline;
	display: flex;
	justify-items: center;
	align-items: center;
	text-underline-offset:0.5em;
	line-height: 4rem;
}

.home-notice .close{
	width: 2rem;
	margin-bottom: 0;
	line-height: 4rem;
	display: flex;
	justify-content: center;
	align-items: center;
}
.home-notice .close svg{
	fill: var(--color-foreground)
}

.grid-main-contents > .grid-item:nth-child(odd){
	background: rgb(255, 252, 243);
}


.floating-banners{
	position: relative;
}

.floating-banners .floating-banners-container{
	margin: 0 auto;
	height: 100%;
	line-height: 0;
	overflow-x: hidden;
	scrollbar-width: thin;
	overflow-y: hidden;
	width: calc(100% - 2rem);
}

.floating-banners-grid{
	display: grid;
	line-height: 0;
	grid-auto-flow: column;
	flex-direction: row;
	flex-wrap: nowrap;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	position: relative;
	gap: 2rem;
	grid-template-columns: repeat(8, calc( 100% / 1 - 3rem));
}


@media (min-width: 768px /*tablet*/){
	.floating-banners-grid{
		grid-template-columns: repeat(8, calc( 100% / 2 - 3rem));
	}
}

@media (min-width: 1024px /*desktop*/ ){
	.floating-banners-grid{
		grid-template-columns: repeat(8, calc( 100% / 2 - 3rem));
	}
}

@media (min-width: 1216px /*widescreen*/ ){
	.floating-banners-grid{
		grid-template-columns: repeat(8, calc( 100% / 3 - 3rem));
	}
}

@media (min-width: 1408px /*fullhd*/ ){
	.floating-banners-grid{
		grid-template-columns: repeat(8, calc( 100% / 2 - 4rem));
	}
}

.floating-banners-grid > a{
	position: relative;
	text-align: center;
}

.floating-banners-grid a img{
	max-width: 100%;
	border-radius: var(--border-rudius);
}

.floating-banners-grid a:hover img{
	transform: scale(1.01);
}

.floating-banners .prev,
.floating-banners .next{
	position: absolute;
	display: grid;
	justify-content: center;
	align-items: center;
	width: 4rem;
	height: 8rem;
	top:calc(50% - 4rem);
	background: rgba(255,255,255,0.8);
}
.floating-banners .prev svg,
.floating-banners .next svg{
	fill: rgba(0,0,0,0.8);
	cursor: pointer;
	width: 4rem;
}
.floating-banners .prev{
	left: 0;
}
.floating-banners .next{
	right: 0;
}

@media (min-width: 768px /*tablet*/){
	
}

@media (min-width: 1024px /*desktop*/ ){

}

@media (min-width: 1216px /*widescreen*/ ){

}

@media (min-width: 1408px /*fullhd*/ ){

}

.fixed-banners{
	display: grid;
	padding: 4rem 0 0 0;
}
.fixed-banners-grid{
	display: grid;
	grid-template-columns: repeat(2,1fr);
	justify-content: center;
	align-items: center;
	gap:2rem;
	padding: 0 1rem;
}

.fixed-banners-grid a{
	text-align: center;
}
.fixed-banners-grid a img {
	margin: 0 auto;
	max-width: 100%;
	border: 1px solid var(--color-light)
}

@media (min-width: 768px /*tablet*/){
	.fixed-banners-grid a img {
		max-height: 12rem;
	}
}


@media (min-width: 1408px){
	.fixed-banners{
		display: grid;
		grid-template-columns: 1000px;
		justify-content: center;
	}
	.fixed-banners-grid{
		grid-template-columns: repeat(2,1fr);
	}
}


.new-items{
	font-size: 3.6rem;
	padding: 2rem 1rem;
	padding-bottom: 8rem;
	line-height: 0.6em;
}
.new-items .heading{
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.new-items h2{
	grid-column: 1/3;
	line-height: 4rem;
	font-size: 3.6rem;
	padding: 1rem 2rem;
	line-height: 0.8em;
	border-radius: var(--border-rudius);
	color: var(--color-foreground);
	letter-spacing: -0.01em;
}

@media (min-width: 768px /*tablet*/){

	.new-items h2{
		grid-column: 1/3;
	}

}
@media (min-width: 1024px /*desktop*/ ){}
@media (min-width: 1216px /*widescreen*/ ){}
@media (min-width: 1408px /*fullhd*/ ){}

.new-items h2 span{
	display: block;
}

.new-items h2 span:nth-child(2){
	font-size: 1.4rem;
}

.new-items-product-grid{
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 1.6rem;
	line-height: 1.8rem;
}


.new-items-grid a h3{
	padding: 0;
	margin:0
}
.new-items-grid a h3,
.new-items-grid a p{
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	margin:0.6rem;
}


.new-items-product-grid a {
	position: relative;
	font-size:1rem;
	width: 100%;
	background: #fff;
	color:#666;
	text-decoration: none;
	box-sizing: border-box;
	border: 1px solid #e4ddd2;
}
.new-items-product-grid > a .caption{
	display: grid;
}
.new-items-product-grid > a .caption::after{
	content: '\00bb';
	font-size: 2rem;
	align-self: end;
	justify-self: end;
	color: #4e3a1f;
	margin:1rem;

}
.new-items-product-grid a>*{
	padding: 0 1rem;
	overflow: hidden;
}

.new-items-product-grid a .image{
	overflow: hidden;
	padding: initial;
}



@media (min-width: 768px){
	.new-items-product-grid{
		grid-template-columns: repeat(4,1fr);
	}
}

@media (min-width: 1024px){
	.new-items-product-grid{
		grid-template-columns: repeat(4,1fr);
	}

}
@media (min-width: 1216px){
	.new-items-product-grid{
		grid-template-columns: repeat(5,1fr);
	}
	.new-items-product-grid a h3,
	.new-items-product-grid a p{
		text-overflow:unset;
		overflow: hidden;
		white-space:normal;
	}

}
@media (min-width: 1408px){
	.new-items{
		display: grid;
		grid-template-columns: var(--max-column-width);
		justify-content: center;
	}
	.new-items-product-grid{
		grid-template-columns: repeat(5,1fr);
	}
}


.new-items-product-grid a .image{
	position: relative;
	z-index: 1;
}

.new-items-product-grid a .caption{
	background: #fff;
	margin: 0;
	position: relative;
	z-index: 1;
}
.new-items-product-grid a h3,
.new-items-product-grid a p{
	position: relative;
	z-index: 2;
	background: rgba(255,255,255,1);
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	margin: 0.6rem;
}

.new-items-product-grid a img{
	max-width: 100%;
	transform: scale(1.5);
	position: relative;
	padding-top: 4rem;
}

.new-items-product-grid a:hover img{
	transform: scale(1.7);
}

.new-items-product-grid a{
	position: relative;
	overflow: hidden;
	text-decoration: none;
	border-radius: 0.6rem;
	display: grid;
	grid-template-rows: 18rem auto auto;
	align-items: center;
	justify-content: start;
}

@media (min-width: 768px /*tablet*/){
	.new-items-product-grid a{
		grid-template-rows: 26rem auto auto;
	}
}
@media (min-width: 1024px /*desktop*/ ){
	.new-items-product-grid a{
		grid-template-rows: 33rem auto auto;
	}
}
@media (min-width: 1216px /*widescreen*/ ){
	.new-items-product-grid a{
		grid-template-rows: 42rem auto auto;
	}

}
@media (min-width: 1408px /*fullhd*/ ){
	.new-items-product-grid a{
		grid-template-rows: 26rem auto auto;
	}
}

.new-items-product-grid a h3{
	font-weight: bold;
	font-size: 1.4rem;
	margin:2rem 0 0 0;
	background: var(--color-white);
}
.new-items-product-grid a p{
	font-size: 1.2rem
}

.recommend-items{
	font-size: 3.6rem;
	padding: 3rem 1rem;
	padding-bottom: 8rem;
	line-height: 0.6em;
}
.recommend-items .heading{
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.recommend-items h2{
	grid-column: 1/3;
	line-height: 4rem;
	font-size: 3.6rem;
	padding: 1rem 2rem;
	line-height: 0.8em;
	border-radius: var(--border-rudius);
	letter-spacing: -0.01em;
}

@media (min-width: 768px /*tablet*/){

	.recommend-items h2{
		grid-column: 1/3;
	}

}
@media (min-width: 1024px /*desktop*/ ){}
@media (min-width: 1216px /*widescreen*/ ){}
@media (min-width: 1408px /*fullhd*/ ){}

.recommend-items h2 span{
	display: block;
}

.recommend-items h2 span:nth-child(2){
	font-size: 1.4rem;
}

.recommend-items-product-grid{
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 1.6rem;
	line-height: 1.8rem;
}


.recommend-items-product-grid a {
	position: relative;
	font-size:1rem;
	width: 100%;
	background: #fff;
	color:#666;
	text-decoration: none;
	box-sizing: border-box;
	border: 1px solid #e4ddd2;
}

.recommend-items-product-grid a h3,
.recommend-items-product-grid a p{
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	margin:0.6rem;
}
.recommend-items-product-grid > a .caption{
	display: grid;
	background: var(--color-white);
	position: relative;
	z-index: 1;
}
.recommend-items-product-grid > a .caption::after{
	content: '\00bb';
	font-size: 2rem;
	align-self: end;
	justify-self: end;
	color: #4e3a1f;
	margin:1rem;
}
.recommend-items-product-grid a>*{
	padding: 0 1rem;
	overflow: hidden;
}

.recommend-items-product-grid a .image{
	overflow: hidden;
	padding: initial;
}



@media (min-width: 768px){
	.recommend-items-product-grid{
		grid-template-columns: repeat(3,1fr);
	}
}

@media (min-width: 1024px){
	.recommend-items-product-grid{
		grid-template-columns: repeat(4,1fr);
	}

}
@media (min-width: 1216px){
	.recommend-items-product-grid{
		grid-template-columns: repeat(4,1fr);
	}


}
@media (min-width: 1408px){
	.recommend-items{
		display: grid;
		grid-template-columns: var(--max-column-width);
		justify-content: center;
	}
	.recommend-items-product-grid{
		grid-template-columns: repeat(6,1fr);
	}
}


.recommend-items-product-grid a .image{
	position: relative;
	z-index: 1;
}

.recommend-items-product-grid a h3,
.recommend-items-product-grid a p{
	position: relative;
	z-index: 2;
	background: rgba(255,255,255,1);
}

.recommend-items-product-grid a img{
	max-width: 100%;
	transform: scale(1.5);
	position: relative;
	padding-top: 4rem;
}

.recommend-items-product-grid a:hover img{
	transform: scale(1.7);
}

.recommend-items-product-grid a{
	position: relative;
	overflow: hidden;
	text-decoration: none;
	border-radius: 0.6rem;
	display: grid;
	grid-template-rows: 18rem auto auto;
	align-items: center;
	justify-content: start;
}

@media (min-width: 768px /*tablet*/){
	.recommend-items-product-grid a{
		grid-template-rows: 22rem auto auto;
	}
}
@media (min-width: 1024px /*desktop*/ ){
	.recommend-items-product-grid a{
		grid-template-rows: 22rem auto auto;
	}
}
@media (min-width: 1216px /*widescreen*/ ){
	.recommend-items-product-grid a{
		grid-template-rows: 22rem auto auto;
	}

}
@media (min-width: 1408px /*fullhd*/ ){
	.recommend-items-product-grid a{
		grid-template-rows: 22rem auto auto;
	}
}

.recommend-items-product-grid a h3{
	font-weight: bold;
	font-size: 1.4rem;
	margin:2rem 0 0 0;
	background: var(--color-white);
}
.recommend-items-product-grid a p{
	font-size: 1.2rem
}

.sale-campaign{
	display: grid;
	grid-template-columns: 1fr;
	padding: 3rem 1rem;
}


.sale-campaign .heading{
	display: grid;
	grid-template-columns: 1fr 1fr;
	position: relative;
}

.sale-campaign h2{
	grid-column: 1/3;
	line-height: 4rem;
	font-size: 5rem;
	padding: 2rem 4rem 1rem 4rem;
	line-height: 0.8em;
	color:var(--color-white);
	letter-spacing: -0.01em;
	background: var(--color-primary);
	margin-right: auto;
}

@media (min-width: 768px /*tablet*/){

	.sale-campaign h2{
		grid-column: 1/2;
	}

}


.sale-campaign h2 span{
	display: block;
}

.sale-campaign h2 span:nth-child(2){
	font-size: 1.4rem;
}


.sale-campaign-grid{
	margin: 2rem 0;
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 2rem;
}

.sale-campaign-grid > a{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto auto;
	justify-content: start;
	text-decoration: none;
	background-color: var(--color-white);
	border: 1px solid #f5eced;
	border-radius: var(--border-rudius);
}

.sale-campaign-grid > a{
	font-size: 1.3rem;
	line-height: 1.4em;
	min-width: 0;
}
/*
.sale-campaign-grid > a > p::after{
	content: '\00bb';
	font-size: 2rem;
	align-self: end;
	justify-self: end;
	color:var(--color-primary-light);
	margin: 1rem;
}*/
.sale-campaign-grid > a > p{
	margin: 0;
	padding: 1rem;
	max-width: 100%;
	
}


.sale-campaign-grid > a p{
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}




.sale-campaign-grid > a h3{
	display: none;
}

.sale-campaign-grid > a>*:nth-child(2){
	justify-self: center;
}

.sale-campaign-grid > a img{
	max-width: 100%;
}

.sale-campaign-grid > a h3{
	padding: 2rem;
	margin: 0;
	font-size: 1.6rem;
}

.sale-campaign-grid > a h3{
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}


@media (min-width: 768px /*tablet*/){
	.sale-campaign-grid > a h3{
		display: block;
	}
	.sale-campaign-grid > a:nth-of-type(-n+1) h3,
	.sale-campaign-grid > a:nth-of-type(-n+1) p{
		text-overflow:unset;
		overflow: auto;
		white-space: wrap;
	}
}

@media (min-width: 768px /*tablet*/){
	.sale-campaign-grid{
		grid-template-columns: repeat(3,1fr);
		grid-auto-flow: dense;
	}
}
@media (min-width: 1024px /*desktop*/ ){}
@media (min-width: 1216px /*widescreen*/ ){
	.sale-campaign-grid{
		grid-template-columns: 20rem repeat(4,1fr);
		grid-auto-flow: dense;
	}

	.sale-campaign-grid > *:nth-child(1){
		grid-row: span 2;
		grid-column: span 2;
	}
}

@media (min-width: 1408px /*fullhd*/ ){

	.sale-campaign{
		display: grid;
		grid-template-columns: var(--max-column-width);
		justify-content: center;
	}

}

.reuse-top{
	margin-bottom: 6rem;
	padding: 6rem 1rem;
}

@media (min-width: 1408px /*fullhd*/ ){

	.reuse-top{
		display: grid;
		grid-template-columns: var(--max-column-width);
		justify-content: center;
	}

}

.reuse-top .heading{
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.reuse-top h2{
	grid-column: 1/3;
	color: #ff9900;
	line-height: 4rem;
	font-size: 5rem;
	padding: 1rem 2rem;
	line-height: 0.6em;
	border-radius: var(--border-rudius);
	margin: 2rem 1rem;
}

@media (min-width: 768px /*tablet*/){
	.reuse-top h2{
		grid-column: 1/3;
	}
}
@media (min-width: 1024px /*desktop*/ ){

}
@media (min-width: 1216px /*widescreen*/ ){}
@media (min-width: 1408px /*fullhd*/ ){}

.reuse-top h2 span{
	display: block;
}
.reuse-top h2 span:nth-child(2){
	font-size: 1.4rem;
}

.reuse-top-grid{
	display: grid;
	grid-template-columns: 1fr;
	gap:2rem;
	align-items: start;
	line-height: 1.6em;
	padding:0 1rem;
	margin-top:2rem;
}

@media (min-width: 768px /*tablet*/){}
@media (min-width: 1024px /*desktop*/ ){
	.reuse-top-grid{
		grid-template-columns: 1fr 2fr;
	}
}
@media (min-width: 1216px /*widescreen*/ ){}
@media (min-width: 1408px /*fullhd*/ ){}

.reuse-top-search-items{
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 768px /*tablet*/){
	.reuse-top-search-items{
		grid-template-columns: 1fr 1fr;
	}
}
@media (min-width: 1024px /*desktop*/ ){
	.reuse-top-search-items{
		grid-template-columns: auto;
	}
}
@media (min-width: 1216px /*widescreen*/ ){}
@media (min-width: 1408px /*fullhd*/ ){}
.reuse-top-search-items > a{
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: 10rem 1fr 2rem;
	align-items: center;
	background-color: var(--color-white);
	justify-content: center;
	column-gap: 1rem;
	padding: 0.6rem;
	border: 1px solid var(--color-light);
	border-radius: var(--border-rudius);
}
.reuse-top-search-items > a::after{
	content: '\00bb';
	font-size: 2rem;
	align-self: center;
	color: #ff9900;
}
.reuse-top-search-items h3{
	margin: 0rem;
	padding: 0.5rem;
}
.reuse-top-search-items p{
	font-size: 1.2rem;
}

.reuse-top-search-items .image img{
	max-width: 100%;
	max-height: 100%;
}
.reuse-campaign-links{
	display: grid;
	grid-template-columns:repeat(1,1fr);
	position: relative;
	gap: 2rem;
}

.reuse-campaign-links h3{
	margin: 0.6rem 0;
}
.reuse-campaign-links a{
	position: relative;
	background: var(--color-white);
	border: 1px solid var(--color-light);
	border-radius: var(--border-rudius);
	display: grid;
	grid-template-columns: 15rem 1fr;
	gap:1rem
}
.reuse-campaign-links > a::after{
	content: '\00bb';
	font-size: 2rem;
	justify-self: end;
	color: #ff9900;
}
.reuse-campaign-links a p{
	display: none;
}
.reuse-campaign-links a .image{
	justify-self: center;
	line-height: 0;
}
.reuse-campaign-links a .image img{
	max-width: 100%;
	max-height: 100%;
}

@media (min-width: 768px /*tablet*/){

	.reuse-campaign-links{
		display: grid;
		grid-template-columns:repeat(2,1fr);
		position: relative;
		gap: 2rem;
	}

	.reuse-campaign-links a{
		background: var(--color-white);
		padding: 2rem 1rem;
		grid-template-columns: 1fr;
		gap:1rem
	}
	.reuse-campaign-links a p{
		display: block;
	}
}
@media (min-width: 1024px /*desktop*/ ){}
@media (min-width: 1216px /*widescreen*/ ){}
@media (min-width: 1408px /*fullhd*/ ){

}



/*
 * 
 */
.feature{
	display: grid;
	padding: 1rem 1rem 6rem 1rem;
}

@media (min-width: 1408px /*fullhd*/ ){

	.feature{
		display: grid;
		grid-template-columns: var(--max-column-width);
		justify-content: center;
	}

}

.feature-grid{
	display: grid;
	grid-template-columns: 1fr;
	align-items: start;
	gap:1rem;
	line-height: 1.6em;
	margin-top: 1rem;
}

@media (min-width: 768px /*tablet*/){}
@media (min-width: 1024px /*desktop*/ ){
	.feature-grid{
		grid-template-columns: 1fr;
	}

}
@media (min-width: 1216px /*widescreen*/ ){}
@media (min-width: 1408px /*fullhd*/ ){}


.feature .heading{
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.feature h2{
	grid-column: 1/3;
	line-height: 4rem;
	font-size: 5rem;
	padding: 1rem 2rem;
	line-height: 0.8em;
	border-radius: var(--border-rudius);
	letter-spacing: -0.01em;
}
@media (min-width: 768px /*tablet*/){

	.feature h2{
		grid-column: 1/3;
	}

}
@media (min-width: 1024px /*desktop*/ ){}
@media (min-width: 1216px /*widescreen*/ ){}
@media (min-width: 1408px /*fullhd*/ ){}

.feature h2 span{
	display: block;
}

.feature h2 span:nth-child(2){
	font-size: 1.4rem;
}


@media (min-width: 768px /*tablet*/){
	.feature-grid{
		grid-template-columns: repeat(2,1fr);
	}

}
@media (min-width: 1024px /*desktop*/ ){
	.feature-grid{
		grid-template-columns: repeat(4,auto);
	}
}
@media (min-width: 1216px /*widescreen*/ ){}
@media (min-width: 1408px /*fullhd*/ ){}

.feature-grid a{
	display: grid;
	gap:1rem;
	text-decoration: none;
	background: var(--color-white);
	justify-content: center;
	align-items: center;
	border:1px solid var(--color-light);
	padding: 1rem;
	grid-template-columns: 8rem 1fr 4rem;
	position: relative;
}
.feature-grid a > div{
	position: relative;
}
.feature-grid a > div > p{
	position: relative;
}
@media (min-width: 768px /*tablet*/){
	.feature-grid a{
		grid-template-columns: 1fr;
		grid-template-rows: 20rem 6rem 3rem;
	}
}


.feature-grid h3{
	margin: 0;
}

.feature-grid a p{
	font-size:1.2rem;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	position: relative;
	max-width: 100%;
}
.feature-grid a > div{
	min-width: 0;
}
.feature-grid a .image{
	justify-self: center;
}
.feature-grid a .image img{
	max-width: 100%;
}

.feature-grid > a::after{
	content: '\00bb';
	font-size: 2rem;
	align-self: end;
	justify-self: end;
	color: var(--color-foreground);
}

@media (min-width: 768px /*tablet*/){
	.feature-grid > a::after{
		align-self: end;
		justify-self: end;
	}
}




/*
 * 
 */
.media{
	display: grid;
	padding: 6rem 1rem;
}

@media (min-width: 1408px /*fullhd*/ ){

	.media{
		display: grid;
		grid-template-columns: var(--max-column-width);
		justify-content: center;
	}

}

.media-grid{
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap:4rem;
	line-height: 1.6em;
	margin-top: 1rem;
}

@media (min-width: 768px /*tablet*/){}
@media (min-width: 1024px /*desktop*/ ){
	.media-grid{
		grid-template-columns: 1fr;
	}
}
@media (min-width: 1216px /*widescreen*/ ){}
@media (min-width: 1408px /*fullhd*/ ){}


.media .heading{
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.media h2{
	grid-column: 1/3;
	line-height: 4rem;
	font-size: 5rem;
	padding: 1rem 2rem;
	line-height: 0.8em;
	border-radius: var(--border-rudius);
	letter-spacing: -0.01em;
}
@media (min-width: 768px /*tablet*/){

	.media h2{
		grid-column: 1/3;
	}

}
@media (min-width: 1024px /*desktop*/ ){}
@media (min-width: 1216px /*widescreen*/ ){}
@media (min-width: 1408px /*fullhd*/ ){}

.media h2 span{
	display: block;
}

.media h2 span:nth-child(2){
	font-size: 1.4rem;
}

.media-grid{
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	position: relative;
	justify-content: center;
	align-items: center;
}

@media (min-width: 768px /*tablet*/){
	.media-grid{
		grid-template-columns: repeat(2,1fr);
	}

}
@media (min-width: 1024px /*desktop*/ ){
	.media-grid{
		grid-template-columns: repeat(4,1fr);
	}
}
@media (min-width: 1216px /*widescreen*/ ){}
@media (min-width: 1408px /*fullhd*/ ){}

.media-grid a{
	display: grid;
	gap:1rem;
	text-decoration: none;
	background: var(--color-white);
	justify-content: center;
	align-items: start;
	border:1px solid var(--color-light);
	padding: 1rem;
	grid-template-columns: 10rem 1fr;
	grid-template-rows: 10rem;
	overflow: hidden;
	line-height: 1.3em;
}
.media-grid a .image img{
	max-height: 10rem;
}

.media-grid a.youtube{
	border-radius: var(--border-rudius);
	grid-template-columns: 12rem 1fr; 
	position: relative;
}

.media-grid a.youtube .icon{
	position: absolute;
	bottom: 2.6rem;
	left: 1.6rem;
	width: 3rem;
	height: 3rem;
	border-radius: 10rem;
	background: #f5eced;
}
.media-grid a.youtube .icon svg{
	fill: #bebebe
}

@media (min-width: 768px /*tablet*/){
	.media-grid a{
		grid-template-columns: 8rem 1fr;
	}
}
.media-grid h3{
	margin: 0;
}

.media-grid p{
	font-size:1.2rem
}
.media-grid a .image{
	justify-self: center;
}


.media-grid a .image img{
	max-width: 100%;
}

.media-grid > a p:nth-child(2)::after{
	content: '\00bb';
	font-size: 2rem;
	align-self: end;
	justify-self: end;
	color: var(--color-foreground);
	margin: 1rem;
}

@media (min-width: 768px /*tablet*/){
	.media-grid > a::after{
		align-self: end;
		justify-self: end;
	}
}


.categories{
	padding: 3rem;
}


.categories .heading{
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.categories h2{
	grid-column: 1/3;
	line-height: 4rem;
	font-size: 4rem;
	padding: 1rem 2rem;
	line-height: 0.8em;
	border-radius: var(--border-rudius);
	letter-spacing: -0.01em;
}
@media (min-width: 768px /*tablet*/){

	.categories h2{
		grid-column: 1/2;
	}

}


.categories h2 span{
	display: block;
}

.categories h2 span:nth-child(2){
	font-size: 1.4rem;
}

@media (min-width: 1408px /*fullhd*/ ){

	.categories{
		display: grid;
		grid-template-columns: var(--max-column-width);
		justify-content: center;
	}

}

.categories-grid{
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 1rem;
}

@media (min-width: 768px /*tablet*/){
	.categories-grid{
		grid-template-columns: repeat(3,1fr);
	}

}
@media (min-width: 1024px /*desktop*/ ){

	.categories-grid{
		grid-template-columns: repeat(4,1fr);
	}

}
@media (min-width: 1216px /*widescreen*/ ){
	.categories-grid{
		grid-template-columns: repeat(5,1fr);
	}
}
@media (min-width: 1408px /*fullhd*/ ){}

.categories-grid .image{
	line-height: 0;
}

.categories-grid > a{
	display: grid;
	grid-template-columns: 4rem 1fr 2rem;
	align-items: center;
	text-decoration: none;
	border: 1px solid var(--color-light);
	background: var(--color-white);
	gap: 1rem;
	border-radius: var(--border-rudius);
	font-size: 1.1rem;
}

@media (min-width: 768px /*tablet*/){

	.categories-grid > a{
		grid-template-columns: 5rem 1fr 3rem;
		font-size: 1.4rem;
	}

}


.categories-grid > a::after{
	content: '\00bb';
	font-size: 2rem;
	align-self: center;
	justify-self: center;
	color: var(--page-link-color);
}

.categories-grid > a img{
	max-width: 100%;
	max-height: 100%;
}


.brands{
	padding: 3rem;
}


.brands .heading{
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.brands h2{
	grid-column: 1/3;
	line-height: 4rem;
	font-size: 4rem;
	padding: 1rem 2rem;
	line-height: 0.8em;
	border-radius: var(--border-rudius);
	letter-spacing: -0.01em;
}
@media (min-width: 768px /*tablet*/){

	.brands h2{
		grid-column: 1/2;
	}

}


.brands h2 span{
	display: block;
}

.brands h2 span:nth-child(2){
	font-size: 1.4rem;
}


@media (min-width: 1408px /*fullhd*/ ){

	.brands{
		display: grid;
		grid-template-columns: var(--max-column-width);
		justify-content: center;
	}

}

.brands-grid{
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 1rem;
}

@media (min-width: 768px /*tablet*/){
	.brands-grid{
		grid-template-columns: repeat(4,1fr);
	}

}
@media (min-width: 1024px /*desktop*/ ){
	.brands-grid{
		grid-template-columns: repeat(4,1fr);
	}
}
@media (min-width: 1216px /*widescreen*/ ){
	.brands-grid{
		grid-template-columns: repeat(10,1fr);
	}

	.brands-grid > *:nth-of-type(-n+3){
		grid-column: span 2;
		grid-row: span 2;
	}
}
@media (min-width: 1408px /*fullhd*/ ){

}



.brands-grid a{
	padding: 1rem;
}

.brands-grid > a{
	display: grid;
	grid-template-rows: 8rem 1fr;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	border: 1px solid var(--color-light);
	background: var(--color-white);
	gap: 1rem;
	border-radius: var(--border-rudius);
	text-align: center;

}


@media (min-width: 1216px /*widescreen*/ ){
	.brands-grid > a{
		grid-template-rows: 16rem 1fr;
	}
	.brands-grid > a:nth-of-type(n+4){
		grid-template-rows: 4rem 1fr;
	}
}

.brands-grid > a span{
	margin-bottom: 1rem;
}

.brands-grid > a >*:last-child:after{
	content: '\00bb';
	font-size: 2rem;
	align-self: center;
	justify-self: end;
	color: var(--page-link-color);
	margin-right: 1rem;
	margin-left: 1rem;
}

.brands-grid > a img{
	max-width: 100%;
	max-height: 100%;
}

.reuse-buy-buttons{
	display: grid;
	grid-template-columns: 1fr;
	margin: 1rem 
}

@media (min-width: 768px /*tablet*/){


}
@media (min-width: 1024px /*desktop*/ ){
	.reuse-buy-buttons{
		grid-template-columns: 1fr 1fr 1fr;
	}
}
@media (min-width: 1216px /*widescreen*/ ){}
@media (min-width: 1408px /*fullhd*/ ){}

.buy-button{
	display: grid;
	grid-template-columns: 10rem 1fr;
	grid-template-rows: 7rem 5rem;
	border: 1px solid var(--color-light);
	border-radius: var(--border-rudius);
	background: var(--color-foreground);
	color:var(--color-white);
	text-decoration: none;
	align-items: center;
	margin: 0.5rem 0.5rem;
}
.buy-button i {
	line-height: 0;
	grid-column: 1/2;
	grid-row: 1/3;
}
.buy-button i svg{
	fill:var(--color-white);
	margin: 1rem;
}
.buy-button .title{
	font-weight: bold;
	justify-self: center;
	font-size: 3.6rem;
}

.buy-button .caption{
	grid-column: 2/3;
	padding: 1rem;
}

.buy-button.car{
	background: #00459e;
}
.buy-button.home{
	background: #009e00;
}

.buy-button.store{
	border: 6px solid var(--color-primary);
	background: var(--color-white);
	color: var(--color-primary)
}
.buy-button.store .title{
	color: var(--color-primary)
}
.buy-button.store i svg{
	fill:var(--color-primary)
}


.buy-button.home{
	border: 6px solid #009e00;
	background: var(--color-white);
	color: #009e00;
}
.buy-button.home .title{
	color: #009e00
}
.buy-button.home i svg{
	fill: #009e00
}

.buy-button.car{
	border: 6px solid #00459e;
	background: var(--color-white);
	color: #00459e;
}
.buy-button.car .title{
	color: #00459e
}
.buy-button.car i svg{
	fill: #00459e
}