styles.css

@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");

:root {
  --tam-size-1: 8px;
  --tam-size-1-2: 10px;
  --tam-size-1-3: 12px;
  --tam-size-1-4: 14px;
  --tam-size-2: 16px;
  --tam-size-3: 24px;
  --tam-size-4: 32px;
  --tam-size-5: 40px;
  --tam-size-6: 48px;
  --tam-size-7: 56px;
  --tam-size-8: 64px;
  --tam-size-9: 72px;
  --tam-size-10: 80px;
  --tam-size-11: 88px;
  --tam-size-12: 96px;
  --tam-size-13: 104px;
  --tam-size-14: 112px;
  --tam-size-15: 120px;
  --tam-size-16: 128px;
  --tam-size-17: 136px;
  --tam-size-18: 144px;
  --tam-size-19: 152px;

  --background-color: #e0efe7;

  --color-light: #ffffff;
  --color-dark: #2f4f4f;

  --color-btn: hsl(183, 25%, 38%);
  --color-btn-hover: hsl(183, 25%, 40%);

  --detail-color: #497779;
  --detail-color-dark: #2f4f4f;

  /* TEXTOS */

  /* Mobile */
  --font-h1: 3.8rem; /* 38px */
  --font-h2: 2.8rem; /* 28px */
  --font-h3: 2rem; /* 20px */
  --font-h4: 2rem; /* 14px */
  --font-h5: 1rem; /* 10px */
  --font-h6: 0.8rem; /* 8px */

  --font-body: 1.4rem; /* 14px */
  --font-p: 1.4rem; /* 14px */
  --font-a: 1.4rem; /* 14px */
  --font-span: 1.2rem; /* 12px */
  --font-small: 1rem; /* 10px */

  /* Line height */
  --line-title: 1.2; /* Para títulos */
  --line-body: 1.5; /* Para texto de descrição */

  /* Letter spacing */
  --letter-title: 0.04rem; /* Para títulos */
  --letter-body: 0.01rem; /* Para texto de descrição */

  /* Desktop */
  @media (min-width: 768px) {
    --font-h1: 6.4rem; /* 64px */
    --font-h2: 4rem; /* 40px */
    --font-h3: 3rem; /* 30px */
    --font-h4: 2.4rem; /* 24px */
    --font-h5: 2.4rem; /* 24px */
    --font-h6: 2rem; /* 20px */
  
    --font-body: 1.6rem; /* 16px */
    --font-p: 1.6rem; /* 16px */
    --font-a: 1.6rem; /* 16px */
    --font-span: 1.4rem; /* 14px */
    --font-small: 1.2rem; /* 12px */

    /* Line height */
    --line-title: 1.2; /* Para títulos */
    --line-body: 1.5; /* Para texto de descrição */

    /* Letter spacing */
    --letter-title: 0.05rem; /* Para títulos */
    --letter-body: 0.01rem; /* Para texto de descrição */
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

  text-decoration: none;
  list-style: none;

  font-family: "Lato", sans-serif;
  font-weight: var(--font-normal);

  font-size: 62.5%;
}

h1,
h2 {
  line-height: var(--line-title);
  letter-spacing: var(--letter-title);

  color: var(--color-dark);
}

h1 {
  font-size: var(--font-h1);
  font-weight: 900;

  margin-bottom: 4.5rem;
}

h2 {
  font-size: var(--font-h2);
  font-weight: 800;

  margin-bottom: 3rem;
}

h3 {
  font-size: var(--font-h3);
  font-weight: 600;

  margin-bottom: 2.5rem;
}

h4 {
  font-size: var(--font-h4);
  font-weight: 700;

  margin-bottom: 2rem;
}

p,
a,
button,
span,
li,
blockquote {
  line-height: var(--line-body);
  letter-spacing: var(--letter-body);
}

p {
  font-size: var(--font-p);

  margin-bottom: 2rem;
}

a {
  color: inherit;

  font-size: var(--font-a);
  font-weight: 700;
}

blockquote {
  font-size: var(--font-p);
}

button {
  display: flex;
  align-items: center;

  cursor: pointer;

  background-color: var(--color-btn);
  color: var(--color-light);

  padding: 1.5rem 2.5rem;
  border: none;
  border-radius: 1rem;

  &:hover {
    background-color: var(--color-btn-hover);
  }
}

section,
footer {
  padding: 6rem 2rem 5rem 2rem;
}

header {
  padding: 1rem 2rem;

  nav {
    ul {
      display: flex;
      justify-content: space-around;
      align-items: center;

      @media (max-width: 650px) {
        justify-content: space-between;
      }

      li {
        a {
          display: flex;
          flex-direction: column;
          align-items: end;

          span {
            width: 30%;
            border: 1.6px solid var(--color-btn);

            transition: width 0.3s ease;
          }

          img {
            width: 6.5rem;
            height: auto;

            object-fit: cover;

            @media (min-width: 768px) {
              width: 8.5rem;
            }
          }

          &:hover {
            span {
              width: 100%;
            }
          }
        }
      }
    }
  }
}

main {
  #hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;

    height: 55rem;

    background-color: var(--background-color);

    p {
      max-width: 55rem;
    }
  }

  #differences {
    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    p {
      margin-bottom: 5rem;
    }

    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;

      gap: 4rem;

      max-width: 120rem;

      li {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        text-align: center;

        width: 25rem;
        height: 25rem;

        padding: 1rem;

        border: 1px solid var(--detail-color);
        border-radius: 2rem;

        @media (min-width: 768px) {
          width: 30rem;
          height: 30rem;
        }

        h4 {
          margin-top: 2rem;
          margin-bottom: 1rem;
        }

        p {
          margin-bottom: 0;
        }

        img {
          width: 3.2rem;
          height: 3.2rem;

          @media (min-width: 768px) {
            width: 4.2rem;
            height: 4.2rem;
          }
        }
      }
    }
  }

  #request {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;

    background-color: var(--background-color);

    gap: 5rem;

    div {
      max-width: 60rem;

      display: flex;
      flex-direction: column;
      align-items: start;

      @media (min-width: 1350px) {
        width: 75rem;
      }

      ul {
        display: flex;
        flex-wrap: wrap;

        gap: 2rem;

        margin-bottom: 4rem;
        li {
          p {
            display: flex;
            align-items: center;

            gap: 0.5rem;

            margin-bottom: 0;
          }
        }
      }
    }
    #main-img {
      width: 32rem;
      height: fit-content;

      object-fit: cover;

      border-radius: 2rem;

      cursor: zoom-in;

      @media (min-width: 550px) {
        width: 45rem;
      }

      @media (min-width: 768px) {
        width: 55rem;
      }

      @media (min-width: 1350px) {
        width: 60rem;
      }
    }
  }

  #products {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    p {
      margin-bottom: 5rem;
    }

    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;

      margin-bottom: 8rem;

      gap: 4rem;
      li {
        img {
          width: 30rem;
          height: 30rem;

          border-radius: 1rem;

          transition: transform 0.3s ease;
          object-fit: cover;

          cursor: zoom-in;

          &:hover {
            transform: scale(1.1);

            border-radius: 1rem;
          }
        }
      }
    }
  }
}

footer {
  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  gap: 3rem;

  height: max-content;

  background-color: var(--color-dark);
  color: var(--color-light);

  p {
    margin-top: 3rem;
  }

  article {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 3rem;

    button {
      a {
        display: flex;
        align-items: center;

        gap: 1rem;
      }
    }
  }
}