.grocery-mask {
  height: 394px;
  max-width: calc(472px + 400px);
  overflow: hidden;
  z-index: 1;
  margin: 0 auto;
}
.grocery-mask .grocery-bubble-1 {
  width: 129px;
  top: 15px;
  left: 5px;
}
@media (max-width: 767px) {
  .grocery-mask .grocery-bubble-1 {
    width: 90px;
    top: 0px;
  }
}
.grocery-mask .grocery-bubble-2 {
  width: 129px;
  top: 106px;
  left: 185px;
}
@media (max-width: 767px) {
  .grocery-mask .grocery-bubble-2 {
    width: 90px;
    top: 86px;
    left: 85px;
  }
}
.grocery-mask .grocery-bubble-3 {
  width: 70px;
  top: 20px;
  right: 10px;
}
.grocery-mask .grocery-bubble-4 {
  width: 129px;
  top: 140px;
  right: 45px;
}
@media (max-width: 767px) {
  .grocery-mask .grocery-bubble-4 {
    width: 90px;
    top: 120px;
    right: 0;
  }
}
.grocery-mask .grocery-bubble-5 {
  width: 70px;
  top: 202px;
  left: 25px;
}
.grocery-mask .grocery-bubble-6 {
  width: 129px;
  bottom: 5px;
  left: 160px;
}
.grocery-mask .grocery-bubble-7 {
  width: 70px;
  right: 220px;
  bottom: 120px;
}
@media (max-width: 767px) {
  .grocery-mask .grocery-bubble-7 {
    width: 50px;
    right: 50px;
    bottom: 110px;
  }
}
.grocery-mask .grocery-bubble-8 {
  width: 200px;
  height: 200px;
  bottom: 15px;
  left: 54px;
  z-index: -1;
}
.grocery-mask .grocery-bubble-9 {
  width: 208px;
  top: 33px;
  right: 70px;
  z-index: -1;
}
@media (max-width: 767px) {
  .grocery-mask .grocery-bubble-9 {
    width: 138px;
    top: 43px;
    right: 30px;
  }
}
.grocery-mask .grocery-bubble-10 {
  width: 120px;
  bottom: 30px;
  right: 0px;
  z-index: -1;
}
@media (max-width: 767px) {
  .grocery-mask .grocery-bubble-10 {
    width: 110px;
    bottom: 110px;
  }
}
.grocery-mask .grocery-bubble-11 {
  width: 95px;
  right: 120px;
  bottom: 10px;
}
@media (max-width: 767px) {
  .grocery-mask .grocery-bubble-11 {
    width: 50px;
    right: 0px;
    bottom: 50px;
  }
}
.grocery-mask .grocery-bubble-12 {
  width: 70px;
  top: 10px;
  right: 220px;
}
@media (max-width: 767px) {
  .grocery-mask .grocery-bubble-12 {
    top: 120px;
    right: inherit;
    left: 0;
  }
}

@media (max-width: 1279px) {
  .grocery-items {
    flex-direction: column;
  }
}