/* =========================
   HUB
========================= */

/* TITULO */
.hub-title {
  text-align: center;
  margin-bottom: 5rem;
}

/* GRID */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

/* CARD */
.hub-card,
.hub-card-intelligent {
  position: relative;
  display: block;
  border-radius: var(--border-r);
  overflow: hidden;
}

.hub-card img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.hub-card-intelligent img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: var(--bgc-card);
  padding: 2rem;
  min-height: 32rem;
}

/* OVERLAY */
.hub-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.048);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem 2rem;
  transition: all 0.5s ease;
}

/* TEXTO */
.hub-overlay h3 {
  font-size: var(--fs-h3);
}

.hub-overlay:hover {
  background: rgba(0, 0, 0, 0.212);
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .hub-grid {
    grid-template-columns: 1fr;
    gap: 5rem;
  }

  .hub-card {
    height: 25rem;
  }

  .hub-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
  }

  .hub-card-intelligent img {
    padding: 2rem;
    min-height: 24rem;
  }
}

@media (max-width: 480px) {
  .hub-card-intelligent img {
    padding: 0.5rem 1rem;
    min-height: 20rem;
  }
}