/* modul prawa dzieci */
#modul_prawy_dzieci { 
    overflow: hidden;
}

#modul_prawy_dzieci a { 
    display: block; 
	overflow:hidden;
    position: relative; 
    text-align: center; 
    width: 95%; 
    margin: auto; 
    margin-bottom: 10px; 
    transition: transform 0.3s ease-in-out;
}

#modul_prawy_dzieci img { 
    width: 100%; 
    text-align: center; 
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}

#modul_prawy_dzieci a:hover img {
    transform: scale(1.1);
    filter: brightness(0.9);
}

#modul_prawy_dzieci h3 { 
    font-size: 20px; 
    color: #fff;
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    margin: 0; 
    padding: 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%);
    text-align: center; 
    transition: background 0.3s ease-in-out;
}

/* Podstrona dzieci */
.dziecko > img { width:100%; }
.dziecko > p { text-align: justify; }
.dzieci { 
	display: flex;
	flex-wrap: wrap;
	--dzieci-item-count:2;
	--dzieci-item-margin:10px;
	align-items: flex-start;
}
.dzieci > a { 
	position: relative; display:block; 
	overflow: hidden;
	text-decoration: none;
	margin: var(--dzieci-item-margin);
	width: calc( 100% / var(--dzieci-item-count) - var(--dzieci-item-margin) * 2 ); 
	box-shadow: 0px 0px 10px #7777773b;
	transition: box-shadow 0.4s;
	
}
.dzieci > a > img { width:100%; }
.dzieci > a > h2 { color: #fff; 
    font-size: 20px; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    margin: 0; 
    padding: 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%);
    text-align: center;
}

.dzieci > a:hover { text-decoration:none; box-shadow: 0px 0px 10px #777; }



@media (max-width: 920px) {
	.dzieci { 
		--dzieci-item-count:1;
		--dzieci-item-margin:5px; 
	}
}

@media (max-width: 610px) {
	.dzieci { 
		--dzieci-item-count:2;
		--dzieci-item-margin:10px;						
	}
	.dzieci h2 { font-size:20px; }
}

@media (max-width: 500px) {
	.dzieci { 
		--dzieci-item-count:1;
		--dzieci-item-margin:5px; 
	}
	.dzieci h2 { font-size:30px; }
}