div.CL {
  width: 400px;
}

h2.CL {
  font:
    400 40px/1.5 Helvetica,
    Verdana,
    sans-serif;
  margin: 0;
  padding: 0;
}

ul.CL {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li.CL {
  font:
    200 20px/1.5 Helvetica,
    Verdana,
    sans-serif;
  border-bottom: 1px solid #ccc;
}

li:last-child.CL {
  border: none;
}

li.CL a {
  text-decoration: none;
  color: #000;
  display: block;
  width: 400px;

  -webkit-transition:
    font-size 0.3s ease,
    background-color 0.3s ease;
  -moz-transition:
    font-size 0.3s ease,
    background-color 0.3s ease;
  -o-transition:
    font-size 0.3s ease,
    background-color 0.3s ease;
  -ms-transition:
    font-size 0.3s ease,
    background-color 0.3s ease;
  transition:
    font-size 0.3s ease,
    background-color 0.3s ease;
}

/* Target images within the list items that have the class 'CL' */
ul.CL li.CL img {
  width: 20px;
  height: 30px;
  /* Optional: Add vertical alignment if needed, e.g., to align with text */
  vertical-align: middle;
  margin-right: 5px; /* Add a little space between the icon and the text */
}

li.CL a:hover {
  font-size: 30px;
  background: #f6f6f6;
}