@import './index.css' layer(index);

header {
  background-image: url('./images/partenariatBg.jpg'),
    linear-gradient(to right, transparent, black);
  min-height: auto;

  .text {
    text-transform: uppercase;
    padding-block: 4rem;
    font-size: 6rem;
    font-weight: 400;
  }
}

main {
  .division {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: row-reverse;

    .logos {
      display: flex;
      align-items: start;
      overflow-x: hidden;
      flex: 1 1 50%;

      img {
        flex-basis: 100%;
        animation: scroller 20s ease-out 2s alternate infinite;
      }
    }

    .form {
      flex: 1 1 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-block: 1rem 2rem;

      form {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
        padding-block: 3rem;

        .input__item {
          position: relative;

          input,
          select,
          textarea {
            padding: 2rem 1rem;
            width: 100%;
            color: black;
            font-size: 1.5rem;
            font-weight: 600;

            &::placeholder {
              color: black;
              font-size: inherit;
              text-transform: uppercase;
            }
          }
        }

        .input__item.area {
          grid-column: 1 / span 2;
        }

        .input__item.btn__container {
          .btn {
            background-color: black;
            color: white;
            text-transform: capitalize;
            padding: 1rem 2rem;
            border-radius: 5px;
            font-size: 1.6rem;
            transition: all 0.5s ease;
            cursor: pointer;
            &:hover {
            }
          }
        }
      }
    }
  }
}

@keyframes scroller {
  0% {
    transform: translateX(000%);
  }

  20% {
    transform: translateX(-100%);
  }

  40% {
    transform: translateX(-200%);
  }

  60% {
    transform: translateX(-300%);
  }

  80% {
    transform: translateX(-400%);
  }

  100% {
    transform: translateX(-500%);
  }
}

@media screen and (max-width: 425px) {
  header {
    .text {
      font-size: 4rem;
    }
  }
  main {
    .division {
      flex-direction: column-reverse;

      .form {
        form {
          grid-template-columns: 1fr;
          grid-auto-flow: row;

          .input__item.area {
            grid-column: initial;
          }

          .input__item.btn__container {
            text-align: center;
          }
        }
      }
    }
  }
}

@keyframes Anim {
  from {
  }

  to {
  }
}