.home-grid {
  display: grid;
  list-style: none;
  margin-top: 8px;
  grid-gap: 24px 8px;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
}
.home-grid li {
  position: relative;
}
.home-grid a {
  display: block;
  transition: background 0.2s ease-in-out;
}
.home-grid a:hover {
  border-radius: 8px 8px 0 0;
  background: var(--color-code-variable);
}
.home-grid a:hover img {
  mix-blend-mode: luminosity;
}
.home-grid figure {
  height: auto;
}
.home-grid img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  transition: mix-blend-mode 0.2s ease-in-out;
}
.home-grid figcaption {
  display: flex;
  color: var(--color-text);
  display: block;
}
.surtitleGrid {
  font-weight: 200;
}

.home-featured {
  display: block;
  margin: -24px -24px 0;
  width: 100vw;
  height: 100vh;
}
.home-featured figure {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
}
.home-featured img {
  object-fit: cover;
  height: 100%;
}
.home-featured figcaption {
  display: block;
  position: absolute;
  color: var(--color-code-variable);
  bottom: 64px;
  left: 24px;
  width: calc(100% - 48px);
  transition: color 0.4s ease-in-out;
}
.titleHome {
  display: flex;
  align-items: flex-start;
  font-family: var(--font-family-serif);
  font-size: 96px;
  line-height: 90px;
  text-transform: uppercase;
  max-width: 1030px;
  position: relative;
  z-index: 100;
}
.surtitle {
  font-size: 32px;
  font-weight: 200;
  position: relative;
  z-index: 100;
}
.bgTitle {
  display: block;
  position: absolute;
  bottom: 0px;
  height: 100%;
  width: 0.1%;
  transition: all 0.4s ease-in-out;
}
.home-featured figcaption:hover .bgTitle {
  background: var(--color-code-variable);
  width: 100%;
}
.home-featured figcaption:hover {
  color: var(--color-text);
}

.bloc {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
#films {
  scroll-margin-top: 108px;
  /*margin-top: 8px;*/
}
#contact {
  margin-bottom: -8px;
}
#films:target {
  animation: flash 0.3s ease-in-out;
}
#contact:target {
  animation: flash 0.3s ease-in-out;
}
@keyframes flash {
0% { background: var(--color-code-variable); }
100% { background: transparent; }
}

.topBloc {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
#reverseGrid {
  display: flex;
  height: fit-content;
  margin-top: 14px;
  transition: background 0.2s ease-in-out;
}
#reverseGrid:hover {
  background: var(--color-code-variable);
}

.blank {
  aspect-ratio: 16 / 9;
  background: white;
  border-radius: 8px;
}

@media screen and (max-width: 1081px) {
  .home-featured {
    margin: -8px -8px 0;
  }
  .home-featured figcaption {
    left: 16px;
    top: 40px;
    bottom: auto;
  }
  .surtitle {
    font-size: 24px;
  }
  .titleHome {
    font-size: 64px;
    line-height: 64px;
  }

  #reverseGrid {
    margin-top: 8px;
  }
  .bloc {
    gap: 12px;
  } 
  .home-grid {
    grid-template-columns: repeat(1, 1fr);
  }

  #films {
    scroll-margin-top: 8px;
  }
  #contact {
    scroll-margin-top: 8px;
  }

  .empty {
    display: none;
  }
}

@media screen and (min-width: 1800px) {
  .titleHome {
    font-size: 160px;
    line-height: 150px;
    max-width: unset;
    max-width: 1750px;
  }
}