.circle-container {
  position: relative;
  width: 20em;
  height: 20em;
  padding: 0;
  border-radius: 50%;
  list-style: none;
  margin: 5em auto 0;
  border: solid 5px #fec325; }
  .circle-container > * {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6em;
    height: 6em;
    margin: -3em; }
    .circle-container > *:nth-of-type(1) {
      transform: rotate(0deg) translate(10em) rotate(0deg); }
    .circle-container > *:nth-of-type(2) {
      transform: rotate(51.42857deg) translate(10em) rotate(-51.42857deg); }
    .circle-container > *:nth-of-type(3) {
      transform: rotate(102.85714deg) translate(10em) rotate(-102.85714deg); }
    .circle-container > *:nth-of-type(4) {
      transform: rotate(154.28571deg) translate(10em) rotate(-154.28571deg); }
    .circle-container > *:nth-of-type(5) {
      transform: rotate(205.71429deg) translate(10em) rotate(-205.71429deg); }
    .circle-container > *:nth-of-type(6) {
      transform: rotate(257.14286deg) translate(10em) rotate(-257.14286deg); }
    .circle-container > *:nth-of-type(7) {
      transform: rotate(308.57143deg) translate(10em) rotate(-308.57143deg); }
  .circle-container img {
    display: block;
    max-width: 100%;
    border-radius: 50%;
    filter: grayscale(100%);
    border: solid 5px tomato;
    transition: .15s; }
    .circle-container img:hover, .circle-container img:active {
      filter: grayscale(0); }