Responsive circle with responsive images and text inside
<p>I badly want to create four responsive circles (two per row) in a container. All circles are supposed to contain some images and text inside - obviously responsive as well.</p>

<p>I've seen many different snippets for responsive circles with a single image or a block of text inside but I couldn't find a solution for my particular problem (which means: all elements combined and scalable).</p>

<p>My current result is a rather unfortunate bunch of eggs, so any help will be much appreciated.</p>

<p>HTML:</p>

<pre><code>&lt;div class="container"&gt;
  &lt;div class="upper-row"&gt;
    &lt;div class="circle"&gt;
      &lt;img src="http://megaicons.net/static/img/icons_sizes/126/1652/128/aqua-ball-icon.png"&gt;
      &lt;p&gt;25%&lt;/p&gt;
      &lt;img src="http://megaicons.net/static/img/icons_sizes/126/1652/128/aqua-ball-icon.png"&gt;
    &lt;/div&gt;
    &lt;div class="circle"&gt;
      &lt;img src="http://megaicons.net/static/img/icons_sizes/126/1652/128/aqua-ball-icon.png"&gt;
      &lt;p&gt;25%&lt;/p&gt;
      &lt;img src="http://megaicons.net/static/img/icons_sizes/126/1652/128/aqua-ball-icon.png"&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="lower-row"&gt;
    &lt;div class="circle"&gt;
      &lt;img src="http://megaicons.net/static/img/icons_sizes/126/1652/128/aqua-ball-icon.png"&gt;
      &lt;p&gt;25%&lt;/p&gt;
      &lt;img src="http://megaicons.net/static/img/icons_sizes/126/1652/128/aqua-ball-icon.png"&gt;
    &lt;/div&gt;
    &lt;div class="circle"&gt;
      &lt;img src="http://megaicons.net/static/img/icons_sizes/126/1652/128/aqua-ball-icon.png"&gt;
      &lt;p&gt;25%&lt;/p&gt;
      &lt;img src="http://megaicons.net/static/img/icons_sizes/126/1652/128/aqua-ball-icon.png"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;  
</code></pre>

<p>CSS:</p>

<pre><code>.container {
  border: 2px solid black;
  width: 50%;
  padding: 10px;
}

.upper-row, .lower-row {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.circle {
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  padding: 50%;
  height: 50%;
  width: 100%;
  padding: 20px;
  margin: 10px;
}

img {
    width: 50%;
    height: auto;
}
</code></pre>

<p><a href="https://codepen.io/karuzela/pen/kXKRoK" rel="nofollow">https://codepen.io/karuzela/pen/kXKRoK</a></p>