.video-grid {
  display: grid;
  grid-column-gap: 1%;
  grid-row-gap: 1em;
  grid-template-columns: 24.25% 24.25% 24.25% 24.25%;
}

.video-grid .video-cell {
  padding:  var(--video-grid-cell-padding);
  background: var(--video-grid-cell-background-color);
  font-weight: var(--video-grid-cell-font-weight);
  border: var(--video-grid-cell-border-width) var(--video-grid-cell-border-style) var(--video-grid-cell-border-color);
  border-radius: var(--video-grid-cell-border-radius);
}

@media screen and (max-width: 1920px) {
  .video-grid { grid-row-gap: 0.75em; }
  .video-grid { grid-template-columns: 32.67% 32.67% 32.67%; }
  .video-grid .video-cell { font-size: 1em; }
}

@media screen and (max-width: 1024px) {
  .video-grid { grid-row-gap: 0.5em; }
  .video-grid { grid-template-columns: 49.5% 49.5%; }
  .video-grid .video-cell { font-size: 0.9em; }
}

@media screen and (max-width: 640px) {
  .video-grid { grid-row-gap: 0.5em; }
  .video-grid { grid-template-columns: 100%; }
  .video-grid .video-cell { font-size: 1em; }
}

.video-open-full-screen-button {
  position: absolute;
  top: -0.3em;
  right: 1.3em;
  border: var(--video-open-full-screen-button-border-width) var(--video-open-full-screen-button-border-style) var(--video-open-full-screen-button-border-color);
  border-radius: var(--video-open-full-screen-button-border-radius);
  font-family: var(--video-open-full-screen-button-font-family);
  font-size: 1em;
  font-weight: var(--video-open-full-screen-button-font-weight);
  color: var(--video-open-full-screen-button-color);
  background-color: var(--video-open-full-screen-button-background-color);
  cursor: pointer;
}

.video-close-full-screen-button {
  position: absolute;
  top: 0.3em;
  right: 0.3em;
/*
  border: var(--video-close-full-screen-button-border-width) var(--video-close-full-screen-button-border-style) var(--video-close-full-screen-button-border-color);
  border-radius: var(--video-close-full-screen-button-border-radius);
*/
  border: 2px var(--video-close-full-screen-button-border-style) rgb(128,128,128);
  border-radius: var(--video-close-full-screen-button-border-radius);

  font-family: var(--video-close-full-screen-button-font-family);
  font-size: 1em;
  font-weight: var(--video-close-full-screen-button-font-weight);
/*
  color: var(--video-close-full-screen-button-color);
  background-color: var(--video-close-full-screen-button-background-color);
*/
  color: rgb(128,128,128);
  background-color: transparent;

  cursor: pointer;
}

.video-cell-close-button {
  position: absolute;
  top: -0.3em;
  right: -0.3em;
  border: var(--video-cell-close-button-border-width) var(--video-cell-close-button-border-style) var(--video-cell-close-button-border-color);
  border-radius: var(--video-cell-close-button-border-radius);
  font-family: var(--video-cell-close-button-font-family);
  font-size: 1em;
  font-weight: var(--video-cell-close-button-font-weight);
  color: var(--video-cell-close-button-color);
  background-color: var(--video-cell-close-button-background-color);
  cursor: pointer;
}

.video-description {
  position: relative;
  height: var(--video-description-height);
  font-family: var(--video-description-font-family);
  font-size: var(--video-description-font-size);
  font-weight: var(--video-description-font-weight);
  color: var(--video-description-color);
  background-color: var(--video-description-background-color);
  cursor: default;
}

.video-wrapper {
  max-width:100%;
  margin: 0 auto;
  background-color: var(--video-wrapper-border-color);
  border: var(--video-wrapper-border-width) var(--video-wrapper-border-style) var(--video-wrapper-border-color);
}

.video-container {
  position: relative;
  height: 0;
  overflow: hidden;
  padding-top: 0px;
  padding-bottom: 56.25% !important;
}

.video-container iframe {
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%
}