#videoGallery,
#pictureGallery {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;

  #videoContainer,
  #pictureContainer {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-content: center;
    gap: 8px;

    >iframe,
    >img {
      border-radius: 5px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    >img {
      max-height: 280px;
    }
  }

  >div {
    margin-bottom: 15px;

    button {
      margin: 4px;
    }
  }
}

.ytplaceholder {
  position: relative;
  width: 100%;
  height: 100%;
  flex-basis: 30%;

  iframe {
    height: 214px;
    width: 100%;
  }

  img {
    width: 100%;
    height: 100%;
    display: block;
  }
}


.ytplaceholder .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  background: url('/assets/play_button.svg') no-repeat center center;
  background-size: contain;
  cursor: pointer;
}


@media (max-width: 780px) {
  @media (max-width: 100vw) {

    #videoGallery,
    #pictureGallery {

      >div {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
      }

      #pictureContainer {
        >img {
          width: 40%;
          height: 100%;
        }
      }

      #videoContainer {
        width: 98%;
      }
    }


    .ytplaceholder {
      flex-basis: 82%;

      iframe {
        height: 270px;
      }
    }



  }
}