.hidden {
  display: none;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.inline {
  display: inline;
}

.column-full {
  flex-basis: 100%;
}

.column-half {
  flex-basis: 50%;
}

.container {
  max-width: 75rem;
  margin: 0 auto;
  height: 650px;
}

.background-img {
  background-image: url("../images/dota2.jpeg");
  object-fit: contain;
  background-size: 100% 1400px;
}

body {
  position: relative;
}

.overlay {
  background-color: rgb(0 0 0 / 50%);
  position: absolute;
  top: 70px;
  left: 0;
  height: 170%;
  width: 100%;
}

header {
  width: 100%;
  height: 80px;
  padding: 20px;
}

main {
  position: relative;
}

@media screen and (max-width: 844px) {
  main {
    max-width: 100%;
  }

  .column-half {
    flex-basis: 100%;
  }

  .hover {
    font-size: 0.6rem;
  }
}

@media screen and (max-width: 568px) {
  main {
    max-width: 100%;
  }

  .column-half {
    flex-basis: 100%;
  }

  .hover {
    font-size: 0.5rem;
  }
}