@import url("https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;900&display=swap");

:root {
  /*colors*/
  --white: #fafafa;
  --cyan-600: #4d96a9;
  --cyan-300: #8fe3f9;
  --cyan--hover: #71c0d4;
  --purple-600: #855fb1;
  --purple-300: #d9b8ff;
  --purple--hover: #b18bdd;
  --slate-900: #28283d;
  --slate-600: #87879d;
  --slate-300: #d1d1df;
  /*fonts*/
  --font-family: "Red Hat Display", sans-serif;
  --font-size-1: clamp(4rem, 2.143vw + 3.314rem, 6.4rem);
  --text-preset-1: 900 var(--font-size-1) / 1.1 var(--font-family);
  --font-size-2: clamp(3.2rem, 0.714vw + 2.971rem, 4rem);
  --text-preset-2: 900 var(--font-size-2) / 1.1 var(--font-family);
  --font-size-3: clamp(1.2rem, 0.357vw + 1.086rem, 1.6rem);
  --text-preset-3: 900 var(--font-size-3) / 1.1 var(--font-family);
  --font-size-4: clamp(1.6rem, 0.334vw + 1.343rem, 1.8rem);
  --text-preset-4: 500 var(--font-size-4) / 1.5 var(--font-family);
  --font-size-5: 1.6rem;
  --text-preset-5: 900 var(--font-size-5) / 1.5 var(--font-family);
  /*spacing*/
  --space-100: 0.8rem;
  --space-200: calc(var(--space-100) * 2);
  --space-300: calc(var(--space-100) * 3);
  --space-400: calc(var(--space-100) * 4);
  --space-500: calc(var(--space-100) * 5);
  --space-700: calc(var(--space-100) * 7);
  --space-800: calc(var(--space-100) * 8);
  --space-900: calc(var(--space-100) * 9);
  --space-1000: calc(var(--space-100) * 10);
  --space-1400: calc(var(--space-100) * 14);
  --section-padding-m: var(--space-800) var(--space-400) var(--space-400)
    var(--space-400);
  /*utils*/
  --content-width: 112rem;
}

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

.sr-only {
  position: absolute;
  width: 0.1rem;
  height: 0.1rem;
  padding: 0;
  margin: -0.1rem;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

html {
  font-size: 62.5%;
}

body {
  background-color: var(--white);
}

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

.logo__wrapper {
  padding-block-start: var(--space-500);
}
.logo__img {
  margin: 0 auto;
}

/* Hero section */

.hero {
  display: flex;
  flex-flow: column;
  gap: var(--space-700);
  padding: var(--section-padding-m);
  max-width: 170rem;
  margin: 0 auto;
}

.hero__img {
  margin: 0 auto;
}

.breakout--full {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.hero__content-wrapper {
  display: flex;
  flex-flow: column;
  align-items: center;
  margin: 0 auto;
  text-align: center;
  gap: var(--space-300);
  max-width: 44rem;
}

.hero__heading {
  font: var(--text-preset-1);
}

.hero__text {
  font: var(--text-preset-4);
  color: var(--slate-600);
}

.hero__btn-wrapper {
  display: flex;
  flex-flow: row wrap;
  gap: var(--space-200);
  justify-content: center;
}

.img__right {
  display: none;
}

/* Buttons */

.btn {
  padding-block: var(--space-200);
  padding-inline: var(--space-500);
  font: var(--text-preset-5);
  color: var(--white);
  text-decoration: none;
  border-radius: calc(var(--space-100) * 3.5);
  width: fit-content;
  transition: background-color 800ms ease-in-out;
}

.btn--blue {
  background-color: var(--cyan-600);
}

.btn--blue:hover,
.btn--blue:focus-visible {
  background-color: var(--cyan--hover);
}

.btn--blue span {
  color: var(--cyan-300);
}

.btn--purple {
  background-color: var(--purple-600);
}

.btn--purple:hover,
.btn--purple:focus-visible {
  background-color: var(--purple--hover);
}

.btn--purple span {
  color: var(--purple-300);
}

/* Info section */

.info {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: var(--space-800);
  padding: var(--section-padding-m);
  max-width: var(--content-width);
  margin: 0 auto;
}

.info__gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-200);
  max-width: var(--content-width);
  width: 100%;
}

.info__image {
  border-radius: var(--space-100);
}

.info__content {
  display: flex;
  flex-flow: column;
  gap: var(--space-400);
  text-align: center;
}

.info__title-wrapper {
  display: flex;
  flex-flow: column;
  gap: var(--space-200);
}

.info__heading {
  font: var(--text-preset-2);
  color: var(--slate-900);
}

.info__caption {
  order: -1;
  font: var(--text-preset-3);
  color: var(--cyan-600);
  text-transform: uppercase;
  letter-spacing: 0.4rem;
}

.info__text {
  font: var(--text-preset-4);
  color: var(--slate-600);
}

/* Section number elements */

.section-number {
  display: flex;
  flex-flow: column;
  position: relative;
  margin: 0 auto;
  text-align: center;
  z-index: 2;
}
.section-number__line {
  width: 0.1rem;
  height: 8rem;
  background-color: var(--slate-300);
  margin: 0 auto;
}
.section-number__circle {
  position: relative;
  display: flex;
  flex-flow: column;
  place-content: center;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  border: 0.1rem solid var(--slate-300);
  background-color: var(--white);
  overflow: hidden;
  margin: 0 auto;
}

.section-number__circle span {
  font: var(--text-preset-5);
  color: var(--slate-600);
}

.section-number--footer {
  transform: translateY(-10rem);
  z-index: 2;
}

/* Footer section */

footer {
  display: flex;
  flex-flow: row wrap;
  gap: 0;
  margin-block-start: 13rem;
}

.footer-cta {
  display: flex;
  flex-flow: column;
  place-content: center;
  text-align: center;
  padding-block: 0;
  padding-inline: var(--space-400);
  background-image: url("../assets/mobile/image-footer.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: 1;
  margin: 0 auto;

  width: 100%;
}

.footer-cta__overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background: var(--cyan-600);
  opacity: 0.9;
}

.footer-cta__content {
  display: flex;
  flex-flow: column;
  gap: var(--space-300);
  align-items: center;
  transform: translateY(-5rem);
  margin: 0 auto;
}

.footer-cta__heading {
  font: var(--text-preset-2);
  color: var(--white);
}

.footer-cta__text {
  font: var(--text-preset-4);
  color: var(--white);
}

/* Media queries */

@media only screen and (min-width: 48em) {
  .hero {
    gap: var(--space-900);
    padding: var(--space-800) var(--space-400) var(--space-800) var(--space-400);
  }
  .hero__content-wrapper {
    max-width: 45rem;
  }

  .info {
    padding: var(--space-700) var(--space-400) var(--space-800) var(--space-400);
  }

  .info__gallery {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-300);
  }

  .info__content,
  .footer-cta__content {
    max-width: 50rem;
  }

  .footer-cta {
    background-image: url("../assets/tablet/image-footer.jpg");
  }
}

@media only screen and (min-width: 75em) {
  .logo__wrapper {
    padding-block-start: var(--space-1000);
  }
  .hero {
    flex-flow: row;
    gap: var(--space-500);
  }

  .breakout--full {
    width: auto;
    margin-inline: calc(80% - 80vw);
  }
  .img__right {
    display: block;
  }

  .info {
    padding-block: var(--space-1400);
  }

  .info,
  .footer-cta {
    padding-inline: unset;
  }

  .section-number--footer {
    transform: translateY(-18rem);
  }

  .footer-cta {
    background-image: url("../assets/desktop/image-footer.jpg");
    padding-block: var(--space-1000);
  }

  .footer-cta__content {
    flex-flow: row;
    max-width: var(--content-width);
    width: 100%;
    gap: var(--space-400);
    text-align: left;
    align-items: flex-start;
    justify-content: space-between;
  }

  .footer-cta__heading {
    max-width: 40rem;
  }

  .footer-cta__text {
    max-width: 35.5rem;
  }
}

@media only screen and (min-width: 100em) {
  .hero {
  }
  .breakout--full {
    margin-inline: auto;
  }
}