.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .56;
}

.hero:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 20, 40, .94) 0%, rgba(4, 29, 57, .77) 47%, rgba(5, 54, 97, .27) 100%);
  z-index: 1;
}

.hero__grid { z-index: 1; }
.hero__content { z-index: 2; }

.equipment-card {
  position: relative;
  overflow: hidden;
  margin: 29px 0 24px;
  height: 168px;
  background: #10233e;
}

.equipment-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  opacity: .8;
}

.equipment-card:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 24, 46, .82), rgba(4, 24, 46, .1));
}

.equipment-card figcaption {
  position: absolute;
  z-index: 1;
  left: 20px;
  bottom: 19px;
  color: #fff;
}

.equipment-card span,
.equipment-card strong { display: block; }
.equipment-card span { color: #8bc5ff; font-size: 10px; font-weight: 800; letter-spacing: 1.4px; }
.equipment-card strong { margin-top: 3px; font-size: 16px; }

@media (max-width: 640px) {
  .hero__photo { object-position: 61% center; }
  .hero:after { background: linear-gradient(90deg, rgba(4, 20, 40, .92), rgba(4, 30, 57, .6)); }
  .equipment-card { height: 143px; }
}