.vrs-section{
  width:100%;
}
.vrs-heading{
  margin:0 0 44px;
  text-align:center;
  font-size:clamp(30px,4vw,54px);
  line-height:1.08;
  font-weight:800;
  color:#121827;
}
.vrs-grid{
  display:grid;
  grid-template-columns:repeat(var(--vrs-columns,3),minmax(0,1fr));
  gap:28px;
}
.vrs-card{
  position:relative;
  overflow:hidden;
  height:520px;
  border-radius:22px;
  background:#111;
  isolation:isolate;
}
.vrs-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.vrs-auto-thumb{
  pointer-events:none;
}
.vrs-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.15) 48%,rgba(0,0,0,.04) 75%);
  z-index:1;
}
.vrs-card-content{
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding:30px;
}
.vrs-name{
  margin:0 0 8px;
  color:#fff;
  font-size:24px;
  line-height:1.1;
  font-weight:800;
}
.vrs-role{
  color:rgba(255,255,255,.78);
  font-size:16px;
  line-height:1.4;
}
.vrs-play{
  flex:0 0 80px;
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:999px;
  border:1.5px solid rgba(255,255,255,.92);
  background:rgba(25,25,25,.22);
  color:#fff;
  cursor:pointer;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  transition:transform .2s ease,background .2s ease;
}
.vrs-play:hover{
  transform:scale(1.06);
  background:rgba(0,0,0,.45);
}
.vrs-play-triangle{
  width:0;
  height:0;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  border-left:12px solid #fff;
  margin-left:3px;
}
.vrs-button-wrap{
  display:flex;
  justify-content:center;
  margin-top:54px;
}
.vrs-bottom-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:0 30px;
  border-radius:999px;
  background:#5146e5;
  color:#fff;
  text-decoration:none;
  font-weight:700;
  transition:transform .2s ease,opacity .2s ease;
}
.vrs-bottom-button:hover{
  color:#fff;
  opacity:.93;
  transform:translateY(-1px);
}
.vrs-empty{
  padding:18px;
  border:1px dashed #bbb;
  border-radius:10px;
  text-align:center;
}
.vrs-modal[hidden]{
  display:none!important;
}
.vrs-modal{
  position:fixed;
  z-index:999999;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
}
.vrs-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.92);
}
.vrs-modal-dialog{
  position:relative;
  z-index:1;
  width:min(1180px,96vw);
  max-height:92vh;
}
.vrs-modal-video{
  display:block;
  width:100%;
  max-height:88vh;
  background:#000;
  border-radius:14px;
  object-fit:contain;
}
.vrs-modal-close{
  position:absolute;
  z-index:3;
  top:-14px;
  right:-14px;
  width:44px;
  height:44px;
  border:0;
  border-radius:999px;
  background:#fff;
  color:#111;
  font-size:30px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 10px 35px rgba(0,0,0,.3);
}
body.vrs-modal-open{
  overflow:hidden;
}
@media (max-width:1024px){
  .vrs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .vrs-heading{margin-bottom:28px}
  .vrs-grid{
    grid-template-columns:1fr;
    gap:18px;
  }
  .vrs-card{height:430px}
  .vrs-card-content{padding:22px}
  .vrs-name{font-size:21px}
  .vrs-role{font-size:14px}
  .vrs-play{width:52px;height:52px;flex-basis:52px}
  .vrs-modal{padding:12px}
  .vrs-modal-close{top:8px;right:8px}
}