.home-flex { display: flex; flex-wrap: wrap; gap: 1.5rem; padding:1rem; }

.ribbon { font-weight: bold; grid-column: 1 / 5; text-align: center; }
.ribbon img { height: 16px; vertical-align: text-top; }

/*Per disattivare l'effetto sticky, commentare le due righe successive. Gli effetti di transitions e l'opacità rimangono.*/
.stack-cards { --stack-cards-gap: 0; --stack-cards-item-ratio: 2/1; }
.stack-cards home-box { position: -webkit-sticky; position: sticky !important; top: 1.5rem; -webkit-transform-origin: center top; transform-origin: center top; }

home-box:hover { box-shadow: 0 8px 17px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19); }
home-box { flex: 0 1 100%; height: 42vw; max-height: 650px; background-size: cover; background-position: center; background-repeat: no-repeat; display: block; text-align: center; color:white; border-radius: 20px; overflow:hidden; box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.3); transition: box-shadow .25s !important; }
home-box.half { flex-basis: calc(50% - 0.76rem) }
home-box.quarter { flex-basis: calc(25% - 1.126rem); height: 200px; }
home-box > a { display: block; height: 100%; color:white; padding: 30px 15px 0 15px; }
home-box h-title { display: block; font-weight: 400;  font-size: 2.92rem; line-height: 1.2; }
home-box h-subtitle { font-size: 1.64rem; font-weight: 300; margin-top: 15px; display: flex; flex-wrap: wrap; justify-content: center; }
home-box h-subtitle.no-wrap span, home-box h-subtitle .no-wrap { white-space: nowrap; }

home-box.quarter > a { background-color: rgba(0, 0, 0, 0.4); }
home-box.quarter h-title { line-height: 140px;  font-size: 24px; text-transform: uppercase; }

@media only screen and (max-width: 992px) {
    home-box:not(.quarter) { height: 60vw; line-height: 1.6; }
    home-box.quarter { flex-basis: calc(50% - 0.75rem); }
}

@media only screen and (max-width: 600px) {
    home-box:not(.quarter) { max-height: inherit; height: 130vw; line-height: 1.6; }
    home-box.quarter, home-box.half { flex-basis: 100%; }
}

@media only screen and (min-width: 601px) { 
    /*previene la trasformazione della penultima card half quando ce ne sono due affiancate.
      Da rivedere se ci sono più di 2 card half (ad esempio 4)*/
    .stack-cards home-box.half { transform: none !important; opacity: 1 !important; }
}

/* slmk2 */
home-box#slmk2 h-title { padding: 0 10px; }
home-box#slmk2 h-title img { max-height: 40px; }
@media only screen and (max-width: 992px) {
    home-box#slmk2 {
        background-position-x: 18%;
    }
}
@media only screen and (max-width: 600px) {
    home-box#slmk2 { background-position-x: 16%; }
}

/* numa player */
home-box#numaplayer2.half { background-position: 5%;}
home-box#numaplayer2 h-title { padding-bottom: 0; }
home-box#numaplayer2.full h-title img { max-height: 75px; }
home-box#numaplayer2.half h-title img { max-height: 55px; }
@media only screen and (max-width: 600px) {
    home-box#numaplayer2 {  background-position-x: 60%; }
    home-box#numaplayer2 h-title img { max-height: 50px; }
}

/* numa x piano gt */
home-box#numaxpiano_gt h-title { padding: 0 10px; }
home-box#numaxpiano_gt h-title img { max-height: 40px; }
@media only screen and (max-width: 600px) {
    home-box#numaxpiano_gt { background-size: 154%; background-color: #141414; background-position-y: 60%; }
}

/* numa x  piano */
home-box#numaxpiano h-title { padding: 0 10px; }
home-box#numaxpiano h-title img { max-height: 40px; }
home-box#numaxpiano h-subtitle { color: #424242; }
@media only screen and (max-width: 600px) {
    home-box#numaxpiano { background-position-x: 83%; }
}

/* vintage electric */
home-box#vintage-electric-bundle { background-position: top; }

/* mixface */
home-box#mixface h-subtitle span:last-child { white-space: nowrap; }
@media only screen and (max-width: 600px) {
    home-box#mixface { background-position: 77%; }
    home-box#mixface h-title { font-size: 3rem; }
}

/* numacompact2x */
home-box#numacompact2x h-title { font-size: 3.5rem; }
home-box#numacompact2x h-subtitle span:last-child { white-space: nowrap }
@media only screen and (max-width: 992px) { home-box#numacompact2x { background-position: 10%; } }
@media only screen and (max-width: 600px) { home-box#numacompact2x h-title { font-size: 3rem; } }

/* softcase */
home-box#softcase { color: #424242 !important; background-position: left; }
home-box#softcase-wheels { color: #424242 !important; background-position: right bottom; }
home-box#softcase-wheels h-title { font-weight: 500; }

/* sledge-yellow */
home-box#sledge-yellow { background-position-x: left; }

/* synstations-bundle */
home-box#synsations-bundle { background-position-x: right; }

/*mag-acc-b*/
home-box#mag-acc-b { background-position-x: 70%; }
home-box#mag-acc-b h-title { padding: 0 10px; }
home-box#mag-acc-b h-title img { max-height: 25px; vertical-align: middle; }

/*sl keyboard*/
home-box#slkeyboards h-title { padding: 0 10px; }
home-box#slkeyboards h-title img { max-height: 30px; }
@media only screen and (max-width: 600px) {
    home-box#slkeyboards { background-position: 79%; }
}

/*numa compact se*/
home-box#numacompactse h-title { padding: 0 10px; }
home-box#numacompactse h-subtitle { padding: 0 25px; }
home-box#numacompactse h-title img { max-height: 40px; }

/* stage-d */
home-box#npstaged { background-position-x: 36%; }
home-box#npstaged h-title { text-align: left; padding-left: 5vw;}
home-box#npstaged h-subtitle { padding-left: 3vw;
  text-align: left;
  color: #424242;
  justify-content: left;
  max-width: 74%; margin-top: 0; }
home-box#npstaged h-title img { 
    max-height: 77px; 
    height: 100px; /* fix safari */
}

.promo-box{
    background: #fbfbfb;
  border-radius: 10px;
  font-size: 19px;
  width: 220px;
  padding: 10px 10px;
  text-transform: uppercase;
  color: #464646;
  font-weight: bold;
  max-width: 46%;
  line-height: 1.2;
  margin-top: 20px;
  position: absolute;
  bottom: 5vw;
  height: 66px;
}