@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Figtree:ital,wght@0,300..900;1,300..900&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Outfit:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&family=Young+Serif&display=swap");

:root {
  /* Cyan */
  --color-cyan-600: #4d96a9;
  --color-cyan-300: #8fe3f9;

  /* Purple */
  --color-purple-600: #855fb1;
  --color-purple-300: #d9b8ff;

  /* Slate */
  --color-slate-900: #28283d;
  --color-slate-600: #87879d;
  --color-slate-300: #d1d1df;

  /* White */
  --color-white: #fafafa;

  /* Font Family */
  --font-family: "Red Hat Display", sans-serif;

  /* Text Preset 1 (Heading XL) */
  --tp-1-size: 64px;
  --tp-1-weight: 900;
  --tp-1-line-height: 1.1;
  --tp-1-letter-spacing: 0px;

  /* Text Preset 2 (Heading L) */
  --tp-2-size: 40px;
  --tp-2-weight: 900;
  --tp-2-line-height: 1.1;
  --tp-2-letter-spacing: 0px;

  /* Text Preset 3 (Uppercase Bold) */
  --tp-3-size: 16px;
  --tp-3-weight: 900;
  --tp-3-line-height: 1.1;
  --tp-3-letter-spacing: 4px;

  /* Text Preset 4 (Body Medium) */
  --tp-4-size: 18px;
  --tp-4-weight: 500;
  --tp-4-line-height: 1.1;
  --tp-4-letter-spacing: 0px;

  /* Text Preset 5 (Small Bold) */
  --tp-5-size: 16px;
  --tp-5-weight: 900;
  --tp-5-line-height: 1.5;
  --tp-5-letter-spacing: 0px;

  /* PARAGRAPH FONT CLAMP */
  --para-size: clamp(1rem, 0.2vw + 1rem, 1.125rem);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-family);
}

.header {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

.left-img {
  grid-area: left-image;
}

.right-img {
  grid-area: right-image;
}

.hero-content {
  grid-area: hero;
  text-align: center;
  justify-self: center;
  margin-top: 48px;
  max-width: 540px;
  padding: 0 2rem;
}

.left-img,
.right-img {
  width: 100%;
  height: auto;
}

.main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    "left-image right-image"
    "hero hero";
  margin-top: 64px;
  margin-bottom: 32px;
}

.title {
  font-size: clamp(2.5rem, 4vw + 1rem, 4rem);
  text-wrap: balance;
  font-weight: var(--tp-2-weight);
  line-height: var(--tp-2-line-height);
  letter-spacing: var(--tp-2-letter-spacing);
  color: var(--color-slate-900);
}

.hero-paragraph {
  margin: 24px 0;
  font-size: var(--para-size);
  color: var(--color-slate-600);
}

.btn-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.download {
  width: 193px;
  height: 56px;
  background-color: var(--color-cyan-600);
}

.question {
  width: 161px;
  height: 56px;
  background-color: var(--color-purple-600);
}

button {
  border-radius: 29px;
  border: none;
  font-size: var(--tp-5-size);
  font-weight: var(--tp-5-weight);
  line-height: var(--tp-5-line-height);
  letter-spacing: var(--tp-5-letter-spacing);
  color: var(--color-white);
}

/* Gallery Section */
.gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 32px;
}

.line {
  width: 1px;
  height: 80px;
  border: 1px solid var(--color-slate-300);
  margin-top: 32px;
}

.circle {
  border: 1px solid var(--color-slate-300);
  color: var(--color-slate-600);
  border-radius: 50%;
  background-color: var(--color-white);
  width: 56px;
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;

  font-size: var(--tp-5-size);
  font-weight: var(--tp-5-weight);
  line-height: var(--tp-5-line-height);
  letter-spacing: var(--tp-5-letter-spacing);
}

.numbering {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.photos img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.photos {
  margin: 64px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  max-width: 1120px;
}

.gallery-text {
  text-align: center;
  width: 30ch;
}

.tagline {
  font-size: var(--tp-3-size);
  line-height: var(--tp-3-line-height);
  font-weight: var(--tp-3-weight);
  letter-spacing: var(--tp-3-letter-spacing);
  color: var(--color-cyan-600);
  margin-bottom: 16px;
}

.sub-heading {
  font-size: 2rem;
  font-weight: var(--tp-2-weight);
  line-height: var(--tp-2-line-height);
  letter-spacing: var(--tp-2-letter-spacing);
  color: var(--color-slate-900);
  margin-bottom: 2rem;
}

.gallery-paragraph {
  margin-bottom: 64px;
  font-size: var(--para-size);
  color: var(--color-slate-600);
}

/* Footer styles */
.footer {
  background-image:
    linear-gradient(rgba(77, 150, 169, 0.9), rgba(77, 150, 169, 0.9)),
    url(mobile/image-footer.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  /* background-position: center; */
  width: 100%;
  padding: 64px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: -28px;
}

.footer h2 {
  font-size: 2rem;
  font-weight: var(--tp-2-weight);
  line-height: var(--tp-2-line-height);
  letter-spacing: var(--tp-2-letter-spacing);
  color: var(--color-white);
}

.footer p {
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--color-white);
  margin: 1.5rem;
}

@media (min-width: 768px) {
  /* .main {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "left-image hero right-image";
  } */

  .photos {
    grid-template-columns: repeat(4, 1fr);
  }

  .btn-container {
    flex-direction: row;
    justify-content: center;
  }

  .hero-content {
    /* max-width: 40ch; */
    padding: 0 1rem;
  }
}

@media (min-width: 1400px) {
  .main {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "left-image hero right-image";
  }

  .hero-content {
    /* max-width: 60ch; */
    padding: 0 1rem;
  }

  .footer {
    flex-direction: row;
    padding: 112px 80px;
    gap: 32px;
  }
  .footer h2 {
    text-align: left;
  }
}