.main_wrapper_container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  display: grid;
  align-items: flex-start;
  grid-template-columns: 0.5fr 1fr;

  grid-gap: 2rem;
  padding-bottom: 8rem;
}
main iframe {
  width: 100%;
  height: 500px;
  border-radius: 10px;
}

.languages_area {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 2rem;
  grid-gap: 0.5rem;
}

.languages_area li {
  font-size: 18px;
  display: inline-block;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: 0.3s ease all;
}
.languages_area li:hover,
.languages_area li.active {
  background-color: #008c8c;
  color: #fff;
  border-radius: 5px;
}
@media screen and (max-width: 840px) {
  main {
    grid-template-columns: 1fr;
  }
  main iframe {
    height: 300px !important;
  }
}

@media screen and (max-width: 450px) {
  .languages_wrapper h1 {
    font-size: 20px;
  }
  .languages_area li {
    font-size: 14px;
  }
}