/*

Usage:
@include breakpoint(laptop) {
  // styles for laptop and wider
}
@include breakpoint(laptop, 800px) {
  // styles for laptop width and screens up to 800px tall
  // useful for targeting shorter laptop screens
}

@include breakpoint(desktop, 900px) {
  // styles for desktop width but shorter screens
}
  */
/*-----------------------
EASING 
---------------------- */
html :where(.editor-styles-wrapper) .acf-innerblocks-container {
  position: relative;
  z-index: 3;
  padding: 2rem;
}
html :where(.editor-styles-wrapper) div.acf-block-body:not(.acf-block-preview) {
  margin-bottom: var(--grid-gap);
}

.content-group {
  position: relative;
}
.content-group .acf-innerblocks-container {
  position: relative;
  z-index: 3;
}
.content-group.has-border.border-top {
  border-top: 1px solid var(--color-black);
}
.content-group.has-border.border-bottom {
  border-bottom: 1px solid var(--color-black);
}
.content-group.has-border.border-both {
  border-top: 1px solid var(--color-black);
  border-bottom: 1px solid var(--color-black);
}
.content-group.has-gradient {
  --gradient-height: 50%;
  position: relative;
}
.content-group.has-gradient:before {
  content: "";
  position: absolute;
  display: block;
  left: 0;
  right: 0;
  height: var(--gradient-height);
  background: linear-gradient(to top, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 1;
  display: none;
}
.content-group.has-gradient:after {
  content: "";
  position: absolute;
  display: block;
  left: 0;
  right: 0;
  height: var(--gradient-height-bottom);
  background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 1;
  display: none;
}
.content-group.has-gradient.gradient-dir-top:before {
  top: 0;
  background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
  display: block;
}
.content-group.has-gradient.gradient-dir-bottom:before {
  bottom: 0;
  background: linear-gradient(to top, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
  display: block;
}
.content-group.has-gradient.gradient-dir-both:after {
  bottom: 0;
  background: linear-gradient(to top, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
  display: block;
}
.content-group.has-gradient.gradient-dir-both:before {
  top: 0;
  background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
  display: block;
}
.content-group.has-top-overlap .top-overlap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  height: var(--top-overlap-height-mobile);
}
@media (min-width: 1024px) {
  .content-group.has-top-overlap .top-overlap {
    height: var(--top-overlap-height-tablet);
  }
}
@media (min-width: 1440px) {
  .content-group.has-top-overlap .top-overlap {
    height: var(--top-overlap-height-desktop);
  }
}
.content-group.has-top-overlap .top-overlap .overlap-inner {
  width: 100%;
  height: 100%;
  background-color: var(--overlap-color);
}
.content-group.has-bottom-overlap .bottom-overlap {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  height: var(--bottom-overlap-height-mobile);
}
@media (min-width: 1024px) {
  .content-group.has-bottom-overlap .bottom-overlap {
    height: var(--bottom-overlap-height-tablet);
  }
}
@media (min-width: 1440px) {
  .content-group.has-bottom-overlap .bottom-overlap {
    height: var(--bottom-overlap-height-desktop);
  }
}
.content-group.has-bottom-overlap .bottom-overlap .overlap-inner {
  width: 100%;
  height: 100%;
  background-color: var(--overlap-color);
}
.content-group .acf-innerblocks-container {
  position: relative;
  z-index: 3;
}