:root{
  --about-gap-width-big: 52.2%;
  --about-gap-width-small: 47.8%;
}

.artical-outer .video-banner {
  width: var(--about-gap-width-small);
}

.artical-outer .video-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* DOMYŚLNIE 16:9 – finalnie zmienione w JS na podstawie data-ratio */
  overflow: hidden;
  --overlay-rgb: 0,0,0;
  --overlay-opacity: 0;
  min-height: 100%;
}
.youtube-video-container{
  padding-top: 56.25%;
}
.youtube-video-ratio-4-3{
  padding-top: 75%;
}
.youtube-video-ratio-3-2{
  padding-top: 66.66%;
}
.youtube-video-ratio-8-5{
  padding-top: 62.5%;
}
.youtube-video-ratio-1-1{
  padding-top: 100%;
}
.artical-outer .video-container::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: rgba(var(--overlay-rgb), var(--overlay-opacity));
}

.artical-outer .video-element,
.artical-outer iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; 
  display: block;
  background: #000;
  cursor: pointer; 
}

.artical-outer .play-btn {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -100%);
  cursor: pointer;
  border: none;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  padding: 1rem;
  border-radius: 50%;
  display: flex; 
  align-items: center; 
  justify-content: center;
  transition: background 0.3s;
}
.artical-outer .play-btn:hover {
  background: rgba(0, 0, 0, 0.6);
}
.artical-outer .play-btn svg {
  width: 4rem;
  height: 4rem;
  fill: currentColor;
}

.artical-outer .video-content {
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 100%;
  text-align: center;
}

.artical-outer .video-content > .title {
  font-weight: bold;
  font-size: 5.6rem;
  line-height: 6.2rem;
}

.artical-outer .video-content > .desc {
  font-weight: normal;
  font-size: 1.8rem;
  line-height: 3.2rem;
}

@media (max-width: 992px){
  .artical-outer .video-content > .title {
    font-size: 3.2rem;
    line-height: 4rem;
  }
  .artical-outer .video-content > .desc {
    font-size: 1.8rem;
    line-height: 3.2rem;
  }
  .artical-outer .video-banner {
    width: 100%;
  }
}

@media (max-width: 576px){
  .artical-outer .video-content > .title {
    font-size: 2.8rem;
    line-height: 3.6rem;
  }
  .artical-outer .video-content > .desc {
    font-size: 1.4rem;
    line-height: 2rem;
  }
}