.joc {
  --joc-panel: #e9e9e9;
  --joc-text: #5c5c5c;
  --joc-dark: #282a2d;
  --joc-accent: #dd8b37;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  margin: 28px auto;
  padding: 0 30px 34px;
  color: var(--joc-text);
  font-family: inherit;
}
.joc *, .joc *::before, .joc *::after { box-sizing: border-box; }
.joc__heading { display: flex; align-items: center; justify-content: center; gap: 30px; margin: 0 auto 28px; }
.joc__heading h2 { margin: 0; color: var(--joc-dark); font-size: clamp(30px, 3.5vw, 52px); line-height: 1; font-weight: 800; letter-spacing: -1.5px; }
.joc__line { display: block; width: min(220px, 20vw); height: 2px; background: var(--joc-dark); }
.joc__viewport { overflow: hidden; position: relative; border-radius: 2px; background: var(--joc-panel); }
.joc__track { display: flex; transition: transform .45s ease; will-change: transform; }
.joc__item { flex: 0 0 25%; min-width: 0; padding: 31px 28px 35px; text-align: left; }
.joc__avatar { display: block; width: 140px; height: 140px; margin: 0 auto 13px; border-radius: 50%; overflow: hidden; background: #d1d1d1; }
.joc__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); }
.joc__meta { display: flex; justify-content: space-between; gap: 12px; min-height: 18px; margin-bottom: 10px; color: #777; font-size: 12px; line-height: 1.4; }
.joc__views { white-space: nowrap; }
.joc__title { margin: 0; color: var(--joc-text); font-size: 16px; line-height: 1.42; font-weight: 700; }
.joc__title a { color: inherit; text-decoration: none; }
.joc__title a:hover, .joc__title a:focus { color: var(--joc-dark); text-decoration: underline; }
.joc__author { margin: 2px 0 0; color: var(--joc-text); font-size: 16px; line-height: 1.42; font-weight: 700; }
.joc__prev, .joc__next { position: absolute; top: 53%; z-index: 2; width: 31px; height: 48px; border: 0; border-radius: 3px; background: rgba(40,42,45,.55); color: #fff; font-size: 34px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .2s, background .2s; }
.joc:hover .joc__prev, .joc:hover .joc__next, .joc:focus-within .joc__prev, .joc:focus-within .joc__next { opacity: 1; }
.joc__prev:hover, .joc__next:hover { background: var(--joc-dark); }
.joc__prev { left: 5px; } .joc__next { right: 5px; }
.joc__dots { display: flex; justify-content: center; gap: 7px; position: absolute; bottom: 8px; left: 0; right: 0; }
.joc__dot { width: 11px; height: 11px; padding: 0; border: 0; border-radius: 50%; background: #c7c7c7; cursor: pointer; }
.joc__dot.is-active { background: #aaa; }
.joc__empty { margin: 0; padding: 60px 20px; border-radius: 2px; background: var(--joc-panel); text-align: center; }
@media (max-width: 1024px) { .joc__item { flex-basis: 33.3333%; padding-left: 20px; padding-right: 20px; } }
@media (max-width: 700px) { .joc { padding: 0 12px 30px; } .joc__heading { gap: 14px; margin-bottom: 18px; } .joc__line { width: 20vw; height: 1px; } .joc__item { flex-basis: 50%; padding: 24px 15px 32px; } .joc__avatar { width: 105px; height: 105px; } .joc__title, .joc__author { font-size: 14px; } }
@media (max-width: 460px) { .joc__item { flex-basis: 100%; padding-left: 30px; padding-right: 30px; } .joc__meta { font-size: 11px; } .joc__prev, .joc__next { opacity: .8; } }