.location-images-container {
  position: relative;
}

.location-bubble {
  position: absolute;
  width: 20cqi;
  height: 20cqi;
  max-width: 450px;
  max-height: 450px;
  top: 50%;
  left: 50%;
  border-radius: 999px;
}

.location-bubble img {
  height: 100%;
  width: 100%;
  border-radius: inherit;
  max-height: inherit;
}

.top-location {
  z-index: 1;
  transform: translate(calc(-50% + 5cqi), calc(-50% - 3cqi));
}

.bottom-location {
  transform: translate(calc(-50% - 5cqi), calc(-50% + 3cqi));
}

/* Laptop ≤ 1024px */
@media only screen and (max-width: 1024px) {
  #sessions > *:first-child {
    --span: 6 !important;
  }
  #sessions > *:nth-child(2) {
    --span: 6 !important;
  }
  #locations > *:first-child {
    --span: 6 !important;
  }
  #locations > *:nth-child(2) {
    --span: 6 !important;
  }

  .location-bubble {
    width: 25cqi;
    height: 25cqi;
  }

  .location-images-container {
    height: 30cqi;
  }
}

/* Tablet */
@media only screen and (max-width: 768px) {
  #locations {
    grid-template-columns: 1fr;
  }

  .locations-text-container,
  .location-images-container {
    grid-column: 1 / -1;
  }
}

/* Mobile */
@media only screen and (max-width: 390px) {
  #locations {
    gap: var(--spacing-lg);
  }
  .location-bubble {
    width: 40cqi;
    height: 40cqi;
  }

  .location-images-container {
    height: 60cqi;
  }

  .top-location {
    z-index: 1;
    transform: translate(calc(-50% + 10cqi), calc(-50% - 10cqi));
  }

  .bottom-location {
    transform: translate(calc(-50% - 10cqi), calc(-50% + 10cqi));
  }

  #locations {
    grid-template-columns: 1fr;
  }

  .locations-text-container,
  .location-images-container {
    grid-column: 1 / -1;
  }
}