/* LP-DESIGN-R27: contain and vertically center desktop products; use the
   full mobile product field with equal, non-overlapping platters. */

@media(min-width:1001px){
  .hero-products{top:0;bottom:0;height:auto}
  .hero-products .hero-roll,
  .hero-products .hero-sushi{width:52%!important;height:auto!important;top:50%}
  .hero-products .hero-roll{left:0;transform:translateY(-48%) rotate(-4deg)}
  .hero-products .hero-sushi{right:0;transform:translateY(-52%) rotate(4deg)}
  .hero-roll-name{left:4%;top:27%}
  .hero-sushi-name{right:4%;top:25%;max-width:320px;text-align:center;white-space:normal}
  .hero-combo-name{bottom:6%}
}

@media(max-width:1000px) and (min-width:641px){
  .hero-products{right:1%;width:98%;height:455px}
  .hero-products .hero-roll,
  .hero-products .hero-sushi{width:44%!important;height:auto!important;top:24%}
  .hero-products .hero-roll{left:3%;transform:rotate(-3deg)}
  .hero-products .hero-sushi{right:3%;transform:rotate(3deg)}
  .hero-roll-name{left:4%;top:16%}
  .hero-sushi-name{right:3%;top:16%;max-width:42%;text-align:center;white-space:normal}
  .hero-combo-name{bottom:2%}
}

@media(max-width:640px){
  .hero-products{left:0;right:auto;width:100%;height:430px;bottom:10px}
  .hero-products .hero-roll,
  .hero-products .hero-sushi{width:46%!important;height:auto!important;top:33%}
  .hero-products .hero-roll{left:2%;transform:rotate(-3deg)}
  .hero-products .hero-sushi{right:2%;transform:rotate(3deg)}
  .hero-sushi-name{right:1%;top:22%;max-width:48%;font-size:16px;text-align:center;white-space:normal}
  .hero-roll-name{left:2%;top:22%;font-size:18px}
  .hero-combo-name{bottom:3%}
}

@media(max-width:360px){
  .hero-products{height:405px;bottom:12px}
  .hero-products .hero-roll,
  .hero-products .hero-sushi{width:44%!important;top:34%}
  .hero-products .hero-roll{left:3%}
  .hero-products .hero-sushi{right:3%}
  .hero-sushi-name{right:1%;top:22%;font-size:14px;max-width:48%}
  .hero-roll-name{left:2%;top:22%;font-size:16px}
}