.spec{
  max-width: 900px;
  margin: auto;
  color: black;
  background-color: whitesmoke;
  padding: 1.5rem 0rem;
  color: whitesmoke;
  font-family: monospace;
}
.spec-card-container{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: auto;
  width: 100%;
}

@media (width<=900px) {
  .spec-card-container{
    flex-wrap: wrap;
    flex-direction: row;
  }
}

.spec-card:nth-child(1){
  background-image:url('../assets/spec-card-assets/pic2.jpg');
  backdrop-filter: blur(10px);
}
.spec-card:nth-child(2){
  background-image:url('../assets/spec-card-assets/pic1.jpg');
  backdrop-filter: blur(10px);
}
.spec-card:nth-child(3){
  background-image:url('../assets/spec-card-assets/pic3.jpg');
  backdrop-filter: blur(10px);
}
.spec-card{
  width: 280px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 420px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  border-radius: 5px;
  transition: all 500ms ease-in-out;
}

.spec-card-detail{
  padding: .5rem;
  width: 100%;
  transform: translateY(50%);
  background:linear-gradient(0deg, rgba(0, 0, 0, 0.619) 60%,rgba(0,0,0,0));  
  transition: all 350ms ease-in-out;
}

.spec-card:hover .spec-card-detail , .spec-card:active .spec-card-detail{
  transform: translateY(0%);
}