.nf-services-animation {
  max-width: 1440px;
  margin: 7.5rem auto;
}
.nf-services-animation__grid {
  padding: 0 1.5rem;
  display: grid;
  gap: 1.5rem;
}
/* each row = 2 items */
.nf-services-animation__row {
  display: flex;
  gap: 1.5rem;
}
/* Each item becomes “as wide as it needs”, based on its image ratio */
.nf-services-animation__item {
  flex: 1 1 auto;
	overflow: hidden;
}
.nf-services-animation__item video {
  display: block;
  height: 100%;
  width: auto;
  border-radius: 0.5rem;
}
/* Fabric SVG background + tile fills (your group classes) */
.service-template .nf-impact .header-tiles {
  background: #f9f9f4;
}
.service-template .nf-impact .header-tiles .light_tiles path {
  fill: #f6f6f2;
}
.service-template .nf-impact .header-tiles .dark_tiles path {
  fill: #ecece8;
}
@media (min-width: 768px) {
  .nf-services-animation__grid {
    gap: 1.5rem;
		padding: 0;
  }
	.service-animation-header.nf-header {
		margin-bottom: 4.5rem;	
	}
}

/* Desktop target height; shrinks as viewport narrows */
@media (min-width: 768px) {
  .nf-services-animation__row {
    display: flex;
    gap: 1.5rem;
  }

  .nf-services-animation__item {
    /* width weight = aspect ratio */
    flex: var(--ar, 1) 1 0;
    min-width: 0;

    /* responsive height, but never taller than the source video height */
    height: clamp(240px, 38vw, var(--vh, 508px));

    overflow: hidden;
    border-radius: 0.5rem;
  }

  .nf-services-animation__video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; /* or contain if you don't want cropping */
  }
}

/* Mobile: 1 per row (stack), keep your existing behavior */
@media (max-width: 767px) {
  .nf-services-animation__row {
    flex-direction: column;
    gap: 0.5rem;
  }

  .nf-services-animation__item {
    border-radius: 0.5rem;
    overflow: hidden;
  }

  .nf-services-animation__video {
    width: 100%;
    height: auto;
    display: block;
  }
}