.jya-grid {
  display: grid;
  grid-template-columns: repeat(var(--jya-cols, 3), minmax(0, 1fr));
  gap: 1rem;
}
.jya-archive[data-columns="1"] .jya-grid { --jya-cols: 1 }
.jya-archive[data-columns="2"] .jya-grid { --jya-cols: 2; }
.jya-archive[data-columns="3"] .jya-grid { --jya-cols: 3; }
.jya-archive[data-columns="4"] .jya-grid { --jya-cols: 4; }

.jya-card { cursor: pointer; display: flex; flex-direction: column; gap: .5rem; }
.jya-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: .75rem; }
.jya-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jya-duration {
  position: absolute; right: 10px; bottom: 10px;;
  background: rgba(0,0,0,.75); color: #fff; font-size: 1.2rem; padding: 5px 8px; border-radius: 5px;
}
.jya-title { font-size: 1.8rem; margin: 0; color: white}
.jya-title a {color: inherit !important; font-size: inherit !important;}

.jya-modal[hidden] { display:none; }
.jya-modal { position: fixed; inset: 0; z-index: 9999; }
.jya-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.65); backdrop-filter: blur(5px); }
.jya-modal-box {
  position: absolute;
  max-width: 80vw; height: 80vh; margin: 0 auto; inset: 10vh 0;
  border-radius: .75rem; box-shadow: 0 10px 40px rgba(0,0,0,.5);
  display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.jya-close {
  position: absolute; top: .5rem; right: .75rem;
  background: transparent; color: #fff; font-size: 2rem; line-height: 1; border: 0; cursor: pointer;
}
.jya-embed { width: 100%; height: 100%; aspect-ratio: 16 / 9;}
@media (max-width: 700px) {
  .jya-modal-box { inset: 0; border-radius: 0; }
}
.jya-embed iframe{
  border: none;
}

.jya-card .jya-thumb{
  overflow: hidden;
}

.jya-card .jya-thumb img{
  transition: ease-in-out 0.5s;
}

.jya-card:hover .jya-thumb img{
  transform: scale(1.05);
}

@media (max-width: 767px) {
  .jya-archive[data-columns="1"] .jya-grid { --jya-cols: 1 }
  .jya-archive[data-columns="2"] .jya-grid { --jya-cols: 2; }
  .jya-archive[data-columns="3"] .jya-grid { --jya-cols: 2; }
  .jya-archive[data-columns="4"] .jya-grid { --jya-cols: 2; }

  .jya-title{ font-size: 1.6rem }
}