<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">.container-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  text-align: center;
}

.div-hero-desaparece {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-info-desaparece {
  display: none;
  margin-top: 10px;
}

.hero-info-desaparece h5 {
  color: #a35e0a;
  font-weight: bold;
}

.hero-info-desaparece p {
  color: #424242;
}

.img-hero-desaparece {
  width: 100px;
  margin-bottom: 15px;
  position: relative;
}

.static-img-hero-desaparece{
  position: absolute;
  width: 100px;
  transition: opacity 0.3s ease-in-out;
}

.static-img-hero-desaparece img,
.img-hero-desaparece img,
.static-img-hero-desaparece picture,
.img-hero-desaparece picture {
	width: 100px!important;
    height: 100px!important;
}

.static-img-hero-desaparece:hover {
  opacity: 0;
}

/* Faz o texto aparecer ao passar o mouse no bloco */
.div-hero-desaparece:hover .hero-info-desaparece {
  display: block;
}



@media screen and (max-width: 767px) {
	.container-hero {
		grid-template-columns: 1fr;
	}
	
	.static-img-hero-desaparece img,
.img-hero-desaparece img,
.static-img-hero-desaparece picture,
.img-hero-desaparece picture {
	width: 200px!important;
    height: 200px!important;
}
	
	.img-hero-desaparece {
		width: 200px;
	}
	
	.static-img-hero-desaparece {
		width: 200px;
	}
}</pre></body></html>