.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  grid-template-columns: repeat(6, 1fr);
  display: grid;
  z-index: 9999;
  overflow: hidden;
}
.clips {
  color: black;
  position: relative;
  overflow: hidden;
  /* opacity: 0.4; */
}
.clips:nth-of-type(1) {
  background: #f8f9fa; /* Cool snow white */
}
.clips:nth-of-type(2) {
  background: #f1f3f5; /* Airy light white */
}
.clips:nth-of-type(3) {
  background: #e9ecef; /* Subtle pearl */
}
.clips:nth-of-type(4) {
  background: #dee2e6; /* Soft mist */
}
.clips:nth-of-type(5) {
  background: #ced4da; /* Gentle dawn */
}
.clips:nth-of-type(6) {
  background: #adb5bd;
}
/* .clips:nth-of-type(4) {
  background: #1f1f1f;
} */

.clips h2 {
  font-size: 5rem;
  font-family: var(--thirdFont);
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  padding: 0;
}
@media (max-width: 768px) {
  .clips h2 {
    font-size: 3.2rem;
  }
}