@block-bubbles-container-width: 20px + @screen-ms + 20px;

.block-bubbles {
  position: relative;
  //max-width: 1024px;
  //.mxauto;

  &:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 390px;
    height: 1492px;
    background: url("../img/bubblesbg.png") no-repeat left bottom;
  }
}

.block-bubbles-container {
  position: relative;
  z-index: 1;
  max-width: @block-bubbles-container-width;
  padding-top: 60px;
  padding-bottom: 140px;
}

.block-bubbles-heading {
  justify-content: center;
}

.block-bubbles-item {
  padding-top: 80px;

  &.reversed {
    flex-direction: row-reverse;
  }
}

.block-bubbles-image {
  width: 220px;
  height: 220px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.17);
}

.block-bubbles-main {
  max-width: 400px;
}

.block-bubbles-title {
  margin-bottom: 30px;
}

// responsive

@media (max-width: @block-bubbles-container-width) {
  .block-bubbles:before {
    display: none;
  }
  .block-bubbles-item {
    display: block;
    max-width: 400px;
    .mxauto;
  }
  .block-bubbles-image {
    .mxauto;
    margin-bottom: 50px;
  }
}