.wp-block-cbi-preview-measures {
  --offset: 1.25rem;
  padding: var(--offset);
}
@media only screen and (max-width: 999px) {
  .wp-block-cbi-preview-measures {
    --offset: 1rem;
  }
}
@media only screen and (max-width: 781px) {
  .wp-block-cbi-preview-measures {
    --offset: 1.5rem;
    padding-right: calc(2 * var(--offset));
  }
}
@media only screen and (max-width: 599px) {
  .wp-block-cbi-preview-measures {
    --offset: 1rem;
  }
}

.wp-block-cbi-preview-measures__container {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16/9;
  position: relative;
}

.wp-block-cbi-preview-measures__preview-image-container {
  border-radius: var(--radius);
  position: relative;
}
.wp-block-cbi-preview-measures__preview-image-container::before {
  content: "";
  position: absolute;
  width: 100%;
  height: calc(100% + 2 * var(--offset));
  top: calc(-1 * var(--offset));
  right: calc(-1 * var(--offset));
  background-color: var(--wp--preset--color--accent);
  border-radius: var(--radius-large);
  box-shadow: 0rem 0.75rem 2rem rgba(0, 0, 0, 0.33);
}

.wp-block-cbi-preview-measures__preview-image {
  border-radius: var(--radius);
  isolation: isolate;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
  width: 100%;
  height: 100%;
  box-shadow: 0rem 0.5rem 1.5rem rgba(0, 0, 0, 0.33);
}

.wp-block-cbi-preview-measures__measure-item {
  position: absolute;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  box-shadow: 0rem 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
  -webkit-animation: previewMeasureBounce 2s ease-in-out infinite alternate;
          animation: previewMeasureBounce 2s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .wp-block-cbi-preview-measures__measure-item {
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
  }
}
.wp-block-cbi-preview-measures__measure-item.wp-block-cbi-measures__item {
  padding-right: 2.5rem;
}

.wp-block-cbi-preview-measures__measure-item-01 {
  transform-origin: left center;
  left: calc(-1 * var(--offset));
  bottom: 7.5%;
}
@media only screen and (max-width: 781px) {
  .wp-block-cbi-preview-measures__measure-item-01 {
    bottom: -5%;
  }
}

.wp-block-cbi-preview-measures__measure-item-02 {
  -webkit-animation-duration: 2.25s;
          animation-duration: 2.25s;
  transform-origin: right center;
  right: calc(-2 * var(--offset));
  top: 12.5%;
}
@media only screen and (max-width: 781px) {
  .wp-block-cbi-preview-measures__measure-item-02 {
    top: 5%;
  }
}

@-webkit-keyframes previewMeasureBounce {
  0% {
    transform: scale(0.4) translateY(0);
  }
  100% {
    transform: scale(0.4) translateY(-1rem);
  }
}

@keyframes previewMeasureBounce {
  0% {
    transform: scale(0.4) translateY(0);
  }
  100% {
    transform: scale(0.4) translateY(-1rem);
  }
}
