/*==================================================
  removes bootstrap bullshit
==================================================*/
#hero {
  margin-top: -25px;
}
@media(max-width:767px) {
  #hero {
    margin-inline: -20px;
  }
}

/*==================================================
  hero
==================================================*/
#hero {
  position: relative;
  padding-inline: 2rem;
}

.hero__blob__wrapper {
  overflow: hidden;
  position: absolute;
  top: -15rem;
  left: 0;
  right: 0;
  filter: blur(64px);
  z-index: -10;
}

.hero__blob {
  --dir: right;
    --start: hsl(var(--invertedHue) 67% 45%);
    --end: hsl(var(--primary-500));
  position: relative;
  background-image: linear-gradient(to var(--dir), var(--start), var(--end));
    background-image: linear-gradient(in hsl to var(--dir), var(--start), var(--end));
  width: 110rem;
  aspect-ratio: 1920 / 960;
  left: 50%;
  opacity: .3;
  clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%);
  transform: translate3d(-50%, 0, 0) rotate(30deg);
}

.hero__content__wrapper {
  display: flex;
  gap: 4rem;
  max-width: 80rem;
  padding-top: 8rem;
  padding-bottom: 4rem;
  margin-inline: auto;
}

.hero__text__wrapper {
  flex-grow: 1;
  display: grid;
  place-items: center;
  text-align: center;
}

.hero__text__wrapper>:not([hidden])~:not([hidden]) {
  margin-block: 1rem;
}

.hero__title {
  color: hsl(var(--hue) 12% 12%);
  font-size: clamp(2.75rem, 12vw, 6.5rem);
  line-height: 1;
  font-weight: 600;
}

.hero__text {
  color: hsl(var(--hue) 9% 25%);
  max-width: 65ch;
  font-size: clamp(1rem, 2.33vw, 1.25rem);
  line-height: clamp(1.5rem, 3.5vw, 1.75rem);
}

.hero__button__wrapper>:not([hidden])~:not([hidden]) {
  margin-inline: 0.75rem;
}
.hero__button__wrapper>:not([hidden])~:not([hidden]):last-child {
  margin-inline-start: 0.75rem;
  margin-inline-end: 0;
}

.hero__img__wrapper {
  overflow: hidden;
  display: none;
  width: 50%;
  aspect-ratio: 161 / 152;
}

.hero__img {
  width: 100%;
  height: 100%;
}

.hero__img--contain {
  object-fit: contain;
}

.hero__img--cover {
  object-fit: cover;
}

.hero__img--mask {
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYxIiBoZWlnaHQ9IjE1MiIgdmlld0JveD0iMCAwIDE2MSAxNTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMjUgMTEuNkMxMzguNyAxNC4yIDE1My45IDE5LjMgMTU4LjggMjkuOUMxNjMuNyA0MC40IDE1OC4zIDU2LjIgMTU4LjEgNzEuOUMxNTcuOSA4Ny42IDE2Mi45IDEwMy4yIDE1OS43IDExNi42QzE1Ni41IDEzMC4xIDE0NSAxNDEuMyAxMzEuNSAxNDYuNkMxMTggMTUyIDEwMi41IDE1MS4zIDg2LjkgMTUxLjVDNzEuMyAxNTEuNyA1NS41IDE1Mi44IDQxLjIgMTQ3LjlDMjYuOCAxNDMuMSAxMy45IDEzMi40IDYuOSAxMTguOEMtMC4wOTk5OTk5IDEwNS4xIC0xLjIgODguNiAyLjYgNzQuMkM2LjUgNTkuOSAxNS4yIDQ3LjcgMjIuMyAzNC4zQzI5LjUgMjAuOSAzNSA2LjIwMDAyIDQ1LjUgMS44MDAwMkM1NiAtMi41OTk5OCA3MS41IDMuMjAwMDIgODUuMyA2LjEwMDAyQzk5LjEgOS4wMDAwMiAxMTEuMyA5LjAwMDAyIDEyNSAxMS42WiIgZmlsbD0iI0ZGMDA2NiIvPgo8L3N2Zz4K");
}

/*==================================================
  responsiveness
==================================================*/
@media(min-width:75rem) {
  .hero__text__wrapper:not(.hero--center) {
    display: block;
    text-align: left;
    margin-block: auto;
	place-items: unset;
  }

  .hero__img__wrapper {
    display: block;
  }
}
@media(max-width:979px) {
  .hero__content__wrapper {
    padding-top: 2rem;
    padding-bottom: 1rem;
  }
}