#grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; 
    gap: 1%; 
    width: 98%;
    margin: 0 auto; /* centrar */
    transition: all 0.6s ease-in-out;
}

.card {
    
    margin-top: 0px;
		margin-bottom: 3vh;
			
		margin-left: 2%;
		margin-right: 2%;
					
		width: 92%;
		height: auto;
		padding: 2%;

		background: radial-gradient(100% 100% at 3% 3%, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    
    border: 5px double rgb(19, 220, 247);
    border-radius: 16px; 
    backdrop-filter: blur(8px);
    box-shadow: 0px 0px 20px rgba(0,0,0,.75);
}
    

.card img, 
.card iframe {
    max-width: 100%;
    border-radius: 8px;
    display: block;
    margin-bottom: 12px;
}
.card iframe, section iframe {
    width: 100%;
    height: 360px;
}

#grid-layout > div {
  animation: popin 0.5s ease forwards;
}

@keyframes popin {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}