Comment rendre une banniere avec 2 images responsive

je recherche un moyen pour rendre responsive en boostrap
une bannière avec l intérieur de cette bannière deux autres images qui représente les logos de youtube et blogger
j ai essaye plusieurs choses mais rien ne fonctionne
mon dernier est celui ci , cela fonctionne sauf pour les petits ecrans
ou la j ai les icones de blogger et youtube qui ne reste plus dans ma banniere

voici mon code html

merci pour l aide

<div class="parent"><img src="./image/top_image_perle-peche.jpg" alt="Nature" class="responsive">
			<div class="child1"></div>
			<div class="child1 child2">
				<div class="reseau-sociaux">
					<div class="reseau-sociaux-youtube">
						<a href="https://www.youtube.com/playlist?list=PLGsAPXsvnTPUVWSZUiQ_GwZz_-_z2i3f1" target="_blank"><img src="./image/youtube-peche-perle.png" alt="Nature" class="responsive"></a>
					</div>
					<div class="reseau-sociaux-blogger">
						<a href="http://phil/" target="_blank"><img src="./image/blogger-peche-perle.png" alt="Nature" class="responsive"></a>
					</div>
				</div>
			</div>
		</div>

et le code css que j utilise

/* debut css pour la banniere*/
	
	.responsive {
		width: 100%;
		height: auto;
	}
	
	.parent {
		position: relative;
		margin-bottom: 20px;
	}
	
	.child1 {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		opacity: 0.7;
	}
	
	.child2 {
		z-index: 1;
		margin: 0px;
		background: green;
		width: 45%;
		height: 40%;
	}
	
	.reseau-sociaux {
		width: 100%;
	}
	
	.reseau-sociaux-youtube {
		float: left;
		width: 20%;
		height: 50%;
		margin-top: 10px;
		margin-right: 10px;
		margin-bottom: 10px;
		margin-left: 10px;
		max-width:100%;
		max-height:100%;
	}
	
	.reseau-sociaux-blogger {
		float: left;
		width: 20%;
		height: 35%;
		margin-top: 10px;
		margin-right: 10px;
		margin-bottom: 10px;
		margin-left: 10px;
	}
	/* fin css pour la banniere*/

Modifié par flexi2202 (16 Mar 2021 - 17:01)