.community-gallery{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.community-img img{
  width:100%;
  border-radius:10px;
  cursor:pointer;
  transition:transform .2s;
}

.community-img img:hover{
  transform:scale(1.05);
}

.community-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.85);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;

  opacity:0;
  animation:communityFadeIn 0.25s ease forwards;
}

.community-overlay img{
  max-width:70vw;
  max-height:70vh;

  border-radius:12px;

  transform:scale(0.92);
  opacity:0;

  animation:communityImgIn 0.25s ease forwards;
}

@keyframes communityFadeIn{
  from{
    opacity:0;
  }
  to{
    opacity:1;
  }
}

@keyframes communityImgIn{
  from{
    transform:scale(0.92);
    opacity:0;
  }
  to{
    transform:scale(1);
    opacity:1;
  }
}

.community-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:58px;
  height:58px;
  border:none;
  border-radius:50%;
  background:rgba(0,0,0,0.45);
  color:#636363;
  font-size:34px;
  line-height:1;
  cursor:pointer;
  z-index:10001;
  transition:transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.community-arrow:hover{
  transform:translateY(-50%) scale(1.08);
  background:rgba(0,0,0,0.65);
}

.community-arrow-left{
  left:calc(50% - 40vw - 24px);
}

.community-arrow-right{
  right:calc(50% - 40vw - 24px);
}

.community-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.85);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  opacity:0;
  animation:communityFadeIn 0.25s ease forwards;
}

.community-overlay-img{
  max-width:70vw;
  max-height:70vh;
  border-radius:12px;
  transform:scale(0.92);
  opacity:0;
  animation:communityImgIn 0.25s ease forwards;
  transition:opacity 0.12s ease, transform 0.12s ease;
}


.video-section-block{
  margin: 18px 0 30px 0;
}

.video-section-title-row{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.video-section-title{
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

.video-section-desc{
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255,255,255,0.95);
  margin-bottom: 16px;
}

.video-section-video-wrap{
  width: 100%;
  display: flex;
  justify-content: flex-start;
}

.video-section-video{
  width: min(100%, 560px);
  display: block;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(0,0,0,0.35);
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
}

/* responsive */
@media (max-width: 900px){
  .video-section-title{
    font-size: 25px;
  }
}

@media (max-width: 600px){
  .video-section-title{
    font-size: 21px;
  }

  .video-section-desc{
    font-size: 15px;
  }

  .video-section-video{
    width: 100%;
    border-radius: 14px;
  }
}