/*!***************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./pivot-blocks/image-accent/style.scss ***!
  \***************************************************************************************************************************************************************************************/
.image-accent-block figure {
  position: relative;
  max-width: 400px;
}
.image-accent-block img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 40px;
  position: relative;
  z-index: 1;
}
.image-accent-block .image-accent {
  position: absolute;
  background-size: contain;
  display: block;
}
@media (max-width: 1024px) {
  .image-accent-block .image-accent {
    transform: scale(0.8);
  }
}
.image-accent-block.variation-one {
  --large-circle-size: 300px;
  --small-circle-size: 100px;
  --offset: 150px;
}
.image-accent-block.variation-one .circle-accent {
  position: absolute;
  border-radius: 100%;
}
@media (max-width: 1024px) {
  .image-accent-block.variation-one .circle-accent {
    transform: scale(0.5);
    left: 10% !important;
  }
  .image-accent-block.variation-one .circle-accent:where(.circle-accent-2, .circle-accent-3) {
    display: none !important;
  }
}
.image-accent-block.variation-one :where(.green) {
  top: calc(100% - 150px);
  left: -80px;
  width: var(--large-circle-size);
  height: var(--large-circle-size);
  background-color: var(--wp--preset--color--lime-green);
  z-index: 0;
}
.image-accent-block.variation-one :where(.blue) {
  width: var(--small-circle-size);
  height: var(--small-circle-size);
  background-color: var(--wp--preset--color--mid-blue);
  z-index: 2;
  top: calc(100% - var(--small-circle-size) / 2);
}
.image-accent-block.variation-one .circle-accent-2 {
  left: 180px;
}
.image-accent-block.variation-one .circle-accent-3 {
  left: 300px;
}
.image-accent-block.variation-one .circle-accent-4 {
  left: 420px;
}
.image-accent-block.variation-two img {
  z-index: 3;
}
.image-accent-block.variation-two .accent-square {
  width: 205px;
  height: 205px;
  background-color: var(--wp--preset--color--mid-blue);
  bottom: -60px;
  right: -60px;
  z-index: 1;
}
@media (max-width: 1024px) {
  .image-accent-block.variation-two .accent-square {
    right: -40px !important;
  }
}
.image-accent-block.variation-two .accent-donut {
  background: url("accent-donut.svg") center/contain no-repeat;
  width: 209px;
  height: 104px;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.image-accent-block.variation-two .accent-exclamation {
  background: url("accent-exclamation.svg") center/contain no-repeat;
  width: 207px;
  height: 207px;
  top: -50px;
  right: -50px;
  z-index: 3;
}
@media (max-width: 1024px) {
  .image-accent-block.variation-two .accent-exclamation {
    right: 0 !important;
  }
}
.image-accent-block.variation-two.two-alt .accent-donut {
  background: url("accent-donut-green.svg") center/contain no-repeat;
}
.image-accent-block.variation-two.two-alt .accent-exclamation {
  background: var(--wp--preset--color--mid-purple);
  width: 102px;
  height: 102px;
  top: -50px;
  right: -50px;
  border-radius: 100%;
  z-index: 3;
}
.image-accent-block.variation-four img, .image-accent-block.variation-four-alt img {
  border-radius: 100%;
}
.image-accent-block.variation-four .accent-bracket, .image-accent-block.variation-four-alt .accent-bracket {
  background: url("accent-bracket-yellow.svg") center/contain no-repeat;
  width: 80px;
  height: 80px;
  left: 5px;
  bottom: 20px;
  z-index: 0;
}
@media (max-width: 1024px) {
  .image-accent-block.variation-four .accent-bracket, .image-accent-block.variation-four-alt .accent-bracket {
    left: 0 !important;
    bottom: 0 !important;
  }
}
.image-accent-block.variation-four .accent-circle, .image-accent-block.variation-four-alt .accent-circle {
  background: var(--wp--preset--color--green);
  width: 172px;
  height: 172px;
  top: -50px;
  right: 10px;
  z-index: 0;
  border-radius: 100%;
}
.image-accent-block.variation-four .accent-square, .image-accent-block.variation-four-alt .accent-square {
  background: var(--wp--preset--color--mid-blue);
  width: 72px;
  height: 72px;
  top: 50px;
  right: 0px;
  transform: rotate(-45deg);
  z-index: 0;
}
.image-accent-block.variation-four.four-alt .accent-circle {
  background: var(--wp--preset--color--mid-blue);
  width: 85px;
  height: 85px;
  top: -35px;
  right: 120px;
}
.image-accent-block.variation-four.four-alt .accent-square {
  background: url("accent-donut-purple.svg") center/contain no-repeat;
  width: 198px;
  height: 198px;
  top: -20px;
  right: -50px;
  z-index: 0;
}
@media (max-width: 1024px) {
  .image-accent-block.variation-four.four-alt .accent-square {
    right: -20px !important;
    top: -50px !important;
  }
}
.image-accent-block.variation-four.four-alt .accent-bracket {
  background: url("accent-bracket-green.svg") center/contain no-repeat;
}
.image-accent-block.variation-six img {
  border-radius: 100%;
}
.image-accent-block.variation-six .circle-accent {
  position: absolute;
  border-radius: 100%;
  width: 225px;
  height: 225px;
  z-index: 0;
}
.image-accent-block.variation-six :where(.purple) {
  top: -30px;
  left: -30px;
  background-color: var(--wp--preset--color--dark-purple);
}
.image-accent-block.variation-six :where(.yellow) {
  bottom: -30px;
  right: -30px;
  background-color: var(--wp--preset--color--chartreuse);
}
.image-accent-block.variation-seven img {
  border-radius: 100%;
}
.image-accent-block.variation-seven .accent-bracket {
  background: url("accent-bracket-yellow-large.svg") center/contain no-repeat;
  width: 136px;
  height: 137px;
  left: -90px;
  bottom: 40%;
  z-index: 0;
}
@media (max-width: 1024px) {
  .image-accent-block.variation-seven .accent-bracket {
    left: 0 !important;
    bottom: 0 !important;
  }
}
.image-accent-block.variation-seven .accent-square {
  background: var(--wp--preset--color--mid-blue);
  width: 90px;
  height: 90px;
  top: 30px;
  right: -30px;
  transform: rotate(-45deg);
  z-index: 0;
}
.image-accent-block.variation-seven .accent-circle {
  background: url("accent-circle-gradient.svg") center/contain no-repeat;
  width: 189px;
  height: 190px;
  bottom: -40px;
  right: -50px;
  z-index: 1;
}