/* ============================================
   SLIDES - NetApp Storage LP
   ============================================ */

.slides {
  isolation: isolate;
  background: linear-gradient(104deg, #b8252e 7.76%, #4d144a 68.24%, #11184f 94.34%);
  color: #fff;
  position: relative;
  display: grid;
}

.slides .container {
  width: min(90%, 1100px);
}

.slides__container {
  z-index: 1;
}

.slides h2 {
  color: #fff;
  max-width: 25ch;
}

.slides .cards {
  display: grid;
  gap: 1.5rem;
}

.slides .cards article {
  border-radius: 20px;
  color: #000;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: white;
  display: grid;
  align-items: center;
  position: relative;
  padding: 1.5rem;
  padding-top: 4rem;
}

.slides .cards article::before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg width='46' height='33' viewBox='0 0 46 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M45.9 6.8C38.8333 7.53333 35.5667 10.8333 36.1 16.7H42.3V32.7H26.1V19.2C26.1 12.6 27.7 7.86666 30.9 5C34.1 2.13333 38.6667 0.633331 44.6 0.499996L45.9 6.8ZM20.5 6.8C13.4333 7.53333 10.1667 10.8333 10.7 16.7H16.9V32.7H0.7V19.2C0.7 12.6 2.3 7.86666 5.5 5C8.7 2.13333 13.2667 0.633331 19.2 0.499996L20.5 6.8Z' fill='%23F26A52'/%3E%3C/svg%3E%0A");
  width: 40px;
  height: 30px;
  background-size: contain;
  background-repeat: no-repeat;
  left: 1rem;
  position: absolute;
  top: 1.5rem;
}

@media (min-width: 45em) {
  .slides .cards article {
    padding: 2.25rem;
    padding-top: 3.25rem;
  }
  .slides .cards article::before {
    top: 1rem;
  }
}

@media (min-width: 1000px) {
  .slides .cards article {
    padding: 2.5rem 4.375rem;
    padding-top: 2.5rem;
  }
  .slides .cards article::before {
    top: 2rem;
  }
}

.slides .cards article > p {
  font-style: italic;
  margin-bottom: 1.875rem;
  font-size: 1rem;
}

@media (min-width: 45em) {
  .slides .cards {
    grid-template-columns: 1fr 1fr;
  }
}

.slides .bg {
  z-index: 0;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.slides .bg > * {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}