/* colors */
/* fonts */
/* spacing */
/* breakpoints */
.text-preset-1, .hero__title {
  font-family: "Red Hat Display", sans-serif;
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1.1;
}
@media (min-width: 48rem) {
  .text-preset-1, .hero__title {
    font-family: "Red Hat Display", sans-serif;
    font-size: 3rem;
    font-weight: 900;
    line-height: 1.1;
  }
}
@media (min-width: 64rem) {
  .text-preset-1, .hero__title {
    font-family: "Red Hat Display", sans-serif;
    font-size: 4rem;
    font-weight: 900;
    line-height: 1.1;
  }
}
.text-preset-2, .footer__title, .main__content-title {
  font-family: "Red Hat Display", sans-serif;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.1;
}
@media (min-width: 48rem) {
  .text-preset-2, .footer__title, .main__content-title {
    font-family: "Red Hat Display", sans-serif;
    font-size: 2.25rem;
    font-weight: 900;
    line-height: 1.1;
  }
}
@media (min-width: 64rem) {
  .text-preset-2, .footer__title, .main__content-title {
    font-family: "Red Hat Display", sans-serif;
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1.1;
  }
}
.text-preset-3, .main__content-eyebrow {
  font-family: "Red Hat Display", sans-serif;
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.3333em;
}
@media (min-width: 48rem) {
  .text-preset-3, .main__content-eyebrow {
    font-family: "Red Hat Display", sans-serif;
    font-size: 0.875rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0.2857em;
  }
}
@media (min-width: 64rem) {
  .text-preset-3, .main__content-eyebrow {
    font-family: "Red Hat Display", sans-serif;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0.25em;
  }
}
.text-preset-4, .footer__description, .main__content-description, .hero__description {
  font-family: "Red Hat Display", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}
@media (min-width: 64rem) {
  .text-preset-4, .footer__description, .main__content-description, .hero__description {
    font-family: "Red Hat Display", sans-serif;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.5;
  }
}
.text-preset-5, .section-number__marker, .button {
  font-family: "Red Hat Display", sans-serif;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.5;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img,
picture {
  display: block;
  max-width: 100%;
}

button {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  font: inherit;
}

a {
  text-decoration: none;
}

body {
  background: #fafafa;
}

.logo {
  display: block;
  width: fit-content;
  margin-inline: auto;
}

.logo img {
  margin-top: 3rem;
}
@media (min-width: 64rem) {
  .logo img {
    margin-top: 5rem;
  }
}

.button {
  padding: 1rem 2.5rem;
  gap: 0.5rem;
  color: #fafafa;
  background: #d1d1df;
  border-radius: 29px;
  transition: background-color 0.5s ease;
  text-align: center;
  width: fit-content;
}
.button--primary {
  background: #4d96a9;
}
.button--primary:hover {
  background: #71c0d4;
}
.button--primary .version {
  color: #8fe3f9;
}
.button--secondary {
  background: #855fb1;
}
.button--secondary:hover {
  background: #b18bdd;
}
.button--secondary .version {
  color: #d9b8ff;
}

.section-number {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section-number__line {
  width: 0.0625rem;
  height: 5rem;
  background: #d1d1df;
}
.section-number__marker {
  color: #87879d;
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  border: 1px solid #d1d1df;
  border-radius: 50%;
}
.section-number--overlap {
  transform: translateY(1.75rem);
}

.hero {
  overflow-x: clip;
}
.hero__container {
  position: relative;
  text-align: center;
  margin-bottom: 4rem;
  margin-inline: auto;
  max-width: 90rem;
}
@media (min-width: 48rem) {
  .hero__container {
    margin-bottom: 7.5rem;
  }
}
@media (min-width: 64rem) {
  .hero__container {
    margin-block: 5.4375rem 8.9375rem;
  }
}
.hero__image {
  height: clamp(10rem, 1.472rem + 36.387vw, 18.9375rem);
  margin-block: 4rem 3rem;
  margin-inline: auto;
  object-fit: cover;
}
@media (min-width: 48rem) {
  .hero__image {
    margin-bottom: 4.5rem;
  }
}
@media (min-width: 64rem) {
  .hero__image {
    display: none;
  }
}
.hero__image--desktop-left, .hero__image--desktop-right {
  display: none;
}
@media (min-width: 64rem) {
  .hero__image--desktop-left, .hero__image--desktop-right {
    display: block;
    position: absolute;
    aspect-ratio: 394/303;
    width: 24.625rem;
    margin: 0;
  }
}
.hero__image--desktop-left {
  top: -1.4375rem;
  left: clamp(-8rem, -23.692rem + 24.519vw, -1.625rem);
}
.hero__image--desktop-right {
  bottom: -1.4375rem;
  right: clamp(-8rem, -23.692rem + 24.519vw, -1.625rem);
}
.hero__content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  margin-inline: auto;
  padding-inline: clamp(2.1875rem, -5.267rem + 31.807vw, 10rem);
}
@media (max-width: 23.375rem) {
  .hero__content {
    padding-inline: clamp(1rem, -5.909rem + 34.545vw, 2.1875rem);
  }
}
@media (min-width: 48rem) {
  .hero__content {
    padding-inline: 10rem;
  }
}
@media (min-width: 64rem) {
  .hero__content {
    max-width: 28rem;
    gap: 2rem;
    padding: 0;
  }
}
.hero__title {
  color: #28283d;
}
.hero__description {
  color: #87879d;
}
.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
@media (min-width: 48rem) {
  .hero__actions {
    flex-direction: row;
    justify-content: center;
  }
}

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  padding-block: 2rem 2.25rem;
  padding-inline: clamp(2rem, 1.284rem + 3.053vw, 2.75rem);
  margin-top: 2rem;
  margin-inline: auto;
  max-width: 90rem;
}
@media (max-width: 23.375rem) {
  .main {
    padding-inline: clamp(1rem, -4.818rem + 29.091vw, 2rem);
  }
}
@media (min-width: 48rem) {
  .main {
    padding-inline: clamp(2rem, -0.25rem + 4.688vw, 2.75rem);
  }
}
@media (min-width: 64rem) {
  .main {
    padding-inline: clamp(2.75rem, -15.096rem + 27.885vw, 10rem);
    padding-bottom: 2.75rem;
  }
}
.main__gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: stretch;
}
.main__gallery img {
  object-fit: cover;
  border-radius: 8px;
  aspect-ratio: 147.5/144;
}
@media (min-width: 48rem) {
  .main__gallery img {
    aspect-ratio: 152/160;
  }
}
@media (min-width: 64rem) {
  .main__gallery img {
    aspect-ratio: 1;
  }
}
@media (min-width: 48rem) {
  .main__gallery {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
}
@media (min-width: 64rem) {
  .main__gallery {
    gap: 2rem;
  }
}
.main__content {
  display: flex;
  flex-direction: column;
  text-align: center;
  max-width: 31.5rem;
  gap: 1rem;
}
@media (min-width: 64rem) {
  .main__content {
    max-width: 34rem;
  }
}
.main__content-eyebrow {
  color: #4d96a9;
  text-transform: uppercase;
}
.main__content-title {
  color: #28283d;
  margin-bottom: 1rem;
}
@media (min-width: 48rem) {
  .main__content-eyebrow, .main__content-title {
    margin-inline: 1.84375rem;
  }
}
@media (min-width: 64rem) {
  .main__content-eyebrow, .main__content-title {
    margin-inline: 3.09375rem;
  }
}
.main__content-description {
  color: #87879d;
}

.footer {
  padding-block: 4rem;
  color: #fafafa;
  background-size: cover;
  background-image: linear-gradient(rgba(77, 151, 169, 0.9019607843)), url(../assets/tablet/image-footer.jpg);
  background-position: top 0% left 50%;
}
@media (max-width: 23.375rem) {
  .footer {
    background-image: linear-gradient(rgba(77, 151, 169, 0.9019607843)), url(../assets/mobile/image-footer.jpg);
  }
}
@media (min-width: 48rem) {
  .footer {
    background-position: center;
  }
}
@media (min-width: 64rem) {
  .footer {
    background-image: linear-gradient(rgba(77, 151, 169, 0.9019607843)), url(../assets/desktop/image-footer.jpg);
    padding-block: 7rem;
  }
}
.footer__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-inline: auto;
  gap: 1.5rem;
  padding-inline: clamp(2rem, -3.964rem + 25.445vw, 8.25rem);
  max-width: 90rem;
}
@media (max-width: 23.375rem) {
  .footer__container {
    padding-inline: clamp(1rem, -4.818rem + 29.091vw, 2rem);
  }
}
@media (min-width: 48rem) {
  .footer__container {
    padding-inline: 8.25rem;
  }
}
@media (min-width: 64rem) {
  .footer__container {
    display: grid;
    grid-template-columns: 1fr 22.1875rem clamp(12.5rem, 3.885rem + 13.462vw, 16rem);
    gap: 2rem;
    text-align: start;
    align-items: start;
    padding-inline: clamp(2rem, -17.692rem + 30.769vw, 10rem);
  }
}
.footer .button {
  justify-self: end;
}

/*# sourceMappingURL=styles.css.map */