/* Mobile View > till Tablet */
@media screen and (max-width: 45rem){
}

/* Mobile View -> Tablet && Portrait */
@media screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: portrait){
}

/* Mobile View -> Tablet && Landscape */
@media screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: landscape){
}

/* Desktop View */
@media screen and (min-width: 79.5rem){

.distributor_content_wrapper:hover .product:not(:hover){
transition:filter 250ms ease-in;
filter: grayscale(1) blur(0px);
}

.distributor_content_wrapper:hover .product.detail{
filter:none
}

}



/* Mobile View only */
@media screen and (max-width: 45rem){

.distributor_content_wrapper{
float:left;
width:100vw;
height:12rem;
padding:0;
/*outline:#ff0080 1px solid*/;
scroll-snap-type:x mandatory;
gap:.25rem;
}

.distributor_content_wrapper .product{
scroll-snap-align:start;
flex: 0 0 auto;
width:100vw;
margin:.25rem;
padding:0;
/*outline:#ff0080 1px solid;*/
}

.distributor_content_wrapper .product.detail{
margin:0 .5rem .75rem .5rem;
}

}

/* Tablet and above */
@media screen and (min-width: 45rem){

.distributor_content_wrapper{
float:left;
height:12.5rem;
margin:0;
padding:.25rem;
scroll-snap-type:x mandatory;
align-items:start;
}

.distributor_content_wrapper .product{
scroll-snap-align:center;
height:fit-content;
}

}


/* Mobile View > Tablet */
@media screen and (min-width: 45rem) and (max-width: 79.5rem){

.distributor_content_wrapper{
width:100dvw;
/*outline:#ff0000 1px solid;*/
}

.distributor_content_wrapper .product:not(.detail){
flex: 0 0 auto;
width:calc(50% - .5rem);
margin:.25rem .25rem 0 .25rem;
/*outline:#ff0000 1px solid;*/
}

/*.distributor_content_wrapper:has(.product:only-child){*/
.distributor_content_wrapper:has(> :last-child:nth-child(1)) { /* 1 element */
/*outline:#00ff00 1px solid;*/
justify-content:center;
}

.distributor_content_wrapper:has(> :last-child:nth-child(1)) .product{
width:calc(50% - .5rem);
}

}




/* Mobile View > Tablet > Landscape only */
@media screen and (min-width: 55rem) and (max-width: 79.5rem) and (orientation: landscape){

.distributor_content_wrapper{
width:100vw;
/*outline:#00ff00 1px solid;*/
}

.distributor_content_wrapper .product:not(.detail){
flex: 0 0 auto;
/*width:calc(33.3333% - .5rem);*/
width:calc(50% - .5rem);
margin:.25rem .25rem 0 .25rem;
/*outline:#00ff00 1px solid;*/
}

.distributor_content_wrapper:has(> :last-child:nth-child(1)) { /* 1 element */
/*outline:#0000ff 1px solid;*/
justify-content:center;
}

.distributor_content_wrapper:has(> :last-child:nth-child(1)) .product:not(.detail){
width:calc(50% - .5rem);
/*outline:#00ff00 1px solid;*/
}

.distributor_content_wrapper:has(> :last-child:nth-child(2)) { /* 2 elements */
/*outline:#ff0000 1px solid;*/
justify-content:center;
}

.distributor_content_wrapper:has(> :last-child:nth-child(2)) .product:not(.detail){
width:calc(50% - .5rem);
/*outline:#ffcc00 1px solid;*/
}

}


/* Desktop View */
@media screen and (min-width: 79.5rem){

.distributor_content_wrapper{
border-radius:.25rem;
width:100%;
/*outline:#0000ff 1px solid;*/
}

.distributor_content_wrapper .product{
flex: 0 0 auto;
width:100%;
/*outline:#0000ff 1px solid;*/
}


/*.distributor_content_wrapper:has(.product:only-child){ /* 1 element */
.distributor_content_wrapper:has(> :last-child:nth-child(1)) { /* 1 element */
/*outline:#00ff00 1px solid;*/
justify-content:center;
}

.distributor_content_wrapper:has(> :last-child:nth-child(2)) { /* 2 element */
/*outline:#0000ff 1px solid;*/
justify-content:center;
}

.distributor_content_wrapper:has(> :last-child:nth-child(3)) { /* 3 elements */
/*outline:#ff0000 1px solid;*/
justify-content:center;
}

}



.product{
scroll-snap-align:center;
}

/* Global settings */
.distributor_content_wrapper{
display:flex;
flex-wrap:nowrap;
overflow-x:auto;
scrollbar-width:thin;
background:var(--bgr-gray-100);
}

.distributor_content_wrapper .product .card main{
height:8rem;
}

.distributor_content_wrapper .product .card footer{
display:none;
}

.distributor_content_wrapper .product.detail{
width:100%;
}

.distributor_content_wrapper .product.detail .card main{
height:13.25rem;
}

.distributor_content_wrapper .product.detail .card footer{
display:block;
}