/* ===========MAIN=========== */

/* MAIN
→ section → ...
→ section → ...
→ section → ...
*/

main {
  &>section {
    width: 90vw;
    margin-top: 5rem;
    margin-inline: auto;
  }

  &>section:nth-of-type(1) {
    display: flex;
    gap: 1rem;
    padding: 2rem 1rem;
    overflow-x: scroll;
    scrollbar-width: auto;

    &>a {
      &>img {
        width: 25vw;
        object-fit: cover;
        scroll-snap-align: center;
        transition: .1s ease;

        &:hover {
          transform: scale(105%);
        }
      }
    }
  }

  &>section:nth-of-type(2) {
    padding-top: 5rem;

    &>h1 {
      margin-bottom: 3rem;
      padding-bottom: 1rem;
      border-block-end: 4px solid light-dark(var(--color-azul), azure);
    }

    &>a {
      margin-left: 5rem;
      margin-block: 2rem;
      display: inline-block;
      width: 40%;
    }
  }

  &>section:nth-of-type(3) {

    &>h3 {
      margin-bottom: 3rem;
    }

    &>p {
      margin-bottom: 1rem;
    }
  }

}

@media (max-width:500px) {
  main {
    &>section:nth-of-type(1) {
      padding: 0;
      gap: 0;
      width: 90vw;

      &>a {
        width: 90vw;

        &>img {
          width: 85vw;
          scroll-snap-align: center;
          margin: 1rem;
          box-sizing: border-box;

          &:hover {
            transform: none;
          }

        }
      }
    }

    &>section:nth-of-type(2) {
      &>h1 {
        font-size: 3rem;
      }

      &>a {
        width: 80%;
        margin: 1rem 2rem;
      }
    }

    &>section:nth-of-type(3) {
      &>h3 {
        font-size: 3rem;
        margin-bottom: 2rem;
      }
    }

  }
}

@media(prefers-color-scheme:dark) {
  body.light.device {
    color-scheme: dark;

    &>main>section:nth-of-type(2)>h1{
      border-block-end: 4px solid var(--color-azul)
    }
  }
}