.hero {
  margin-top: 2rem;
  margin-bottom: 2rem
}
@media (min-width: 1024px) {
  .hero {
    margin-top: 4rem;
    margin-bottom: 4rem
  }
}
@media not all and (min-width: 1024px) {
  .hero h1 {
    margin-bottom: 1.5rem
  }
}
.hero h1 {
  font-size: 2.25rem;
  font-weight: 300;
  line-height: 3.375rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity))
}
@media (min-width: 768px) {
  .hero h1 {
    font-size: 3.75rem;
    line-height: 1;
    line-height: 5.625rem
  }
}
:is(.hero h1) b {
  font-weight: 700
}
@media not all and (min-width: 1024px) {
  :is(.hero h1) b {
    display: block
  }
}
.hero p {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 2rem;
  --tw-text-opacity: 1;
  color: rgb(195 221 253 / var(--tw-text-opacity))
}
.hero .hero-grid {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  max-width: 1280px;
  flex-direction: column-reverse;
  padding-left: 1rem;
  padding-right: 1rem
}
@media (min-width: 1024px) {
  .hero .hero-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 2rem
  }
}
@media (min-width: 1280px) {
  .hero .hero-grid {
    gap: 0px
  }
}
:is(.hero .hero-grid) .left {
  margin-right: auto
}
@media (min-width: 1024px) {
  :is(.hero .hero-grid) .left {
    grid-column: span 7 / span 7
  }
}
:is(:is(.hero .hero-grid) .left) .text-wrapper {
  display: flex;
  height: 100%;
  flex-direction: column
}
@media (min-width: 1024px) {
  :is(:is(.hero .hero-grid) .left) .text-wrapper {
    padding-top: 5rem;
    padding-bottom: 5rem
  }
}
:is(:is(.hero .hero-grid) .left) .buttons {
  margin-top: 2rem;
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1rem
}
@media (min-width: 768px) {
  :is(:is(.hero .hero-grid) .left) .buttons {
    margin-top: auto
  }
}
@media (min-width: 1024px) {
  :is(.hero .hero-grid) .right {
    grid-column: span 5 / span 5;
    margin-top: 0px;
    display: flex
  }
}
:is(:is(.hero .hero-grid) .right) figure {
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  max-height: 34.625rem;
  width: 100%;
  max-width: 35.875rem
}
:is(:is(:is(.hero .hero-grid) .right) figure) img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center
}