.sm-youtube-carousel{
  --sm-gap:16px;
  --sm-thumb-width:0px;
  --sm-thumb-height:180px;
  --sm-border-width:0px;
  --sm-border-color:#ddd;
  --sm-radius:12px;
  position:relative;
  width:100%;
  box-sizing:border-box;
  padding-inline:44px;
}
.sm-youtube-carousel *{box-sizing:border-box}
.sm-youtube-carousel__viewport{overflow:hidden;width:100%}
.sm-youtube-carousel__track{display:flex;gap:var(--sm-gap);transition:transform .35s ease;will-change:transform}
.sm-youtube-carousel__card{
  border:var(--sm-border-width) solid var(--sm-border-color);
  padding:0;
  background:transparent;
  cursor:pointer;
  flex:0 0 calc((100% - (var(--sm-gap) * (var(--sm-visible) - 1))) / var(--sm-visible));
  min-width:0;
  display:block;
  border-radius:var(--sm-radius);
  overflow:hidden;
}
.sm-youtube-carousel[style*="--sm-thumb-width:0px"] .sm-youtube-carousel__thumb-wrap{width:100%}
.sm-youtube-carousel:not([style*="--sm-thumb-width:0px"]) .sm-youtube-carousel__card{flex-basis:var(--sm-thumb-width)}
.sm-youtube-carousel__thumb-wrap{display:block;position:relative;height:var(--sm-thumb-height);background:#eee;overflow:hidden}
.sm-youtube-carousel__thumb{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.sm-youtube-carousel__card:hover .sm-youtube-carousel__thumb{transform:scale(1.025)}
.sm-youtube-carousel__play{position:absolute;left:50%;top:50%;width:58px;height:41px;transform:translate(-50%,-50%);filter:drop-shadow(0 2px 5px rgba(0,0,0,.28));transition:transform .2s ease}
.sm-youtube-carousel__card:hover .sm-youtube-carousel__play{transform:translate(-50%,-50%) scale(1.06)}
.sm-youtube-carousel__play svg{width:100%;height:100%;display:block}
.sm-youtube-carousel__play svg path:first-child{fill:#ff0000}
.sm-youtube-carousel__play-triangle{fill:#fff}
.sm-youtube-carousel__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:36px;
  height:50px;
  border:1px solid #d7d7d7;
  background:#fff;
  color:#222;
  border-radius:8px;
  cursor:pointer;
  font-size:24px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  padding:0;
}
.sm-youtube-carousel__prev{left:0}
.sm-youtube-carousel__next{right:0}
.sm-youtube-carousel__nav:hover{background:#f5f5f5}
.sm-youtube-carousel__nav:disabled{opacity:.35;cursor:not-allowed}
.sm-youtube-lightbox{position:fixed;inset:0;z-index:999999;display:grid;place-items:center;padding:24px}
.sm-youtube-lightbox[hidden]{display:none}
.sm-youtube-lightbox__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78)}
.sm-youtube-lightbox__dialog{position:relative;z-index:1;width:min(100%,1100px);background:#000;border-radius:10px;overflow:visible;box-shadow:0 20px 70px rgba(0,0,0,.45)}
.sm-youtube-lightbox__frame-wrap{aspect-ratio:16/9;width:100%;overflow:hidden;border-radius:10px}
.sm-youtube-lightbox__frame{width:100%;height:100%;border:0;display:block}
.sm-youtube-lightbox__actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:12px 0 0}
.sm-youtube-lightbox__action{appearance:none;border:1px solid #444;border-radius:7px;background:#fff;color:#222;padding:9px 14px;font:inherit;font-size:14px;line-height:1.2;text-decoration:none;cursor:pointer}
.sm-youtube-lightbox__action:hover{background:#f2f2f2}
.sm-youtube-lightbox__icon-action{width:44px;height:42px;padding:9px;display:inline-flex;align-items:center;justify-content:center}
.sm-youtube-lightbox__icon-action svg{width:22px;height:22px;display:block;fill:currentColor}
.sm-youtube-lightbox__icon-action:hover{transform:translateY(-1px)}
.sm-youtube-lightbox__watch{display:inline-flex;align-items:center}
.sm-youtube-lightbox__close{position:absolute;right:-14px;top:-14px;width:38px;height:38px;border:0;border-radius:50%;background:#fff;color:#222;font-size:28px;line-height:34px;cursor:pointer;z-index:2;box-shadow:0 3px 12px rgba(0,0,0,.3)}
body.sm-youtube-lightbox-open{overflow:hidden}
@media (max-width:900px){
  .sm-youtube-carousel{--sm-gap:12px;padding-inline:40px}
  .sm-youtube-carousel__card{flex-basis:calc((100% - var(--sm-gap)) / 2)}
  .sm-youtube-carousel:not([style*="--sm-thumb-width:0px"]) .sm-youtube-carousel__card{flex-basis:min(var(--sm-thumb-width), calc((100vw - 80px - var(--sm-gap))/2))}
}
@media (max-width:560px){
  .sm-youtube-carousel{--sm-gap:10px;padding-inline:38px}
  .sm-youtube-carousel__card{flex-basis:100%}
  .sm-youtube-carousel:not([style*="--sm-thumb-width:0px"]) .sm-youtube-carousel__card{flex-basis:100%;max-width:100%}
  .sm-youtube-carousel__nav{width:32px;height:44px;font-size:20px}
  .sm-youtube-lightbox{padding:12px}
  .sm-youtube-lightbox__close{right:6px;top:-46px}
}