.section-images {
  font-family: "DIN Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.section-images p:last-child {
  margin-bottom: 0;
}

.section-images .section__shell {
  max-width: 900px;
}

.section-images .section__head {
  padding-block: 135px 97px;
}

.section-images .section__entry {
  text-align: center;
  font-size: 18px;
  line-height: 1.67;
}

.section-images .section__entry :is(h1, h2, h3, h4, h5, h6) {
  color: #000;
  font-family: inherit;
  font-weight: 700;
  margin-bottom: 16px;
}

.section-images .section__entry :is(h1, h2, h3, h4, h5, h6):last-child {
  margin-bottom: 0;
}

.section-images .section__entry h2 {
  font-size: 28px;
  line-height: 1.3;
}

.section-images .section__content {
  --duplicates: 3;

  overflow: hidden;
}

.section-images .section__images:nth-child(odd) {
  --move-initial: -10%;
  --move-final: calc(var(--move-initial) - 100% / calc(var(--duplicates)));

  animation-name: marqueeImagesReversed;
}

.section-images .section__images:nth-child(even) {
  --move-initial: -10%;
  --move-final: calc(var(--move-initial) - 100% / calc(var(--duplicates)));

  animation-name: marqueeImages;
}

.section-images .section__images {
  width: max-content;
  display: flex;
  height: 378px;
  transform: translate3d(var(--move-initial), 0, 0);
  animation-duration: 33s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

.section-images .section__image {
  flex-shrink: 0;
  height: 100%;
}

.section-images .section__image img {
  width: auto;
  height: 100%;
}

@keyframes marqueeImages {
  0% {
    transform: translate3d(var(--move-initial), 0, 0);
  }

  100% {
    transform: translate3d(var(--move-final), 0, 0);
  }
}

@keyframes marqueeImagesReversed {
  0% {
    transform: translate3d(var(--move-final), 0, 0);
  }

  100% {
    transform: translate3d(var(--move-initial), 0, 0);
  }
}

@media screen and (max-width: 1023px) {
  .section-images .section__head {
    padding-block: 96px 84px;
  }

  .section-images .section__images {
    height: 270px;
  }
}

@media screen and (max-width: 767px) {
  .section-images .section__shell {
    padding-inline: 38px;
  }

  .section-images .section__head {
    padding-block: 52px;
  }

  .section-images .section__entry h2 {
    font-size: 25px;
  }

  .section-images .section__images {
    height: 176px;
  }
}

@media screen and (max-width: 374px) {
  .section-images .section__shell {
    padding-inline: 28px;
  }
}