/* ==========================================================
   SERVICE SHOWCASE A
   ========================================================== */

/* ==========================================================
   PANEL IZQUIERDO
   ========================================================== */

.showcase-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  height: 100%;
  padding-right: 2rem;
  border-right: 1px solid rgba(255,255,255,.12);
}

/* ==========================================================
   IMÁGENES
   ========================================================== */

.showcase-image {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  border-radius: .5rem;
  transition: transform .25s ease;
}

.showcase-image:hover {
  transform: scale(1.02);
}

/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width:991.98px) {
  .showcase-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.10);
    padding: 0 0 1.25rem;
    margin-bottom: 1.25rem;
  }
}

@media (max-width:991.98px) {
  .showcase-item {
    flex: 1;
    align-items: center;
    gap: .85rem;
  }
}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:767.98px) {
  .showcase-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: .8rem;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.10);
    padding: 0 0 1rem;
    margin-bottom: 1rem;
  }
}

@media (max-width:767.98px) {
  .showcase-item {
    flex: 1;
    align-items: center;
    gap: .6rem;
  }
}