/*-----content-video-----*/
.content-video {
    position: relative;
    text-align: center;
    box-sizing: border-box;
    margin: auto;
    margin-top: var(--spacing-gap);
    width: 100vw;
    padding-block: var(--sp-block-normal);
    padding-block-end: var(--sp-block-xl);
    grid-area: content-video;
    background-image: linear-gradient(
        rgba(20, 52, 93, 0.875),
        rgba(14, 24, 26, 0.66)
      ),
      url("../images/home/dark_print_bk2.png");
    background-position: center;
    background-size: cover; /* or contain, depending on your needs */
    background-blend-mode: darken;
  }

  .content-video h3{
    padding-inline: var(--sp-inline-normal);
    padding-bottom: var(--sp-block-lg);
    margin: auto;
    opacity: .7;
    color: white;
  }
  
  .content-video h2{
    padding-bottom: var(--sp-block-sm);
  
  }
  #vimeoPlayer {
    display: block;
    margin: 0 auto;
  }
  
  .video-placeholder {
    display: block;
      margin: auto;
  position: relative;
    cursor: pointer;
    border: 3px solid var(--color-blue-black);
    border-radius: 2px;
    box-shadow: var(--box-shadow);
  
  }
  .video-placeholder img{
    width: 100%;
    height: auto;
  }


@media screen and (max-width: 767px) {
    #vimeoPlayer {
      width: 100%;
      height: 200px;
    }
    .video-placeholder{
      width: 80%;
    }
  }
  
  @media screen and (min-width: 768px) and (max-width: 1023px) {
    #vimeoPlayer {
      width: 100%;
      height: 400px;
    }
    .video-placeholder{
      width: 70%;
    }
    
  }
  
  @media screen and (min-width: 1024px) {
    #vimeoPlayer {
      width: 960px;
      height: 540px;
    }
  }