@import url("base.css");

.epicerie .hero-content{width:42%}
.epicerie .hero h1{font-size:75px}
.epicerie .hero{overflow:hidden}
.epicerie .hero-bg{
  transform:scale(1.28);
  transform-origin:86% 54%;
  object-position:right center;
}
.epicerie .grocery-corners{padding-top:42px}
.epicerie .grocery-corners .about-split{margin-bottom:24px;overflow:hidden}
.epicerie .grocery-corners .about-split:last-child{margin-bottom:0}
.epicerie .grocery-corners .card-body{padding:28px 30px}
.epicerie .grocery-corners h3{font-size:1.8rem;margin-bottom:12px}
.epicerie .grocery-corners ul{columns:2;column-gap:34px}
.epicerie .grocery-corners li{break-inside:avoid;margin-bottom:8px}
.epicerie .epicerie-new{padding-top:34px}
.epicerie .epicerie-new .about-gallery img{height:235px}

@media(max-width:900px){
  .epicerie .hero-content{width:100%}
  .epicerie .hero-bg{
    transform:scale(1.12);
    transform-origin:76% 52%;
  }
  .epicerie .grocery-corners ul{columns:1}
  .epicerie .epicerie-new .about-gallery{grid-template-columns:1fr}
}

@media(max-width:580px){
  .epicerie .hero h1{font-size:3.8rem}
}