.pulse-class-list{
  width:100%;
  margin:0;
  padding:var(--pcl-safe-top, 0) 0 var(--pcl-safe-bottom, 0);
  background:transparent;
  transition:padding .28s ease;
}

.pcl-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:0;
}

.pcl-card{
  position:relative;
  overflow:visible;
  background:transparent;
  scroll-margin-top:120px;
}

.pcl-card-inner{
  overflow:hidden;
  cursor:pointer;
  background:#151515;
}

.pcl-media-img,
.pcl-media-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.pcl-media-img{
  transition:opacity .25s ease, transform .35s ease, filter .35s ease;
}

.pcl-media-video{
  opacity:0;
  background:#151515;
  transition:opacity .25s ease;
}

.pcl-card-inner.is-playing .pcl-media-video{ opacity:1; }
.pcl-card-inner.is-playing .pcl-media-img{ opacity:0; }

.pcl-card-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:1.4rem;
  background:linear-gradient(180deg, transparent 42%, rgba(0,0,0,.72) 100%);
}

.pcl-title{
  margin:0;
  color:#fff;
  font-family:Insignia,Arial,sans-serif;
  font-size:1.6rem;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-shadow:0 2px 8px rgba(0,0,0,.6);
  transition:transform .25s ease;
}

.pcl-desc{
  max-height:0;
  margin:.6rem 0 0;
  overflow:hidden;
  opacity:0;
  color:#fff;
  font-family:Montserrat,Arial,sans-serif;
  font-size:.9rem;
  line-height:1.4;
  text-shadow:0 2px 10px rgba(0,0,0,.65);
  transition:max-height .25s ease, opacity .25s ease;
}

.pcl-desc p{ margin:0; }
.pcl-card-inner.is-playing .pcl-desc{ max-height:240px; opacity:1; }

.pcl-cta{
  align-self:flex-start;
  margin:.6rem 0 .8rem;
  padding:.6rem 1.4rem;
  border-radius:999px;
  opacity:0;
  pointer-events:none;
  color:#fff;
  background:#cd2e2b;
  font-family:Montserrat,Arial,sans-serif;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.12em;
  text-decoration:none;
  text-transform:uppercase;
  transition:opacity .25s ease, background .2s ease, color .2s ease;
}

.pcl-card-inner.is-playing .pcl-cta{ opacity:1; pointer-events:auto; }
.pcl-cta:hover{ color:#cd2e2b; background:#fff; }

@media(min-width:801px){
  .pcl-card{
    aspect-ratio:16/10;
    transition:transform .28s ease;
  }

  .pcl-card-inner{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    transition:height .28s ease, transform .28s ease, box-shadow .25s ease;
  }

  .pcl-card-inner.is-playing{
    top:50%;
    bottom:auto;
    z-index:50;
    height:160%;
    transform:translateY(-50%);
  }

  .pcl-card-inner:not(.is-playing)::after{
    content:"CLICA PARA VER";
    position:absolute;
    top:1.4rem;
    left:1.4rem;
    z-index:3;
    padding:.45rem .85rem;
    border-radius:999px;
    opacity:0;
    transform:translateY(8px);
    color:#fff;
    background:#cd2e2b;
    font:700 .65rem/1 Montserrat,Arial,sans-serif;
    letter-spacing:.12em;
    transition:opacity .22s ease, transform .22s ease;
    pointer-events:none;
  }

  .pcl-card-inner:not(.is-playing):hover::after,
  .pcl-card-inner:not(.is-playing):focus-visible::after{
    opacity:1;
    transform:none;
  }

  .pcl-card-inner:not(.is-playing):hover .pcl-media-img,
  .pcl-card-inner:not(.is-playing):focus-visible .pcl-media-img{
    transform:scale(1.045);
    filter:brightness(.72);
  }
}

@media(max-width:800px){
  .pcl-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .pcl-card{ overflow:hidden; scroll-margin-top:90px; }
  .pcl-card-inner{
    position:relative;
    width:100%;
    aspect-ratio:16/10;
    transition:aspect-ratio .25s ease;
  }
  .pcl-card-inner.is-playing{ aspect-ratio:9/16; }
}

@media(max-width:520px){
  .pcl-grid{ grid-template-columns:1fr; }
}