.video-section-container {
  position: relative;
  width: 100%;
  margin: 0;
  /* height: 373px; */

  .video-section {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-40);

    @media screen and (max-width: 768px) {
      padding: 0 var(--spacing-16);
    }

    @media screen and (max-width: 768px) {
      padding: 0 var(--spacing-30);
      padding-right: var(--spacing-40);
    }
  }

  .video-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 64px;
    padding-bottom: 32px;

    .section-title {
      color: #fff;
      margin: 0;
    }

    @media screen and (max-width: 768px) {
      padding-bottom: 32px;
      padding-top: 32px;
      flex-direction: column;
      gap: 16px;
      align-items: start;
    }
  }

  .video-section-bg-image {
    position: absolute;
    left: 0;
    top: 0;
    height: 248px;
    object-fit: cover;
    width: 100%;
  }
}

.img-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 248px;
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.7) 0%,
      rgba(0, 0, 0, 0.35) 100%);
}

.see-all-button {
  background-color: #fff;
  color: #000;

  &:hover {
    opacity: 0.8;
  }

  &:active {
    opacity: 0.5;
  }

  &:active .styled-button-icon {
    filter: none;
  }

  &:hover .styled-button-icon {
    filter: none;
  }
}