/* 1. Grid Layout & Responsiveness */
.partner-grid {
display: flex;
  flex-wrap: wrap;
  justify-content: center; /* This centers the bottom row */
  gap: 40px; /* Space between logos */
  margin: 0 auto;
align-items: center;
}

/* 1. Target the 'a' tag (the actual flex item) */
.partner-grid a {
  display: flex; /* Helps center the image inside if it's smaller */
  justify-content: center;
  align-items: center;
  padding:0;
  /* 2. Apply your flex rules here */
flex: 0 1 calc(25% - 40px); 
 /* flex: 0 0 25%; */
  height: auto;
}

/* 3. Make the image fill the 'a' tag */
.partner-grid a img {
  width: 100%;
    min-width: 292px; /* Adjust based on your logo sizes */
  height: 100%;
  object-fit: contain;
}

.partner-grid img{
    flex: 0 1 calc(25% - 40px); /* Sets base width to 1/4 minus the gap */
  min-width: 200px; /* Prevents logos from getting too small */
  height: auto;
  object-fit: contain;
}


@media (min-width: 768px) {
  .partner-grid {

  }
.partner-wrapper {}


}

/* The container that hides the text initially */
.partner-wrapper .reveal-mask {
  overflow: hidden;
  display: block;
}

.partner-wrapper .reveal-mask span, 
.partner-wrapper .reveal-mask h2, 
.partner-wrapper .reveal-mask p {
  display: block;
  transform: translateY(110%); /* Hidden below the mask */
  transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Staggered Delays */
 .partner-wrapper .reveal-mask span { transition-delay: 0.1s; }
 .partner-wrapper .reveal-mask h2   { transition-delay: 0.2s; }
 .partner-wrapper .reveal-mask p    { transition-delay: 0.3s; }

/* The Trigger */
 .partner-wrapper .reveal-mask span,
 .partner-wrapper .reveal-mask h2,
 .partner-wrapper .reveal-mask p {
  transform: translateY(0); /* Slides up into view */
}