Как адаптировать вёрстку под Сафари?

.block--6 { 
  display: -webkit-box; 
  display: flex; 
  -webkit-box-orient: vertical; 
  -webkit-box-direction: normal; 
  flex-direction: column; 
  -webkit-box-align: center; 
  align-items: center; 
  -webkit-box-pack: center; 
  justify-content: center; 
  width: 100vw; 
  height: 100%; 
  color: #fff; 
  background-color: #fcb51d; 
} 
 
@media screen and (max-width: 568px) { 
  .block--6 { 
    height: 100%; 
  } 
} 
 
.block--6 h2 { 
  font-family: Bold; 
  text-align: center; 
  font-size: 2.5em; 
  margin: 5vh 0 5vh 0; 
} 
 
.block--6__what { 
  display: -webkit-box; 
  display: flex; 
  -webkit-box-pack: center; 
  justify-content: center; 
  -webkit-box-align: center; 
  align-items: center; 
  flex-wrap: wrap; 
  margin-bottom: 5vh; 
} 
 
@media screen and (max-width: 568px) { 
  .block--6__what { 
    -webkit-box-orient: vertical; 
    -webkit-box-direction: normal; 
    flex-direction: column; 
  } 
} 
 
.block--6__what .what__that { 
  display: -webkit-box; 
  display: flex; 
  -webkit-box-orient: vertical; 
  -webkit-box-direction: normal; 
  flex-direction: column; 
  -webkit-box-pack: center; 
  justify-content: center; 
  -webkit-box-align: center; 
  align-items: center; 
  height: 30vh; 
  width: 25vw; 
  -webkit-box-flex: 1; 
  flex: 1 0 auto; 
} 
 
@media screen and (max-width: 568px) { 
  .block--6__what .what__that { 
    height: 100%; 
  } 
} 
 
.block--6__what .what__that p { 
  color: #fff; 
  font-size: .9em; 
  text-align: center; 
} 
 
@media screen and (max-width: 568px) { 
  .block--6__what .what__that p { 
    font-size: 1em; 
    width: 90vw; 
  } 
} 
 
.block--6__what .what__that .that__circle { 
  display: -webkit-box; 
  display: flex; 
  -webkit-box-pack: center; 
  justify-content: center; 
  -webkit-box-align: center; 
  align-items: center; 
  width: 10vw; 
  height: 10vw; 
  border-radius: 50%; 
  background-color: #ffc256; 
} 
 
@media screen and (max-width: 568px) { 
  .block--6__what .what__that .that__circle { 
    width: 33vw; 
    height: 33vw; 
  } 
} 
 
.block--6__what .what__that .that__circle img { 
  max-width: 100%; 
} 
 
@media screen and (max-width: 568px) { 
  .block--6__what .what__that .that__circle img { 
    max-width: 60%; 
  } 
}

<div class="block--6"> 
  <h2>ЧТО ВЫ ПОЛУЧАЕТЕ, ОБРАТИВШИСЬ К НАМ?</h2> 
  <div class="block--6__what"> 
    <div class="what__that"> 
      <div class="that__circle"> 
        <img src="http://mysolaris.xyz/octoland/icons/tube.png"> 
      </div> 
      <p>Видеоролик, увеличивающий продажи и генерирующий трафик на сайт</p> 
    </div> 
    <div class="what__that"> 
      <div class="that__circle"> 
        <img src="http://mysolaris.xyz/octoland/icons/presentation.png"> 
      </div> 
      <p>Продвижение на площадках, где обитают ваши покупатели</p> 
    </div> 
    <div class="what__that"> 
      <div class="that__circle"> 
        <img src="http://mysolaris.xyz/octoland/icons/list.png"> 
      </div> 
      <p>Долгосрочную стратегию работы с видеоконтентом</p> 
    </div> 
  </div> 
</div>