.main {
  width: 100dvw;
  height: 100dvh;
}

.video {
  width: 100%;
}

.rectangle200 {
  transition: 0.25s ease-in-out;
  cursor: pointer;
  background-color: #181112;
  width: max(24dvh, 23dvw);
  max-width: 600px;
  height: max(30dvw, 32dvh);
  max-height: 800px;
  scale: 0.8;
  opacity: 0.7;
  cursor: pointer;
}

@media (max-width: 999px) {
  .rectangle200 {
    width: max(45dvh, 48dvw);
    max-width: 600px;
    height: max(35dvw, 37dvh);
    max-height: 800px;
    opacity: 1;
    margin: 3em;
  }
  .insideBigger {
    opacity: 85%;
  }
}

@media (min-width: 1000px) {
  .rectangle200:hover {
    scale: 1;
    opacity: 1;
    box-shadow: 1px 0px 50px -6px rgba(207, 207, 207, 0.5);
    -webkit-box-shadow: 2px 0px 50px -6px rgba(207, 207, 207, 0.5);
    -moz-box-shadow: 1px 0px 50px -6px rgba(207, 207, 207, 0.5);
    z-index: 3;
  }
}

.insideBigger {
  opacity: 85%;
}

.insideBigger > h2 {
  color: white;
  font-size: 3em;
}

.insideSmaller {
  width: 100%;
  font-size: 1.4em;
  opacity: 70%;
  background-color: #181112;
  justify-self: flex-end;
}

.insideSmaller > h2 {
  margin-bottom: max(2dvw, 2dvh);
}