/**
 * Pley - Estilos de la pagina de instalacion
 */

.install-guide-card {
  min-height: 20rem;
}

.install-guide-header {
  min-height: 3rem;
}

.install-guide-icon {
  width: 3rem !important;
  height: 3rem !important;
  min-width: 3rem;
  flex: 0 0 3rem;
}

.install-guide-row {
  align-items: center;
}

.install-guide-copy,
.install-guide-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.install-guide-media {
  width: 100%;
  min-height: 12.5rem;
}

.install-guide-logo-box {
  width: 5.5rem !important;
  height: 5.5rem !important;
  min-width: 5.5rem;
  flex: 0 0 5.5rem;
}

@media (max-width: 1024px) {
  .install-hero {
    height: 38rem !important;
  }
}

@media (max-width: 768px) {
  .install-hero {
    height: auto !important;
    min-height: 34rem;
    padding-top: 6.5rem !important;
    padding-bottom: 3rem;
  }

  .install-hero h1 {
    font-size: clamp(2.5rem, 9vw, 3.5rem);
  }

  .install-guide-card {
    min-height: auto;
  }

  .install-guide-header {
    align-items: center !important;
  }

  .install-guide-row {
    align-items: stretch;
  }

  .install-guide-copy {
    justify-content: flex-start;
  }

  .install-guide-media {
    min-height: 11rem;
  }
}

@media (max-width: 480px) {
  .install-hero {
    min-height: 32rem;
  }

  .install-hero h1 br {
    display: none;
  }

  .install-hero p {
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }

  .install-guide-card {
    padding: 1.5rem !important;
  }

  .install-guide-header {
    gap: 0.75rem !important;
  }

  .install-guide-header h3 {
    font-size: 1.15rem !important;
  }

  .install-guide-media {
    min-height: 10rem;
    padding: 1.25rem !important;
  }
}

@media (max-width: 320px) {
  .install-hero h1 {
    font-size: 2.15rem;
  }

  .install-guide-card {
    padding: 1.25rem !important;
  }
}