.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 850px;
}

.grid img,
.grid video {
  max-width: 100%;
  background-color: black;
  border-radius: 10px;
  box-shadow: 6px 1px 5px 0px rgb(0, 0, 0, 0.2);
}

h2 {
  font-size: 3rem;
  margin-block-end: 2.2rem;
  text-align: center;
}

.coral-colsif {
  grid-column: 1/3;
}

.capoeira {
  grid-row: 2/4;
}

.video {
  grid-row: 2/3;
}

.center-cont button {
  width: 150px;
  margin: 50px auto;
  border-radius: 10px;
  background-color: black;
  color: white;
  border: none;
  font-size: 2em;
  transition: 0.5s;
  box-shadow: 1px 1px 3px rgb(0, 0, 0, 0.5);
}
.center-cont button:hover {
  transform: scale(1.2);
  transition: 0.5s;
  box-shadow: 2px 2px 6px rgb(0, 0, 0, 0.5);
  cursor: pointer;
}

@media (max-width: 812px) {
  .grid {
    grid-template-columns: 1fr;
  }

  .gl {
    margin: auto;
    grid-column: auto;
    grid-row: auto;
  }
}