<style>
/* Estilos para a grid de banners */
.banner-grid {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 20px;
margin-top: 20px;
}
/* Cada banner com posicionamento relativo para sobrepor o texto */
.banner {
position: relative;
width: 100%;
max-width: 500px;
}
/* A imagem ocupa toda a largura do banner */
.banner img {
width: 100%;
height: auto;
display: block;
}
/* Texto centralizado sobre a imagem */
.banner-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 48px;
font-weight: bold;
text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
pointer-events: none;
}
</style>