.logo{
    height: 50px;
    width: 50px;
}
.image{
    height: 200px;
    width: 200px;
}


.hero {
  
  height: 90vh;
}

.carousel,
.carousel-inner,
.carousel-item {
    
  height: 100%;
}

.empire {
    
  background-image: url("image/empire.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.vampire {
     
  background-image: url("image/vampiresdiares.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


@media (min-width: 992px) { /* lg et plus */
 .empire {
    background-color: #000;
  background-image: url("image/empire.jpg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.vampire {
     background-color: #000;
  background-image: url("image/vampiresdiares.jpg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
}
.hero1 {
  background-color: #000;
  width: 100%;
  
}
.hero2 {
  background-color: #000;
  width: 100%;
  height: 100%;
}
.card{
    height: 400px;
    
}
.image1{
    height: 300px;

}
.hero3 {
  background-color: #000;
  width: 100%;

}

.her3:hover {
  transform: scale(1.05); /* zoom léger */
  
}

@media (max-width: 992px) { /* lg et plus */
 .hero2 {
  background-color: #000;
  width: 100%;
  height: 60%;
}

}