#bubble-wrap .container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column-reverse;
}


#bubbles {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 20px;
}

.bubble {
  display: block;
  width: 200px;
  height: 200px;
}

.inner {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 1s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.inner:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border-radius: 200px;
  box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.5);
}

.inner img {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  object-fit: cover;
  filter: drop-shadow(0px 20px 20px rgba(0, 0, 0, 0.25));
}

.inner .back {
  transform: rotateY(180deg);
}

.bubble:hover .inner {
  transform: rotateY(180deg);
}

.painted {
  background-color: var(--lightblue);
}



@media (max-width: 1000px) {
  #bubbles {
    grid-template-columns: repeat(2, auto);
  }
}

@media (max-width: 620px) {
  #bubbles {
    transform: scale(.75);
  }
}

@media (max-width: 560px) {
  #bubbles {
    transform: scale(1);
    grid-template-columns: repeat(1, auto);
  }

  section#bubble-wrap {
    padding-top: 0rem;
  }
}