Как адаптивно сверстать идеально круглые блоки с контентом на CSS?
====================================================================

 Нужно сделать несколько круглых блоков с некоторым контентом в ряд, на маленьком разрешении экрана уменьшать количество блоков в ряду. Блоки должны иметь соотношение высоты и ширины 1 к 1, то есть идеально круглыми.  

Сейчас решил эту задачу с помощью JS:   
snippet  

Можно ли это же сделать на CSS, без JS? Если да, то подскажите, плс, как?  

Спасибо! 

 Есть способ как сделать стороны с любимым соотношением.   

Сначала создается div, или любой блочный элемент, ему задается необходимая ширина и border-radius 50%. В этот блок вкладывается другой блок с высотой 0 и padding-top такой, какой надо для пропорции, только задается он в процентах. В данном случае это padding-top: 100%, а для соотношения 16:9 padding-top: 56.9%, если память не изменяет. Также этому блоку задается position relative. В этот блок вкладываем еще один блок, который получает position absolute, width 100% height 100%. Уже в этот последний, третий, блок вкладываем контент.