.section-video-column {
  background: rgb(var(--color-background));
  padding: 50px 0;
  text-align: center;
  overflow: hidden;
}

.section-video-column h2 {
  margin-bottom: 0.625rem;
}

.section-video-column p {
  max-width: 534px;
  margin: auto;
  margin-bottom: 1.5rem;
}

video-column {
  display: block;
}

.video-column__content {
  margin: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.video-column__content-item {
  width: calc(100% / 3);
  min-width: 325px;
  max-width: 347px;
}

.video-column__content-item-wrap {
  border-radius: var(--border-radius-container);
  overflow: hidden;
}

.video-column__content-item iframe {
  width: 100%;
}

.video-column__content-item-wrap .media {
  width: 100%;
  padding-bottom: 176%;
  transform: scale(1);
  transition: transform 0.6s ease-in-out;
}

body.hasHover .video-column__content-item-wrap a:hover .media {
  transform: scale(1.1);
}

.tiktok-embed {
  padding: 0;
  border-radius: var(--border-radius-container);
  overflow: hidden;
  border: 1px solid white;
  margin: 0;
}

.video-column__custom-video {
  width: 100%;
  padding-bottom: 176%;
  position: relative;
  border-radius: var(--border-radius-container);
  transform: translateZ(0);
  overflow: hidden;
}

.video-column__custom-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.section-video-column h3 {
  margin-top: 1.25rem;
  margin-bottom: 0;
}

@media only screen and (max-width: 768px) {
  .section-video-column h2,
  .section-video-column p {
    padding: 0 1.5rem;
  }

  .section-video-column h2 {
    font-size: calc(var(--font-heading-scale) * 2.125rem);
  }

  .section-video-column p {
    font-size: calc(0.875rem * var(--font-section-scale, 1));
  }

  .video-column__content {
    padding: 0 1.5rem;
  }
}

@media only screen and (max-width: 400px) {
  .video-column__content {
    padding: 0;
    margin-left: 0;
  }

  .video-column__content-item {
    width: auto;
  }
}

@media (max-width: 749px) {
  .video-column__custom-video {
    position: relative;
  }

  .mobile-unmute-btn {
    position: absolute;
    bottom: 12px;
    left: 12px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    z-index: 5;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
  }

  .mobile-unmute-btn:hover {
    background: rgba(0,0,0,0.7);
  }

  /* Default = Muted (clean speaker + slash) */
  .mobile-unmute-btn::before {
    content: "";
    width: 22px;
    height: 22px;
    background-color: white;
    mask-size: contain;
    mask-repeat: no-repeat;

    mask-image: url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
        <path stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' \
          d='M3 10v4h4l5 5V5L7 10H3zM16 9l4 4m0-4l-4 4'/>\
      </svg>");
  }

  /* Unmuted = modern speaker with curved waves */
  .mobile-unmute-btn.unmuted::before {
    mask-image: url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
        <path stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' \
          d='M3 10v4h4l5 5V5L7 10H3z'/>\
        <path stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' \
          d='M17 9c1 .8 1.5 1.8 1.5 3s-.5 2.2-1.5 3'/>\
        <path stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' \
          d='M19.5 7.5c1.6 1.3 2.5 3 2.5 4.5s-.9 3.2-2.5 4.5'/>\
      </svg>");
  }
}