.main .call-for-action {
  position: relative;
  z-index: 1;
}

.main .call-for-action .action {
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.main .call-for-action .action aside {
  padding: 6rem 4rem;
  position: relative;
  text-align: center;
  z-index: 2;
}

.main .call-for-action .action aside .btn {
  margin: 2rem 0 0 0;
}

.main .call-for-action .action aside .sub-title {
  display: block;
  margin: 2rem 0 0 0;
}

.main .call-for-action .action aside .sub-title span {
  display: inline-block;
  font-family: "effra",
 sans-serif;
  font-size: 1.6rem;
  font-style: normal;
  line-height: 2rem;
}

.main .call-for-action .action aside .sub-title span:after {
  -webkit-transform: perspective(1px) translateZ(0);
  background-size: contain;
  background: transparent url("https://dorset-nl.org.uk/wp-content/themes/mbc_child/assets/images/readmore.svg") no-repeat center;
  box-shadow: 0 0 1px rgba(0,
0,
0,
0);
  content: '';
  display: block;
  height: 1.5rem;
  margin: 1rem auto 0 auto;
  transform: perspective(1px) translateZ(0);
  width: 3.2rem;
}

.main .call-for-action .action aside .title {
  display: block;
  font-size: 2.5rem;
  font-style: italic;
  font-weight: 500;
  line-height: 3.1rem;
}

.main .call-for-action .action aside a {
  display: block;
  padding: 1rem 1rem 2rem 1rem;
  text-decoration: none;
}

.main .call-for-action .action aside a:hover {
  color: inherit;
}

.main .call-for-action .action aside:hover .sub-title span:after {
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-name: hvr-wobble-horizontal;
  -webkit-animation-timing-function: ease-in-out;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-name: hvr-wobble-horizontal;
  animation-timing-function: ease-in-out;
}

.main .call-for-action.blue .action aside .sub-title span {
  color: #183029;
}

.main .call-for-action.blue .action aside .sub-title span:after {
  background: transparent url("https://dorset-nl.org.uk/wp-content/themes/mbc_child/assets/images/bluearrow.svg") no-repeat center;
}

.main .call-for-action.blue .action aside .title {
  color: #183029;
}

.main .call-for-action.centre .action .before,
 .main .call-for-action.centre .action:before {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  bottom: 0;
  content: '';
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

.main .call-for-action.centre .action aside {
  text-align: center;
}

.main .call-for-action.green .action aside .sub-title span {
  color: #183029;
}

.main .call-for-action.green .action aside .sub-title span:after {
  background: transparent url("https://dorset-nl.org.uk/wp-content/themes/mbc_child/assets/images/greenarrow.svg") no-repeat center;
}

.main .call-for-action.green .action aside .title {
  color: #183029;
}

.main .call-for-action.parallax .action .before {
  transform: translateY(0px);
}

.main .call-for-action.parallax .action:before {
  display: none ! important;
}

.main .call-for-action.yellow .action aside .sub-title span {
  color: #183029;
}

.main .call-for-action.yellow .action aside .sub-title span:after {
  background: transparent url("https://dorset-nl.org.uk/wp-content/themes/mbc_child/assets/images/greenarrow.svg") no-repeat center;
}

.main .call-for-action.yellow .action aside .title {
  color: #183029;
}

@media (min-width: 1024px) {
  .main .call-for-action .action aside .title {
    font-size: 3.5rem;
    line-height: 4.5rem;
  }

  .main .call-for-action.left .action {
    background-position: center left;
    padding: 0 12.3rem 0 24.6rem;
  }

  .main .call-for-action.left .action aside {
    background-image: url("https://dorset-nl.org.uk/wp-content/themes/mbc_child/assets/images/curve-right.svg");
    background-position: 101% center;
    background-repeat: no-repeat;
    background-size: auto 101%;
    padding: 9rem 12rem 9rem 0;
    text-align: left;
  }

  .main .call-for-action.left .action aside,
 .main .call-for-action.right .action aside {
    padding: 9rem 3rem;
    text-align: left;
  }

  .main .call-for-action.left.illustration .action .before,
 .main .call-for-action.left.illustration .action:before {
    left: 50px;
  }

  .main .call-for-action.left.illustration .action .before,
 .main .call-for-action.left.illustration .action:before,
 .main .call-for-action.right.illustration .action .before,
 .main .call-for-action.right.illustration .action:before {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: '';
    height: 100%;
    position: absolute;
    top: 0;
    width: 24rem;
    z-index: 10;
  }

  .main .call-for-action.left.illustration .action,
 .main .call-for-action.right.illustration .action {
    overflow: hidden;
    position: relative;
  }

  .main .call-for-action.offscreen {
    transition: transform 100ms;
  }

  .main .call-for-action.right .action {
    background-position: center right;
    padding: 0 24.6rem 0 12.3rem;
  }

  .main .call-for-action.right .action aside {
    background-image: url("https://dorset-nl.org.uk/wp-content/themes/mbc_child/assets/images/curve-left.svg");
    background-position: -1% center;
    background-repeat: no-repeat;
    background-size: auto 101%;
    padding: 9rem 0 9rem 12rem;
    text-align: left;
  }

.main .call-for-action.right.illustration .action .before,
 .main .call-for-action.right.illustration .action:before {
    right: 50px;
  }

  .page-name-picnic-in-the-park .main .call-for-action .action aside .title {
    font-size: 6rem;
    line-height: 6.5rem;
  }
}

@media (min-width: 1300px) {
 .main .call-for-action.centre .action {
    max-width: 1280px;
    min-width: 1280px;
    padding: 40px 0;
  }

  .main .call-for-action.left .action aside {
    padding: 12rem 12rem 12rem 0;
  }

  .main .call-for-action.left .action aside,
 .main .call-for-action.right .action aside {
    padding: 12rem 3rem;
  }

  .main .call-for-action.left .action,
 .main .call-for-action.right .action {
    padding: 0 24.6rem;
  }

  .main .call-for-action.right .action aside {
    padding: 12rem 0 12rem 12rem;
  }
}

@media (min-width: 200px) and (max-width:599px) {
  .main .call-for-action.left .action {
    background-position: center left;
    padding: 0rem;
  }
  .main .call-for-action.left.illustration .action .before,
 .main .call-for-action.left.illustration .action:before,
 .main .call-for-action.right.illustration .action .before,
 .main .call-for-action.right.illustration .action:before {
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
    content: '';
    height: 45%;
    position: absolute;
    right: -1%;
    top: -40%;
    width: 100%;
  }

   .main .call-for-action.centre .action {
    position: relative;
    z-index: 1;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 10%;
    margin-right: 10% ;
    padding: 10px 0px 10% 0px;
  }

  .main .call-for-action.centre .action aside {
  padding: 6rem 4rem 30rem 4rem;
    margin-bottom: 0px;
    position: relative;
    text-align: center;
    z-index: 2;
}

  .main .call-for-action.right .action {
    background-position: center right;
    padding: 0rem;
  }
}

@media (min-width: 600px) and (max-width:1024px) {

  .main .call-for-action.left .action {
    background-position: center left;
    padding: 0rem;
  }

  .main .call-for-action.left.illustration .action .before,
 .main .call-for-action.left.illustration .action:before,
 .main .call-for-action.right.illustration .action .before,
 .main .call-for-action.right.illustration .action:before {
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
    content: '';
    height: 55%;
    position: absolute;
    right: 1%;
    top: -20%;
    width: 100%;
  }
  .main .call-for-action.right .action {
    background-position: center right;
    padding: 0rem;
  }
   .main .call-for-action.centre .action {
    max-width: 800px;
    min-width: 800px;
    padding: 40px 0;
  }

}

@media (min-width: 600px) {
  .main .call-for-action.centre .action .before,
 .main .call-for-action.centre .action:before {
    background-size: 100% auto;
    bottom: -10rem;
    top: -10rem;
  }



}

@media (min-width: 800px) {
  .main .call-for-action {
    margin: 4rem 0;
  }

  .main .call-for-action .action aside {
      padding: 10rem 4rem;
        max-width: 75%;
        margin: auto;
  }

  .main .call-for-action .action aside .sub-title {
    margin: 0;
    padding: 1rem 0 0 0;
  }

  .main .call-for-action .action aside .sub-title span {
    font-size: 2rem;
    line-height: 2.5rem;
            max-width: 60%;
  }

  .main .call-for-action .action aside .sub-title span:after {
    display: inline-block;
    height: 2rem;
    margin: 0 0 0 1rem;
    vertical-align: middle;
    width: 3.8rem;
  }

  .main .call-for-action .action aside .title {
    font-size: 3rem;
    line-height: 3.5rem;
  }
}

/* =========================================================
   Call-for-action illustration system (clean slate)
   - ONE place to define images (CSS variables)
   - Structure reads the vars at the right breakpoints
   - Put this file LAST so it wins the cascade
========================================================= */

/* 0) Base defaults (nothing shows unless a class sets a var) */
.main .call-for-action {
  --gfx-centre-200: none;    /* handset / small */
  --gfx-centre-1280: none;   /* tablet / small desktop */
  --gfx-centre-1920: none;   /* optional large desktop */
  --gfx-left: none;          /* ≥1024 left art */
  --gfx-right: none;         /* ≥1024 right art */
}

/* 1) Pseudo setup (make sure the image can render) */
.main .call-for-action .action:before,
.main .call-for-action .action .before {
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* keep your existing positioning/sizing here (width/height/absolute etc.) */
  z-index: 2;
}

/* 2) Structural rules (only read variables; no hard URLs here) */

/* Centre: handset default */
.main .call-for-action.centre .action:before,
.main .call-for-action.centre .action .before {
  background-image: var(--gfx-centre-200);
  margin-top: 10%;
}

/* Centre: tablet/small desktop */
@media (min-width: 600px) and (max-width: 1023px) {
  .main .call-for-action.centre .action:before,
  .main .call-for-action.centre .action .before {
    background-image: var(--gfx-centre-1280);
     margin-top: -40px;
  }
}

/* Centre: large desktop (optional) */
@media (min-width: 1024px) {
  .main .call-for-action.centre .action:before,
  .main .call-for-action.centre .action .before {
    background-image: var(--gfx-centre-1920, var(--gfx-centre-1280));
     margin-top: -40px;
  }
}

/* Left / Right only at desktop and up */
@media (max-width: 1023px) {
  /* zero side art below desktop via variables (no property overrides) */
  .main .call-for-action {
    --gfx-left: none;
    --gfx-right: none;
  }
}
@media (min-width: 1024px) {
  .main .call-for-action.left .action:before,
  .main .call-for-action.left .action .before {
    background-image: var(--gfx-left);
  }
  .main .call-for-action.right .action:before,
  .main .call-for-action.right .action .before {
    background-image: var(--gfx-right);
  }
}

/* =========================================================
   3) MAPPINGS — set variables per class (new + legacy)
   Only URLs here. No media queries. No background-image props.
========================================================= */

/* --- New system examples (you already have these types) --- */
/* signbird (burgundy/pink) */
.main .call-for-action.centre.signbirdb { 
  --gfx-centre-200:  url("/wp-content/themes/mbc_child/assets/images/graphics/01_SignBird_Burgundy_Handset.svg");
  --gfx-centre-1280: url("/wp-content/themes/mbc_child/assets/images/graphics/01_SignBird_Burgundy_1280.svg");
  --gfx-centre-1920: url("/wp-content/themes/mbc_child/assets/images/graphics/01_SignBird_Burgundy_1920.svg");
}
.main .call-for-action.centre.signbirdp { 
  --gfx-centre-200:  url("/wp-content/themes/mbc_child/assets/images/graphics/01_SignBird_Pink_Handset.svg");
  --gfx-centre-1280: url("/wp-content/themes/mbc_child/assets/images/graphics/01_SignBird_Pink_1280.svg");
  --gfx-centre-1920: url("/wp-content/themes/mbc_child/assets/images/graphics/01_SignBird_Pink_1920.svg");
}
/* left/right variants for signbird */
.main .call-for-action.left.signbirdb  { --gfx-left:  url("/wp-content/themes/mbc_child/assets/images/graphics/01_SignLeft_Burgundy.svg"); }
.main .call-for-action.right.signbirdb { --gfx-right: url("/wp-content/themes/mbc_child/assets/images/graphics/01_BirdRight_Burgundy.svg"); }
.main .call-for-action.left.signbirdp  { --gfx-left:  url("/wp-content/themes/mbc_child/assets/images/graphics/01_Birdleft_Pink.svg"); }
.main .call-for-action.right.signbirdp { --gfx-right: url("/wp-content/themes/mbc_child/assets/images/graphics/01_SignRight_Pink.svg"); }

/* fossilwave */
.main .call-for-action.centre.fossilwaveb {
  --gfx-centre-200:  url("/wp-content/themes/mbc_child/assets/images/graphics/04_Fossilwave_Burgundy_Handset.svg");
  --gfx-centre-1280: url("/wp-content/themes/mbc_child/assets/images/graphics/04_Fossilwave_Burgundy_1280.svg");
  --gfx-centre-1920: url("/wp-content/themes/mbc_child/assets/images/graphics/04_Fossilwave_Burgundy_1920.svg");
}
.main .call-for-action.centre.fossilwavep {
  --gfx-centre-200:  url("/wp-content/themes/mbc_child/assets/images/graphics/04_Fossilwave_Pink_Handset.svg");
  --gfx-centre-1280: url("/wp-content/themes/mbc_child/assets/images/graphics/04_Fossilwave_Pink_1280.svg");
  --gfx-centre-1920: url("/wp-content/themes/mbc_child/assets/images/graphics/04_Fossilwave_Pink_1920.svg");
}
.main .call-for-action.left.fossilwaveb  { --gfx-left:  url("/wp-content/themes/mbc_child/assets/images/graphics/04_FossilwaveLeft_Burgundy.svg"); }
.main .call-for-action.right.fossilwaveb { --gfx-right: url("/wp-content/themes/mbc_child/assets/images/graphics/04_FossilwaveRight_Burgundy.svg"); }
.main .call-for-action.left.fossilwavep  { --gfx-left:  url("/wp-content/themes/mbc_child/assets/images/graphics/04_FossilwaveLeft_Pink.svg"); }
.main .call-for-action.right.fossilwavep { --gfx-right: url("/wp-content/themes/mbc_child/assets/images/graphics/04_FossilwaveRight_Pink.svg"); }

/* rivercrop */
.main .call-for-action.centre.rivercropb {
  --gfx-centre-200:  url("/wp-content/themes/mbc_child/assets/images/graphics/02_Rivercrop_Burgundy_Handset.svg");
  --gfx-centre-1280: url("/wp-content/themes/mbc_child/assets/images/graphics/02_Rivercrop_Burgundy_1280.svg");
  --gfx-centre-1920: url("/wp-content/themes/mbc_child/assets/images/graphics/02_Rivercrop_Burgundy_1920.svg");
}
.main .call-for-action.centre.rivercropp {
  --gfx-centre-200:  url("/wp-content/themes/mbc_child/assets/images/graphics/02_Rivercrop_Pink_Handset.svg");
  --gfx-centre-1280: url("/wp-content/themes/mbc_child/assets/images/graphics/02_Rivercrop_Pink_1280.svg");
  --gfx-centre-1920: url("/wp-content/themes/mbc_child/assets/images/graphics/02_Rivercrop_Pink_1920.svg");
}
.main .call-for-action.left.rivercropb  { --gfx-left:  url("/wp-content/themes/mbc_child/assets/images/graphics/02_RivercropLeft_Burgundy.svg"); }
.main .call-for-action.right.rivercropb { --gfx-right: url("/wp-content/themes/mbc_child/assets/images/graphics/02_RivercropRight_Burgundy.svg"); }
.main .call-for-action.left.rivercropp  { --gfx-left:  url("/wp-content/themes/mbc_child/assets/images/graphics/02_RivercropLeft_Pink.svg"); }
.main .call-for-action.right.rivercropp { --gfx-right: url("/wp-content/themes/mbc_child/assets/images/graphics/02_RivercropRight_Pink.svg"); }

/* flowerleaf */
.main .call-for-action.centre.flowerleafb {
  --gfx-centre-200:  url("/wp-content/themes/mbc_child/assets/images/graphics/03_Flowerleaf_Burgundy_Handset.svg");
  --gfx-centre-1280: url("/wp-content/themes/mbc_child/assets/images/graphics/03_Flowerleaf_Burgundy_1280.svg");
  --gfx-centre-1920: url("/wp-content/themes/mbc_child/assets/images/graphics/03_Flowerleaf_Burgundy_1920.svg");
}
.main .call-for-action.centre.flowerleafp {
  --gfx-centre-200:  url("/wp-content/themes/mbc_child/assets/images/graphics/03_Flowerleaf_Pink_Handset.svg");
  --gfx-centre-1280: url("/wp-content/themes/mbc_child/assets/images/graphics/03_Flowerleaf_Pink_1280.svg");
  --gfx-centre-1920: url("/wp-content/themes/mbc_child/assets/images/graphics/03_Flowerleaf_Pink_1920.svg");
}
.main .call-for-action.left.flowerleafb  { --gfx-left:  url("/wp-content/themes/mbc_child/assets/images/graphics/03_FlowerleafLeft_Burgundy.svg"); }
.main .call-for-action.right.flowerleafb { --gfx-right: url("/wp-content/themes/mbc_child/assets/images/graphics/03_FlowerleafRight_Burgundy.svg"); }
.main .call-for-action.left.flowerleafp  { --gfx-left:  url("/wp-content/themes/mbc_child/assets/images/graphics/03_FlowerleafLeft_Pink.svg"); }
.main .call-for-action.right.flowerleafp { --gfx-right: url("/wp-content/themes/mbc_child/assets/images/graphics/03_FlowerleafRight_Pink.svg"); }

/* ---------- Legacy -> 3-size graphics (centre variants) ---------- */

/* Flowerleaf PINK */
.main .call-for-action.centre.birds,
.main .call-for-action.centre.boots {
  --gfx-centre-200:  url("/wp-content/themes/mbc_child/assets/images/graphics/03_Flowerleaf_Pink_Handset.svg");
  --gfx-centre-1280: url("/wp-content/themes/mbc_child/assets/images/graphics/03_Flowerleaf_Pink_1280.svg");
  --gfx-centre-1920: url("/wp-content/themes/mbc_child/assets/images/graphics/03_Flowerleaf_Pink_1920.svg");
}

/* Flowerleaf BURGUNDY */
.main .call-for-action.centre.cave,
.main .call-for-action.centre.dr {
  --gfx-centre-200:  url("/wp-content/themes/mbc_child/assets/images/graphics/03_Flowerleaf_Burgundy_Handset.svg");
  --gfx-centre-1280: url("/wp-content/themes/mbc_child/assets/images/graphics/03_Flowerleaf_Burgundy_1280.svg");
  --gfx-centre-1920: url("/wp-content/themes/mbc_child/assets/images/graphics/03_Flowerleaf_Burgundy_1920.svg");
}

/* Rivercrop PINK */
.main .call-for-action.centre.lolly,
.main .call-for-action.centre.lovebirds {
  --gfx-centre-200:  url("/wp-content/themes/mbc_child/assets/images/graphics/02_Rivercrop_Pink_Handset.svg");
  --gfx-centre-1280: url("/wp-content/themes/mbc_child/assets/images/graphics/02_Rivercrop_Pink_1280.svg");
  --gfx-centre-1920: url("/wp-content/themes/mbc_child/assets/images/graphics/02_Rivercrop_Pink_1920.svg");
}

/* Rivercrop BURGUNDY */
.main .call-for-action.centre.newnature,
.main .call-for-action.centre.picnic-1 {
  --gfx-centre-200:  url("/wp-content/themes/mbc_child/assets/images/graphics/02_Rivercrop_Burgundy_Handset.svg");
  --gfx-centre-1280: url("/wp-content/themes/mbc_child/assets/images/graphics/02_Rivercrop_Burgundy_1280.svg");
  --gfx-centre-1920: url("/wp-content/themes/mbc_child/assets/images/graphics/02_Rivercrop_Burgundy_1920.svg");
}

/* Fossilwave PINK */
.main .call-for-action.centre.picnic-2,
.main .call-for-action.centre.picnic-3 {
  --gfx-centre-200:  url("/wp-content/themes/mbc_child/assets/images/graphics/04_Fossilwave_Pink_Handset.svg");
  --gfx-centre-1280: url("/wp-content/themes/mbc_child/assets/images/graphics/04_Fossilwave_Pink_1280.svg");
  --gfx-centre-1920: url("/wp-content/themes/mbc_child/assets/images/graphics/04_Fossilwave_Pink_1920.svg");
}

/* Fossilwave BURGUNDY */
.main .call-for-action.centre.sustainable,
.main .call-for-action.centre.wave {
  --gfx-centre-200:  url("/wp-content/themes/mbc_child/assets/images/graphics/04_Fossilwave_Burgundy_Handset.svg");
  --gfx-centre-1280: url("/wp-content/themes/mbc_child/assets/images/graphics/04_Fossilwave_Burgundy_1280.svg");
  --gfx-centre-1920: url("/wp-content/themes/mbc_child/assets/images/graphics/04_Fossilwave_Burgundy_1920.svg");
}

/* SignBird BURGUNDY */
.main .call-for-action.centre.hammer,
.main .call-for-action.centre.thumbs-up,
.main .call-for-action.centre.volunteer,
.main .call-for-action.centre.face,
.main .call-for-action.centre.wytchfarm,
.main .call-for-action.centre.xmasboots {
  --gfx-centre-200:  url("/wp-content/themes/mbc_child/assets/images/graphics/01_SignBird_Burgundy_Handset.svg");
  --gfx-centre-1280: url("/wp-content/themes/mbc_child/assets/images/graphics/01_SignBird_Burgundy_1280.svg");
  --gfx-centre-1920: url("/wp-content/themes/mbc_child/assets/images/graphics/01_SignBird_Burgundy_1920.svg");
}

/* SignBird PINK (xmas/xams alias) */
.main .call-for-action.centre.fork,
.main .call-for-action.centre.xmas,
.main .call-for-action.centre.xams {
  --gfx-centre-200:  url("/wp-content/themes/mbc_child/assets/images/graphics/01_SignBird_Pink_Handset.svg");
  --gfx-centre-1280: url("/wp-content/themes/mbc_child/assets/images/graphics/01_SignBird_Pink_1280.svg");
  --gfx-centre-1920: url("/wp-content/themes/mbc_child/assets/images/graphics/01_SignBird_Pink_1920.svg");
}

/* ---------- Left/Right legacy (kept single-size like your current pattern) ---------- */
@media (min-width: 1024px) {
  .main .call-for-action.left.binoculars  { --gfx-left:  url("/wp-content/themes/mbc_child/assets/images/graphics/03_FlowerleafLeft_Pink.svg"); }
  .main .call-for-action.right.binoculars { --gfx-right: url("/wp-content/themes/mbc_child/assets/images/graphics/03_FlowerleafRight_Pink.svg"); }

    .main .call-for-action.left.fork  { --gfx-left:  url("/wp-content/themes/mbc_child/assets/images/graphics/03_FlowerleafLeft_Pink.svg"); }
  .main .call-for-action.right.fork { --gfx-right: url("/wp-content/themes/mbc_child/assets/images/graphics/03_FlowerleafRight_Pink.svg"); }

  .main .call-for-action.left.hammer      { --gfx-left:  url("/wp-content/themes/mbc_child/assets/images/graphics/02_RivercropRight_Burgundy.svg"); }
  .main .call-for-action.right.hammer     { --gfx-right: url("/wp-content/themes/mbc_child/assets/images/graphics/02_RivercropLeft_Burgundy.svg"); }

  .main .call-for-action.left.birds       { --gfx-left:  url("/wp-content/themes/mbc_child/assets/images/graphics/02_RivercropRight_Burgundy.svg"); }
  .main .call-for-action.right.birds      { --gfx-right: url("/wp-content/themes/mbc_child/assets/images/graphics/02_RivercropLeft_Burgundy.svg"); }

    .main .call-for-action.left.face       { --gfx-left:  url("/wp-content/themes/mbc_child/assets/images/graphics/02_RivercropRight_Burgundy.svg"); }
  .main .call-for-action.right.face      { --gfx-right: url("/wp-content/themes/mbc_child/assets/images/graphics/02_RivercropLeft_Burgundy.svg"); }

    .main .call-for-action.left.volunteer       { --gfx-left:  url("/wp-content/themes/mbc_child/assets/images/graphics/02_RivercropRight_Burgundy.svg"); }
  .main .call-for-action.right.volunteer      { --gfx-right: url("/wp-content/themes/mbc_child/assets/images/graphics/02_RivercropLeft_Burgundy.svg"); }

   .main .call-for-action.left.thumbs-up       { --gfx-left:  url("/wp-content/themes/mbc_child/assets/images/graphics/02_RivercropRight_Burgundy.svg"); }
  .main .call-for-action.right.thumbs-up       { --gfx-right: url("/wp-content/themes/mbc_child/assets/images/graphics/02_RivercropLeft_Burgundy.svg"); }

  .main .call-for-action.left.boots       { --gfx-left:  url("/wp-content/themes/mbc_child/assets/images/graphics/04_FossilwaveRight_Pink.svg"); }
  .main .call-for-action.right.boots      { --gfx-right: url("/wp-content/themes/mbc_child/assets/images/graphics/04_FossilwaveLeft_Pink.svg"); }

  .main .call-for-action.left.cave        { --gfx-left:  url("/wp-content/themes/mbc_child/assets/images/graphics/04_FossilwaveLeft_Burgundy.svg"); }
  .main .call-for-action.right.cave       { --gfx-right: url("/wp-content/themes/mbc_child/assets/images/graphics/04_FossilwaveRight_Burgundy.svg"); }

  .main .call-for-action.left.dr          { --gfx-left:  url("/wp-content/themes/mbc_child/assets/images/graphics/01_SignLeft_Pink.svg"); }
  .main .call-for-action.right.dr         { --gfx-right: url("/wp-content/themes/mbc_child/assets/images/graphics/01_SignRight_Pink.svg"); }

  .main .call-for-action.left.lovebirds,
  .main .call-for-action.right.lovebirds  { --gfx-left: url("/wp-content/themes/mbc_child/assets/images/graphics/01_SignLeft_Pink.svg"); --gfx-right: url("/wp-content/themes/mbc_child/assets/images/graphics/01_SignRight_Pink.svg"); }

  .main .call-for-action.left.xmas,
  .main .call-for-action.right.xmas       { --gfx-left: url("/wp-content/themes/mbc_child/assets/images/graphics/01_SignLeft_Pink.svg"); --gfx-right: url("/wp-content/themes/mbc_child/assets/images/graphics/01_SignRight_Pink.svg"); }

  .main .call-for-action.left.xmasboots,
  .main .call-for-action.right.xmasboots  { --gfx-left: url("/wp-content/themes/mbc_child/assets/images/graphics/01_SignLeft_Burgundy.svg"); --gfx-right: url("/wp-content/themes/mbc_child/assets/images/graphics/01_SignRight_Burgundy.svg"); }
}

/* ---------- Small fixes from earlier snippet ---------- */
/* remove accidental //, add missing .svg, fix 11280 -> 1280 */
.main .call-for-action.centre.birds     { --gfx-centre-1280: url("/wp-content/themes/mbc_child/assets/images/graphics/03_Flowerleaf_Pink_1280.svg"); }
.main .call-for-action.centre.dr        { --gfx-centre-1280: url("/wp-content/themes/mbc_child/assets/images/graphics/03_Flowerleaf_Burgundy_1280.svg"); }
.main .call-for-action.centre.wytchfarm { --gfx-centre-1280: url("/wp-content/themes/mbc_child/assets/images/graphics/01_SignBird_Burgundy_1280.svg"); }


/* legacy “blank out at ≥1300px” behavior 
@media (min-width: 1300px) {
  .main .call-for-action.left.cave,
  .main .call-for-action.right.cave,
  .main .call-for-action.left.face,
  .main .call-for-action.right.face,
  .main .call-for-action.left.fork,
  .main .call-for-action.right.fork,
  .main .call-for-action.left.hammer,
  .main .call-for-action.right.hammer,
  .main .call-for-action.left.lolly,
  .main .call-for-action.right.lolly,
  .main .call-for-action.left.thumbs-up,
  .main .call-for-action.right.thumbs-up,
  .main .call-for-action.left.volunteer,
  .main .call-for-action.right.volunteer {
    --gfx-left: none;
    --gfx-right: none;
  }
}
*/


/* smoother */
.illustration.offscreen {
  will-change: transform;
  transition: transform 220ms ease-out; /* faster response */
}
.illustration .action .before {
  will-change: transform;
  transition: transform 220ms ease-out;
}