.ot-masonry {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ot-gap);
  margin-top: var(--ot-sp-5);
}
@media (max-width: 900px)  { .ot-masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .ot-masonry { grid-template-columns: 1fr; } }

.ot-masonry > * {
  display: block;
  min-width: 0;
  width: 100%;
}

.ot-masonry--category {
  display: flex;
  flex-direction: column;
}

.ot-masonry--category > .ot-category-card-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ot-gap);
  min-width: 0;
  width: 100%;
}

.ot-masonry--category .ot-card--category-video {
  min-width: 0;
  width: 100%;
}

@media (min-width: 901px) {
  .ot-masonry--category > .ot-category-card-row--count-1 {
    grid-template-columns: 1fr;
  }

  .ot-masonry--category > .ot-category-card-row--count-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ot-masonry--category > .ot-category-card-row--count-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ot-masonry > .ot-category-ad-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ot-gap);
}

@media (min-width: 768px) {
  .ot-masonry > .ot-category-ad-row > .ot-card--category-ad:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .ot-masonry > .ot-category-ad-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .ot-masonry--category > .ot-category-card-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ot-masonry--category > .ot-category-card-row--count-1 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .ot-masonry--category > .ot-category-card-row {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 901px) {
  .ot-masonry > .ot-card:last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
  }

  .ot-masonry > .ot-card:nth-last-child(2):nth-child(3n + 1) {
    grid-column: span 2;
  }
}

@media (min-width: 481px) and (max-width: 900px) {
  .ot-masonry > .ot-card:last-child:nth-child(2n + 1) {
    grid-column: 1 / -1;
  }
}

.ot-masonry .ot-card__cover {
  aspect-ratio: 16 / 9;
  height: auto;
}
.ot-masonry .ot-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.ot-card__badge {
  position: absolute;
  top: var(--ot-sp-2);
  left: var(--ot-sp-2);
  padding: 2px 8px;
  border-radius: var(--ot-r-xs);
  font-family: var(--ot-font-mono);
  font-size: var(--ot-fs-xs);
  font-weight: var(--ot-fw-s);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--ot-overlay);
  color: var(--ot-text);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ot-card__badge--ad {
  background: var(--ot-accent);
  color: var(--ot-accent-ink);
}

.ot-masonry .ot-card--ad,
.ot-masonry .ot-card--ad .ot-card__cover,
.ot-masonry .ot-card--ad .ot-card__cover img {
  border-radius: 0;
}
.ot-masonry .ot-card--ad .ot-card__cover {
  background: var(--ot-surface-2);
}
.ot-masonry .ot-card--ad .ot-card__cover img {
  object-fit: fill;
}

.ot-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--ot-sp-2);
  margin: var(--ot-sp-10) 0;
  flex-wrap: wrap;
}
.ot-pager a, .ot-pager span.ot-pager__cur {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--ot-sp-3);
  border-radius: var(--ot-r-pill);
  background: var(--ot-surface-1);
  border: 1px solid var(--ot-border);
  font-family: var(--ot-font-mono);
  font-size: var(--ot-fs-sm);
  color: var(--ot-text-mute);
  transition: all var(--ot-dur-1) var(--ot-ease);
}
.ot-pager a:hover {
  background: var(--ot-surface-2);
  color: var(--ot-text);
  border-color: var(--ot-border-hi);
}
.ot-pager__cur {
  background: var(--ot-accent) !important;
  color: var(--ot-accent-ink) !important;
  border-color: var(--ot-accent) !important;
}
.ot-pager__ellipsis {
  color: var(--ot-text-dim);
  font-family: var(--ot-font-mono);
  padding: 0 var(--ot-sp-2);
}
