:root {
  --mainfont: "Source Sans 3";
  --headlinefont: "Arya";

  --xxl-headline-size: clamp(
    30px,
    calc(30px + (64 - 30) * ((100vw - 375px) / (1920 - 375))),
    64px
  );
  --subheadline-font-size: clamp(
    20px,
    calc(20px + (30 - 20) * ((100vw - 375px) / (1920 - 375))),
    30px
  );
  --h1-font-size: clamp(
    22px,
    calc(22px + (46 - 22) * ((100vw - 375px) / (1920 - 375))),
    46px
  );
  --h2-font-size: clamp(
    18px,
    calc(18px + (34 - 18) * ((100vw - 375px) / (1920 - 375))),
    34px
  );
  --h3-font-size: clamp(
    18px,
    calc(18px + (28 - 18) * ((100vw - 375px) / (1920 - 375))),
    28px
  );
  --h4-font-size: clamp(
    16px,
    calc(16px + (22 - 16) * ((100vw - 375px) / (1920 - 375))),
    22px
  );
  --base-font-size: clamp(
    14px,
    calc(14px + (20 - 14) * ((100vw - 375px) / (1920 - 375))),
    20px
  );

  --gap-s: clamp(10px, 2.66vw, 15px);
  --gap-m: clamp(20px, 5.33vw, 30px);
  --gap-l: clamp(30px, 9.33vw, 50px);
  --gap-xl: clamp(50px, 20vw, 100px);
  --cont-gap: clamp(100px, 20vw, 200px);

  --header-height: clamp(80px, 6vw, 120px);
  --border-radius: 10px;

  --footer-main-height: clamp(200px, 2.66vw, 280px);
}

.wp-block-uagb-image figure,
.spectra-image-gallery__media {
  position: relative;
}

.wp-block-uagb-image figure::after,
.spectra-image-gallery__media::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  background: var(--ast-global-color-2);
  opacity: 0.15;
  pointer-events: none;
  border-radius: var(--border-radius);
  overflow: hidden;
}