Нужно сделать адаптивный блок с текстом на экран 300px? [закрыт]

.wrap_bg { 
	width: 100%; 
	height: 1500px; 
	margin-top: 250px; 
	display: flex; 
	flex-direction: column; 
} 
 
.wrap { 
	width: 100%; 
	height: 500px; 
	background: #777; 
} 
 
.wrap div:nth-child(1) { 
	position: absolute; 
	width: 570px; 
	height: 106px; 
	left: 100px; 
	top: 1901px; 
	font-family: 'pt _serif'; 
	font-style: normal; 
	font-weight: normal; 
	line-height: normal; 
	font-size: 40px; 
	color: #FFFFFF; 
} 
 
.wrap div:nth-child(2) { 
	position: absolute; 
	width: 575px; 
	height: 142px; 
	left: 101px; 
	top: 2033px; 
	font-family: 'pt-sans'; 
	font-style: normal; 
	font-weight: normal; 
	line-height: 31px; 
	font-size: 16px; 
	letter-spacing: 0.01em; 
	color: #FFFFFF; 
} 
 
@media screen and (max-width: 700px) { 
    .wrap { 
        width: 100%; 
        margin-left: 0; 
    } 
   
    .wrap div:nth-child(1), 
    .wrap div:nth-child(2){ 
        width: 100%; 
        height: auto; 
        position: static; 
    } 
}

<div class="wrap_bg"> 
   
  <div class="wrap"> 
    <div>Мы вкладываем душу в совершенствование вкуса</div> 
    <div>Мы относимся к своему бренду как к носителю наших уникальных преимуществ и всегда преподносим его "с поля к столу". Мы используем наши уникальные знания и опыт для выращивания и отбора для наших продуктов  самых лучших урожаев с плодородных южно-украинских полей.</div> 
  </div> 
   
  <div class="wrap_2">d</div> 
  <div class="wrap_3">d</div> 
</div>

.wrap_bg { 
	width: 100%; 
	height: 1500px; 
	margin-top: 250px; 
	display: flex; 
	align-items: center; 
	flex-direction: column; 
} 
 
.wrap { 
	width: 100%; 
	height: 500px; 
	background-image: url("../images/bg_1.jpg"); 
	background-repeat: no-repeat; 
	background-size:cover; 
} 
 
.wrap div:nth-child(1) { 
	position: absolute; 
	width: 570px; 
	height: 106px; 
	left: 100px; 
	top: 1901px; 
	font-family: 'pt_serif'; 
	font-style: normal; 
	font-weight: normal; 
	line-height: normal; 
	font-size: 40px; 
	color: #FFFFFF; 
} 
 
.wrap div:nth-child(2) { 
	position: absolute; 
	width: 575px; 
	height: 142px; 
	left: 101px; 
	top: 2033px; 
	font-family: 'pt-sans'; 
	font-style: normal; 
	font-weight: normal; 
	line-height: 31px; 
	font-size: 16px; 
	letter-spacing: 0.01em; 
	color: #FFFFFF; 
} 
 
@media screen (min-width: 700px) { 
    .wrap { 
    	width: 100%; 
        margin-left: 0; 
    } 
    .wrap div:nth-child(1) { 
        width: 100%; 
        height: auto; 
    } 
    .wrap div:nth-child(2) { 
        width: 100%; 
        height: auto; 
    } 
}

	<div class="wrap_bg"> 
		<div class="wrap"> 
			<div>Мы вкладываем душу в совершенствование вкуса</div> 
			<div>Мы относимся к своему бренду как к носителю наших уникальных преимуществ и всегда преподносим его "с поля к столу". Мы используем наши уникальные знания и опыт для выращивания и отбора для наших продуктов  самых лучших урожаев с плодородных южно-украинских полей.</div> 
		</div> 
		<div class="wrap_2">d</div> 
		<div class="wrap_3">d</div> 
	</div>