body {
  margin: 0;
  padding: 0;
}

section {
  display: flex;
  justify-content: center;
  margin: 120px 0 0 0;
}

div {
  width: 261px;
  padding: 0 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 50px;
}

#cm {
  border-radius: 100%;
  width: 62.5%;
  max-width: 163px;
}

#logo {
  width: 100%;
  max-width: 261px;
  padding-right: 5px;
}

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  gap: 19px;
  margin: 20px 0;
  padding: 0;
  justify-content: center;
}

ul li {
  background-color: #EA8BCD;
  border-radius: 100%;
  padding: 8.2px;
  flex-basis: 26px;
}

ul li a {
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
}

ul li img {
  aspect-ratio: 1/1;
  object-fit: contain;
  width: 100%;
  height: 100%;
}

@media (min-width: 1024px) {
  div {
    width: 100%;
    column-gap: 87px;
    row-gap: 70px;
  }

  #cm {
    flex-basis: 40%;
  }

  #logo {
    flex-basis: 60%;
  }

  ul {
    flex-basis: 100%;
  }

  li:hover {
    background-color: #78668d;
  }
}