.grid-container {
  display: grid;
  grid-template-columns: 32.5vw 32.5vw 32.5vw;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: hidden;
}

.grid-left-container {
  display: grid;
  grid-template-columns: 32.5vw 50vw;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: hidden;
}

.grid-right-container {
  display: grid;
  grid-template-columns: 50vw 32.5vw;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: hidden;
}

.grid-item{
  height: 17w;
  margin: 0.5vw;
}

.grid-video{
  transition-duration: 0.5s;
  transition-property: all;
  transform: translateY(0vw);
  height: 18vw;
}

.grid-video:hover{
  margin: 0vw;
  transform: translateY(0.25vw);
  height: 19vw;
}

.grid-title{
  padding-left: 1.8vw;
  padding-right: 1.8vw;
  padding-top: 0.2vw;
  display: block;
  font-size: 2vw;
  margin: 0vw;
  transition-property: all;
  transition-duration: 0.75s;
}

.rightalign{
  text-align: right;
}

.grid-subtitle{
  padding-left: 1.8vw;
  padding-right: 1.8vw;
  display: inline-block;
  font-size: 0.6vw;
  margin: 0vw;
  vertical-align: text-top;
  height: 1.5vw;
  transition-property: all;
  transition-duration: 0.75s;
}

.grid-text{
  padding-left: 1.8vw;
  padding-right: 1.8vw;
  display: inline-block;
  font-size: 1vw;
  margin: 0vw 0vw 0.5vw 0vw;
  vertical-align: text-top;
  transition-property: all;
  transition-duration: 0.75s;
}

.grid-subtext{
  padding-left: 1.8vw;
  padding-right: 1.8vw;
  display: inline-block;
  font-size: 0.8vw;
  margin: 0vw 0vw 0.5vw 0vw;
  vertical-align: text-top;
  transition-property: all;
  transition-duration: 0.75s;
}

.vid-title{
  width:100%;
  position:absolute;
  text-align:center;
  top:50%;
  font-weight:400;
  font-size:1.5vw;
  letter-spacing:0.2vw;
  color:white;
  -webkit-transform:translate3d(0,-50%,0);
  transform:translate3d(0,-50%,0);
  padding:0vw 1vw;
  box-sizing:border-box;
  transform: translateY(2vw) translateX(0.6vw);
  transition-property: all;
  transition-duration: 0.75s;
}

.vid-subtitle{
  color:white;
  opacity:0.5;
  font-size:0.75vw;
  letter-spacing:0.1vw;
  font-weight:100;
  width:100%;
  position:absolute;
  text-align:center;
  bottom:0.7vw;
  transform: translateY(0.8vw) translateX(0.6vw);
  transition-property: all;
  transition-duration: 0.75s;
}

.img {
    transition: filter 0.3s ease;
    filter: brightness(100%);
    pointer-events: auto;
  }

.hoverable-video {
    position: relative;
    padding: 0.3vw;
    overflow: hidden;
    font-family: Roboto, sans-serif;
}
  
.hoverable-video img {
    display: block;
    width: 100%;
    height: auto;
}

.hoverable-video .img-caption {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    transition-property: all;
    transition-duration: 0.75s;
  }

.hoverable-video:hover .img-caption {
    opacity: 1;
    transform: translateY(0vw);
  }

.hoverable-video:hover .vid-subtitle {
    transform: translateY(-0.5vw) translateX(0.6vw);
  }

.hoverable-video:hover .vid-title {
    transform: translateY(-1vw) translateX(0.6vw);
  }

.hoverable-video:hover .img {
    filter: brightness(50%);
  }

.hoverable-video .img-caption .vid-subtitle {
    bottom: 1.1vw;
  }

.notext{
  font-size: 0;
}

.smallHR{
  border-width: 0.01vw;
}

.separator{
  width: 87.5vw; 
  transform: translateY(0vw);
}

i{
  pointer-events: none;
}

.bordered{
  opacity: 1;
  border-style: solid;
  border-radius: 1vw;
  border-width: 0.15vw;
  border-color: #EEEEEE;
  transition-property: all;
  transition-duration: 0.75s;
}

.bordered:hover{
  opacity: 0.5;
}

.bordered-black{
  opacity: 1;
  border-style: solid;
  border-radius: 1vw;
  border-width: 0.15vw;
  border-color: #333;
  transition-property: all;
  transition-duration: 0.75s;
}

.bordered-black:hover{
  opacity: 0.5;
}