.cowboy_connexion-wrapper {
  background-image: url("./assets/img/azae_cowboy_connexion_background.svg");
  background-position: center right;
  position: relative;
  min-height: 100svh;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 60px;
  box-sizing: border-box;
}

.cowboy_connexion-container {
  width: 100%;
  max-width: 1440px;
}

.cowboy_connexion-content {
  max-width: 650px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 200px;
}

.cowboy_connexion-title {
  font-family: "CowboyFont" !important;
  font-size: clamp(24px, 5vw, 60px) !important;
  font-weight: 500 !important;
}

.cowboy_connexion-title span {
  color: var(--cowboy-site-color);
  font-family: inherit !important;
}

.cowboy_connexion-text {
  font-size: clamp(16px, 3vw, 24px) !important;
}

.cowboy_connexion-input {
  border: 1px solid var(--cowboy-site-color) !important;
  border-radius: 5px !important;
  max-width: 350px;
}

.cowboy_connexion-input:focus {
  box-shadow: none !important;
  outline: 1px solid var(--cowboy-site-color) !important;
}

.cowboy_connexion-button {
  border-radius: 100px !important;
  padding: 10px 32px !important;
  font-size: clamp(16px, 3vw, 18px) !important;
  width: fit-content;
  transition: 0.2s;
}

.cowboy_connexion-button:hover {
  background-color: #bd0024;
}

@media (max-width: 768px) {
  .cowboy_connexion-wrapper {
    background-image: url("./assets/img/azae_cowboy_connexion_background_mobile.svg");
    background-position: center bottom;
    background-size: cover;
  }
  .cowboy_connexion-button {
    width: 100%;
  }
  .cowboy_connexion-input {
    max-width: 100%;
  }
  .cowboy_connexion-wrapper {
    padding: 0 20px;
  }
  .cowboy_connexion-content {
    margin-top: 100px;
  }
}