/**
 * Responsive video thumbnails: 5 → 4 → 3 → 2 → 1 columns by viewport width.
 * Loaded last (!important) so ladder wins over bundled theme breakpoints.
 */

/* Largest viewports — 5 per row */
html body .list-videos .item,
html body .list-videos-screenshots .item {
  width: calc(20% - 10px) !important;
}

html body .sidebar + .main-container .place ~ .item:nth-of-type(-n + 5) {
  width: calc((100% - 352px) / 5) !important;
}

html body .block-video .playlist .item {
  width: calc(20% - 10px) !important;
}

/* 4 per row */
@media screen and (max-width: 1260px) {
  html body .list-videos .item,
  html body .list-videos-screenshots .item {
    width: calc(25% - 10px) !important;
  }

  html body .sidebar + .main-container .place ~ .item:nth-of-type(-n + 5) {
    width: calc((100% - 352px) / 4) !important;
  }

  html body .block-video .playlist .item {
    width: calc(25% - 10px) !important;
  }
}

/* 3 per row */
@media screen and (max-width: 960px) {
  html body .list-videos .item,
  html body .list-videos-screenshots .item {
    width: calc(33.333% - 10px) !important;
  }

  html body .sidebar + .main-container .place ~ .item:nth-of-type(-n + 5) {
    width: calc((100% - 352px) / 3) !important;
  }

  html body .block-video .playlist .item {
    width: calc(33.333% - 10px) !important;
  }
}

/* 2 per row */
@media screen and (max-width: 700px) {
  html body .list-videos .item,
  html body .list-videos-screenshots .item {
    width: calc(50% - 10px) !important;
  }

  html body .sidebar + .main-container .place ~ .item:nth-of-type(-n + 5) {
    width: calc(50% - 10px) !important;
  }

  html body .block-video .playlist .item {
    width: calc(50% - 10px) !important;
  }
}

/* 1 per row — typical phone widths */
@media screen and (max-width: 480px) {
  html body .list-videos .item,
  html body .list-videos-screenshots .item {
    width: calc(100% - 10px) !important;
  }

  html body .sidebar + .main-container .place ~ .item:nth-of-type(-n + 5) {
    width: calc(100% - 10px) !important;
  }

  html body .block-video .playlist .item {
    width: calc(100% - 10px) !important;
  }
}

/* Narrow phones: match theme gutters (margin 5px on tiles) */
@media screen and (max-width: 420px) {
  html body .list-videos .item,
  html body .list-videos-screenshots .item {
    width: calc(100% - 5px) !important;
  }

  html body .sidebar + .main-container .place ~ .item:nth-of-type(-n + 5) {
    width: calc(100% - 5px) !important;
  }

  html body .block-video .playlist .item {
    width: calc(100% - 5px) !important;
  }
}

/* ── theme-flat: flex rows use gap — basis must subtract (cols − 1) × gap ── */

html.theme-flat body .list-videos > .margin-fix > .item,
html.theme-flat body .list-videos > .margin-fix > form > .item,
html.theme-flat body .list-videos-screenshots > .margin-fix > .item,
html.theme-flat body .list-videos-screenshots > .margin-fix > form > .item {
  width: calc((100% - 40px) / 5) !important;
  flex: 0 0 calc((100% - 40px) / 5) !important;
  max-width: calc((100% - 40px) / 5) !important;
}

html.theme-flat body .sidebar + .main-container .place ~ .item:nth-of-type(-n + 5) {
  width: calc((100% - 352px - 40px) / 5) !important;
  flex: 0 0 calc((100% - 352px - 40px) / 5) !important;
  max-width: calc((100% - 352px - 40px) / 5) !important;
}

html.theme-flat body .sidebar + .main-container .list-videos > .margin-fix > .item,
html.theme-flat body .sidebar + .main-container .list-videos > .margin-fix > form > .item,
html.theme-flat body .sidebar + .main-container .list-videos-screenshots > .margin-fix > .item,
html.theme-flat body .sidebar + .main-container .list-videos-screenshots > .margin-fix > form > .item {
  width: calc((100% - 40px) / 5) !important;
  flex: 0 0 calc((100% - 40px) / 5) !important;
  max-width: calc((100% - 40px) / 5) !important;
}

@media screen and (max-width: 1260px) {
  html.theme-flat body .list-videos > .margin-fix > .item,
  html.theme-flat body .list-videos > .margin-fix > form > .item,
  html.theme-flat body .list-videos-screenshots > .margin-fix > .item,
  html.theme-flat body .list-videos-screenshots > .margin-fix > form > .item {
    width: calc((100% - 30px) / 4) !important;
    flex: 0 0 calc((100% - 30px) / 4) !important;
    max-width: calc((100% - 30px) / 4) !important;
  }

  html.theme-flat body .sidebar + .main-container .place ~ .item:nth-of-type(-n + 5) {
    width: calc((100% - 352px - 30px) / 4) !important;
    flex: 0 0 calc((100% - 352px - 30px) / 4) !important;
    max-width: calc((100% - 352px - 30px) / 4) !important;
  }

  html.theme-flat body .sidebar + .main-container .list-videos > .margin-fix > .item,
  html.theme-flat body .sidebar + .main-container .list-videos > .margin-fix > form > .item,
  html.theme-flat body .sidebar + .main-container .list-videos-screenshots > .margin-fix > .item,
  html.theme-flat body .sidebar + .main-container .list-videos-screenshots > .margin-fix > form > .item {
    width: calc((100% - 30px) / 4) !important;
    flex: 0 0 calc((100% - 30px) / 4) !important;
    max-width: calc((100% - 30px) / 4) !important;
  }
}

@media screen and (max-width: 960px) {
  html.theme-flat body .list-videos > .margin-fix > .item,
  html.theme-flat body .list-videos > .margin-fix > form > .item,
  html.theme-flat body .list-videos-screenshots > .margin-fix > .item,
  html.theme-flat body .list-videos-screenshots > .margin-fix > form > .item {
    width: calc((100% - 20px) / 3) !important;
    flex: 0 0 calc((100% - 20px) / 3) !important;
    max-width: calc((100% - 20px) / 3) !important;
  }

  html.theme-flat body .sidebar + .main-container .place ~ .item:nth-of-type(-n + 5) {
    width: calc((100% - 352px - 20px) / 3) !important;
    flex: 0 0 calc((100% - 352px - 20px) / 3) !important;
    max-width: calc((100% - 352px - 20px) / 3) !important;
  }

  html.theme-flat body .sidebar + .main-container .list-videos > .margin-fix > .item,
  html.theme-flat body .sidebar + .main-container .list-videos > .margin-fix > form > .item,
  html.theme-flat body .sidebar + .main-container .list-videos-screenshots > .margin-fix > .item,
  html.theme-flat body .sidebar + .main-container .list-videos-screenshots > .margin-fix > form > .item {
    width: calc((100% - 20px) / 3) !important;
    flex: 0 0 calc((100% - 20px) / 3) !important;
    max-width: calc((100% - 20px) / 3) !important;
  }
}

@media screen and (max-width: 700px) {
  html.theme-flat body .list-videos > .margin-fix > .item,
  html.theme-flat body .list-videos > .margin-fix > form > .item,
  html.theme-flat body .list-videos-screenshots > .margin-fix > .item,
  html.theme-flat body .list-videos-screenshots > .margin-fix > form > .item {
    width: calc((100% - 10px) / 2) !important;
    flex: 0 0 calc((100% - 10px) / 2) !important;
    max-width: calc((100% - 10px) / 2) !important;
  }

  html.theme-flat body .sidebar + .main-container .place ~ .item:nth-of-type(-n + 5) {
    width: calc((100% - 10px) / 2) !important;
    flex: 0 0 calc((100% - 10px) / 2) !important;
    max-width: calc((100% - 10px) / 2) !important;
  }

  html.theme-flat body .sidebar + .main-container .list-videos > .margin-fix > .item,
  html.theme-flat body .sidebar + .main-container .list-videos > .margin-fix > form > .item,
  html.theme-flat body .sidebar + .main-container .list-videos-screenshots > .margin-fix > .item,
  html.theme-flat body .sidebar + .main-container .list-videos-screenshots > .margin-fix > form > .item {
    width: calc((100% - 10px) / 2) !important;
    flex: 0 0 calc((100% - 10px) / 2) !important;
    max-width: calc((100% - 10px) / 2) !important;
  }
}

@media screen and (max-width: 480px) {
  html.theme-flat body .list-videos > .margin-fix > .item,
  html.theme-flat body .list-videos > .margin-fix > form > .item,
  html.theme-flat body .list-videos-screenshots > .margin-fix > .item,
  html.theme-flat body .list-videos-screenshots > .margin-fix > form > .item {
    width: calc(100% - 10px) !important;
    flex: 0 0 calc(100% - 10px) !important;
    max-width: calc(100% - 10px) !important;
  }

  html.theme-flat body .sidebar + .main-container .place ~ .item:nth-of-type(-n + 5) {
    width: calc(100% - 10px) !important;
    flex: 0 0 calc(100% - 10px) !important;
    max-width: calc(100% - 10px) !important;
  }

  html.theme-flat body .sidebar + .main-container .list-videos > .margin-fix > .item,
  html.theme-flat body .sidebar + .main-container .list-videos > .margin-fix > form > .item,
  html.theme-flat body .sidebar + .main-container .list-videos-screenshots > .margin-fix > .item,
  html.theme-flat body .sidebar + .main-container .list-videos-screenshots > .margin-fix > form > .item {
    width: calc(100% - 10px) !important;
    flex: 0 0 calc(100% - 10px) !important;
    max-width: calc(100% - 10px) !important;
  }
}

@media screen and (max-width: 420px) {
  html.theme-flat body .list-videos > .margin-fix > .item,
  html.theme-flat body .list-videos > .margin-fix > form > .item,
  html.theme-flat body .list-videos-screenshots > .margin-fix > .item,
  html.theme-flat body .list-videos-screenshots > .margin-fix > form > .item {
    width: calc(100% - 5px) !important;
    flex: 0 0 calc(100% - 5px) !important;
    max-width: calc(100% - 5px) !important;
  }

  html.theme-flat body .sidebar + .main-container .place ~ .item:nth-of-type(-n + 5) {
    width: calc(100% - 5px) !important;
    flex: 0 0 calc(100% - 5px) !important;
    max-width: calc(100% - 5px) !important;
  }

  html.theme-flat body .sidebar + .main-container .list-videos > .margin-fix > .item,
  html.theme-flat body .sidebar + .main-container .list-videos > .margin-fix > form > .item,
  html.theme-flat body .sidebar + .main-container .list-videos-screenshots > .margin-fix > .item,
  html.theme-flat body .sidebar + .main-container .list-videos-screenshots > .margin-fix > form > .item {
    width: calc(100% - 5px) !important;
    flex: 0 0 calc(100% - 5px) !important;
    max-width: calc(100% - 5px) !important;
  }
}