:root{
  --profiles-wrapper-gap: 16px;
}

*, *::before, *::after{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

.hero-section{
  position: relative;
  height: 100vh;
  background: rgb(182,182,182);
  background: linear-gradient(142deg, rgba(182,182,182,1) 40%, rgba(69,69,69,1) 100%);
  display: flex;
  justify-content: center;
}


.left-information, .right-information{
  position: absolute;
  top: 5px;
  -webkit-text-stroke-width: .5px;
  -webkit-text-stroke-color: black;  position: absolute;
}

.left-information{
  color: #fff;
  left: 10px;
}

.right-information{
  right: 10px;
  color: #c2d43d;
}


.profiles-wrapper{
  margin: 100px 50px 80px;
  width: 1200px;
  display: grid;
  place-content: start;
  gap: var(--profiles-wrapper-gap);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  overflow: scroll;
}

.profiles-wrapper::-webkit-scrollbar{
  display: none;
}

.profiles{
  background-color: #000;
  aspect-ratio: 1;
  position: relative;
}

.profiles-images{
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
}

.selected-profile::after{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(133, 130, 130, 0.466);
  box-shadow: 4px 4px 4px rgba(71, 71, 71, 0.959);
}


.button-options{
  position: absolute;
  bottom: 30px;
  right: 10px;
  display: flex;
  gap: 1rem;
}

.options-names{
  font-size: 1.3rem;
  color: #fff;
  -webkit-text-stroke-width: .4px;
  -webkit-text-stroke-color: black;  
  padding: 0rem .8rem;
  border: none;
  background-color: transparent;
}

.options{
  display: flex;
  align-content: center;
}


.select-icon{
  align-items: center;
  display: flex;
  gap: 2px;
}

.left-btn, .right-btn, .down-btn, .up-btn{
  height: 1.2rem;
}

.enter-key{
  height: 1.7rem;
}


@media screen and (max-width: 700px) {
  .right-information, .left-information{
    font-size: .9rem;
  }
  .profiles-wrapper{
    margin: 80px 20px 60px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  
  .button-options{
    bottom: 20px;
    right: 10px;
  }
}

@media screen and (max-width: 500px) {
  .right-information, .left-information{
    font-size: .8rem;
  }
  .profiles-wrapper{
    margin: 80px 20px 80px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  
  .options-names{
    display: none;
  }
  
  .profiles-wrapper{
    margin: 75px 20px 70px;
  }
}


@media screen and (max-width: 300px) {
  .right-information, .left-information{
    font-size: .7rem;
  }
  .profiles-wrapper{
    margin: 80px 20px 60px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  
  .profiles-wrapper{
    margin: 65px 20px 40px;
  }
}







.profiles-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 20px;
}

.profiles {
  text-align: center;
  width: 150px;  /* Ancho del contenedor */
  height: 300px; /* Aumentamos la altura del contenedor para más espacio */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Alinea los elementos desde el inicio */
  align-items: center;
}

.profiles-images {
  width: 100%; /* La imagen ocupa el 100% del ancho del contenedor */
  height: 120px; /* Altura de la imagen */
  object-fit: cover; /* Asegura que la imagen se recorte correctamente */
  border-radius: 50%; /* Hace que la imagen sea redonda */
  margin-top: 100px; /* Aumentamos el margen superior a 100px para mover la imagen aún más abajo */
}

.profile-btn {
  margin-top: 10px; /* Separación entre la imagen y el botón */
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.profile-btn:hover {
  background-color: #0056b3;
}