.container {
 max-width: 1300px;
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	display: inline-block;
}

video {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	display: inline-block;
}

/* wrapper  */
.grid-wrapper > div {
	display: flex;
	justify-content: center;
	align-items: center;
}
.grid-wrapper > div > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 5px;
}

.grid-wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 480px;
  grid-auto-rows: 500px;
  grid-auto-flow: dense;
}
.grid-wrapper .wide {
	grid-column: span 2;
}
.grid-wrapper .tall {
	grid-row: span 2;
}
.grid-wrapper > div {
	display: flex;
	justify-content: center;
	align-items: center;
}
.grid-wrapper > div > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 5px;
}

.grid-wrapper > div > video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 5px;
}

/*wrapper 2*/
.grid-wrapper-2 > div {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 10px;
}
.grid-wrapper-2 > div > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 5px;
}

.grid-wrapper-2 {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 480px 1fr 1fr;
  grid-auto-rows: 500px;
  grid-auto-flow: dense;
}
.grid-wrapper-2 .wide-2 {
	grid-column: span 2;
}
.grid-wrapper-2 .tall-2 {
	grid-row: span 2;
}
.grid-wrapper-2 > div {
	display: flex;
	justify-content: center;
	align-items: center;
}
.grid-wrapper-2 > div > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 5px;
}

.grid-wrapper-2 > div > video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 5px;
}

/*wrapper 2*/
.grid-wrapper-3 > div {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 10px;
}
.grid-wrapper-3 > div > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 5px;
}

.grid-wrapper-3 {
  display: grid;
  grid-gap: 10px;
  grid-template-columns:  1fr 1fr 480px;
  grid-auto-rows: 500px;
  grid-auto-flow: dense;
}
.grid-wrapper-3 .wide-3 {
	grid-column: span 2;
}
.grid-wrapper-3 .tall-3 {
	grid-row: span 2;
}
.grid-wrapper-3 > div {
	display: flex;
	justify-content: center;
	align-items: center;
}
.grid-wrapper-3 > div > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 5px;
}

.grid-wrapper-3 > div > video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 5px;
}


@media (max-width: 768px) {
  .grid-wrapper {
    grid-template-columns: 1fr;
    grid-auto-rows: 500px 500px 800px;
  }

  .grid-wrapper .wide {
    display: none;/* Remove a "largura extra" em telas pequenas */
  }

  .grid-wrapper .tall {
    grid-row: span 1; /* Evita vídeos muito altos em telas pequenas */
  }

  .grid-wrapper-2 {
    grid-template-columns: 1fr;
    grid-auto-rows:  800px 500px 500px;
  }

  .grid-wrapper-2 .wide-2 {
    display: none;/* Remove a "largura extra" em telas pequenas */
  }

  .grid-wrapper-2 .tall-2 {
    grid-row: span 1; /* Evita vídeos muito altos em telas pequenas */
  }

  .grid-wrapper-3 {
    grid-template-columns: 1fr;
    grid-auto-rows:  500px 500px 800px;
  }

  .grid-wrapper-3 .wide-3 {
    display: none;/* Remove a "largura extra" em telas pequenas */
  }

  .grid-wrapper-3 .tall-3 {
    grid-row: span 1; /* Evita vídeos muito altos em telas pequenas */
  }
  .cards-fim {grid-auto-rows:  500px

  }
}