@import '../components/menu/menu.css';
@import '../components/home-grid/home-desktop.css';
@import '../components/home-grid/home-768-1080.css';
@import '../components/home-grid/home-mobile.css';


html, body{
  width:100vw;
  overflow: hidden;
}

.grid {
  margin-top:1vh;
  margin-left:1vw;
  margin-right:1vw;
  display: grid;
  grid-template-columns: repeat(50, 1fr);
  grid-template-rows: repeat(24, 1fr);
  grid-auto-flow: dense;
  align-content: start;
  width:calc(100% - 2vw - 10px);
  height: calc(var(--real-vh, 1vh) * 98);
}

header{
  grid-column: 20 / 32 !important;
  grid-row: 1 / 2;   
}

figure {
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor:pointer;
  position: relative;
  background-color: transparent;
  animation: apparition 1.5s linear;
  animation-delay: 0.75s;
  animation-fill-mode: forwards;
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

figure a{
  height:100%;
  width:100%;
  position: absolute;
  z-index:2;
  opacity: 0;
}

@keyframes apparition{
  from { opacity: 0; pointer-events:none }
  to { opacity: 1; pointer-events:auto }
}

/* COULEURS AU SURVOL */

.projets.grid-item.hovered-projet{
  background-color: var(--color-highlight-project);
}

.projets.grid-item.hovered-projet img {
  opacity:0;
}

.ateliers.grid-item.hovered-atelier{
  background-color: var(--color-highlight-atelier);
}

.ateliers.grid-item.hovered-atelier img {
  opacity:0;
}


@media (min-width: 1px) and (max-width: 768px) {

  header{
    grid-column: 13 / 39 !important;
  }

  
}