@import "./modules/modules.css";
@import "./components/components.css";
@import "./sections/sections.css";

body {
  --padding-inline: clamp(2.75rem, -5.54rem + 17.262vw, 10rem);
  --max-width: 70rem;

  --bg-pattern-image: url("../images/bg-pattern-1.svg");
  --bg-pattern-size: clamp(16.67rem, 13.43rem + 6.75vw, 19.5rem) auto;
  --bg-pattern-position: top -2.5rem right clamp(-3.125rem, 7.44vw - 6.7rem, 0rem);

  background-color: var(--color-white);
  background-repeat: no-repeat;
  /* */
}

main {
  isolation: isolate;
}

body {
  overflow-x: clip;
}

.pattern-decoration {
  display: none;

  @media screen and (min-width: 48em) {
    display: block;
    position: absolute;
    z-index: 1;
    top: -2.5rem;
    right: clamp(-3.125rem, 7.44vw - 6.7rem, 0rem);
    width: clamp(16.67rem, 13.43rem + 6.75vw, 19.5rem);
  }

  @media screen and (min-width: 90em) {
    right: calc(100% - 90rem - (100% - 90rem) / 2);
  }
}