/* =========================
   MASONRY (JS)
   ========================= */

.os-grid{
  position: relative;
}

/* sizers para Masonry */
.os-gutter{
  width: 16px;
}

/* 2 columnas: 1 gutter total -> 16px / 2 = 8px por columna */
.os-sizer,
.os-card{
  width: calc(50% - 8px);
}

/* Tablet: 3 columnas: 2 gutters -> 32px / 3 = 10.6667px */
@media (min-width:768px){
  .os-sizer,
  .os-card{
    width: calc(33.3333% - 10.6667px);
  }
}

/* Desktop: 4 columnas: 3 gutters -> 48px / 4 = 12px */
@media (min-width:1024px){
  .os-sizer,
  .os-card{
    width: calc(25% - 12px);
  }
}


/* =========================
   TARJETAS
   ========================= */

.os-card{
  box-sizing: border-box;

  position: relative;

  border-radius: 12px;
  background: rgba(250, 250, 250, 0.1);

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 14px;
  margin-bottom:10px;
}


/* =========================
   CONTENIDO INTERNO
   ========================= */

.os-row{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* =========================
   LOGO
   ========================= */

.os-logo{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.os-logo-img{
  max-width: 100%;
  height: auto;
  width: auto;
  display: block;
}


/* =========================
   NOMBRE OCULTO
   ========================= */

.os-name{
  display: none;
}


/* =========================
   TOOLTIP HOVER
   ========================= */

.os-card::after{
  content: attr(data-os-name);

  position: absolute;
  left: 50%;
  bottom: 8px;

  transform: translateX(-50%) translateY(6px);

  padding: 6px 10px;
  border-radius: 8px;

  background: rgba(0,0,0,.85);
  color: #fff;

  font-size: 14px;
  white-space: nowrap;

  opacity: 0;
  pointer-events: none;

  transition: .15s ease;
}

.os-card:hover::after{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}