@import "./default.css";
.baner {
  background: linear-gradient(var(--blacken), var(--blacken)),
    url("/images/covoer-ngor.jpg") no-repeat center/cover;
  width: 100%;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.baner h1 {
  color: var(--white);
  font-size: 5em !important;
  text-transform: uppercase;
}
.photos {
  width: 100%;
  height: auto;
  background-color: var(--bc-gray);
  padding: 30px 0;
}

.grid {
  line-height: 30px;
  column-count: 3;
  width: 100%;
  border-radius: 0;
}
.grid img {
  width: 100% !important;
  height: auto !important;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 3px 8px;
  /* box-shadow: rgba(0, 0, 0, 0.4) 1px 0px 0px; */
  /* padding: 7px 0; */
  margin: 10px;
  transition: transform 0.3s ease-out;
}
.grid img:hover {
  transform: scale(1.045);
}

/* Partie mobile */
@media only screen and (max-width: 768px) {
  .baner h1 {
    font-size: 2.5em !important;
  }
  .baner {
    height: 30vh !important;
  }
  .grid {
    line-height: 20px;
    column-count: 1 !important;
  }
}
/* Partie tablette */
@media only screen and (max-width: 992px) {
  .grid {
    line-height: 20px;
    column-count: 2;
  }
}
/* Mini Pc */
@media only screen and (max-width: 1300px) {
  .grid {
    line-height: 20px;
    column-count: 2;
  }
}