body {
  margin: 0;
  padding: 0;
  background: var(--clr-bg);
  color: var(--clr-text);
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  line-height: var(--line-heigth-base);
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: var(--clr-orange);
}

h1 {
  width: 6em;
  margin: 0;
  font-family: var(--font-family-highlight);
  @media screen and (min-width: 1400px) {
    width: 12em;
  }
}

iframe{
  display: block;
}

.desktop-hidden{
  display: none;
  @media screen and (min-width: 1200px) {
    display: contents;
  }
}

.mobile-hidden{
  display: contents;
  @media screen and (min-width: 1200px) {
    display: none;
  }
}

h2 {
  font-size: 1.8em;
  margin-bottom: 0.5em;
  margin-top: 0;
  line-height: 115%;
  font-weight: 600;
  @media screen and (min-width: 1200px) {
    font-size: 2.6em;
  }
}

h2, h3{
  font-family: var(--font-family-highlight);
  font-weight: 600;
  margin-top: 2em;
}

h3{
  font-size: 1.4em;
}

.dialog-off-canvas-main-canvas {
  background:
      url(../images/circle-lavender.svg) -35vw 57vh no-repeat,
      url(../images/circle-yellow.svg) 90vw 30vh no-repeat,
      url(../images/circle-red.svg) 70vw 70% no-repeat,
      /* url(../images/circle-dark-yellow.svg) 80% 95% no-repeat, */
      linear-gradient(var(--clr-bg) 26%, #ffffff 43%, #ffffff 79%, var(--clr-bg) 100%);
    background-size:
      60vw,
      15vw,
      55vw,
      /* 40vw, */
      auto;
  @media screen and (min-width: 1200px) {
    background:
      url(../images/circle-lavender.svg) -14vw 60vh no-repeat,
      url(../images/circle-yellow.svg) 96vw 60vh no-repeat,
      url(../images/circle-red.svg) 90vw 60% no-repeat,
      /* url(../images/circle-dark-yellow.svg) 80% 105% no-repeat, */
      linear-gradient(var(--clr-bg) 26%, #ffffff 43%, #ffffff 79%, var(--clr-bg) 100%);
    background-size:
      24vw,
      5vw,
      45vw,
      /* 30em, */
      auto;
  }
}

.layout-container {
  position: relative;
}

.wrapper {
  margin-inline: var(--mobile-spacing);
  margin-bottom: 5em;
  @media screen and (min-width: 1200px){
    margin-inline: var(--spacing);
  }
}