Create a linked column with an existing CSS class

Howdy,

I saw some threads that spoke to creating linked columns with a custom CSS class, but the issue we have is that the columns already have a custom CSS class of “box-link”. There are 8 boxes in question, all need to go to different destinations, all with that identical “box-link” CSS class.

Unfortunately I was not a part of the build, and there is already a lot of custom css (see below for conflicts).

How can I get each entire box to link to a unique destination?
Thanks!

[quick css)
.main_menu {
font-family: “proxima-nova”;
}

#top .av-main-nav > li > a {
font-weight: normal;
text-transform: uppercase !important;
}

ul.sub-menu li {
border-bottom: 1px solid #8a8a8a!important;
}

#av-burger-menu-ul a:hover{
color:white!important;
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
.avia-layerslider {
display: none !important;
}
}

#top .main_color ul li{
color: #28b272;
line-height: 1.4em;
font-style: normal;
}

.js_active .tab_titles {
font-size: 20px;
background-color: #1177bb;
}

.tab_inner_content {
font-size: 16px;
padding-top: 2%;
padding-right: 5%;
padding-bottom: 2%;
padding-left: 2%;
}

.avia-button {
font-weight: bold !important;
text-transform: uppercase;
font-size: 16px !important;
color: #4a4a4a !important;
}

#top .avia-slideshow-button {
background: #FFC324;
border: none;
}

.single_toggle .toggler {
font-size: 20px;
color: white;
background: #1177bb;
}

.toggler:hover {
color:#ffffff !important;
background: #076bad !important;
}

.toggle_content {
font-size: 16px;
background: #ffffff !important;
}

.toggler {
border: none !important;
}
.entry-content p {
font-size: 16px;
}

.entry-content li {
font-size: 16px;
color: #4a4a4a;
}

.entry-content-wrapper .post-title {
text-transform: none !important;
font-size: 35px !important;
letter-spacing: normal !important;
}

.box-link {
background-color: #ffffff;
}

.box-link:hover {
background-color: #28b171;
color: #ffffff;
}

.box-link:hover a {
color: #ffffff !important;
text-decoration: none;
}

.special-heading-link {
color: #1177bb !important;
}

a {
text-decoration: none !important;
}

.box-divider: hover {
color: #ffffff !important;
}

.testimonial-text {
font-size: 16px !important;
font-style: italic;
}

.avia_desktop .avia-content-slider .avia-slideshow-arrows a {
opacity: 1;
color: #ffffff !important;
}

.avia-content-slider .slide-entry-title {
font-size: 18px !important;
color: #1177bb;
letter-spacing: normal !important;
}

.main_color input[type=’submit’] {
background-color: #FFC324;
color: #4a4a4a;
font-weight: bold !important;
text-transform: uppercase;
font-size: 16px !important;
border: none;
border-radius: 8px;
}

.main_color input[type=’submit’]:hover {
background-color: #F6CF6A;
border: none;
color: #4a4a4a;
}

#top .avia_ajax_form input[type=’text’], #top .avia_ajax_form input[type=’email’], #top .avia_ajax_form select, #top .avia_ajax_form textarea {
border: none !important;
background-color: #eeeeee !important;
}

#top .avia-logo-element-container .slide-entry-wrap {
text-align: center;
}

#top .avia-logo-element-container .slide-entry {
float: none;
display: inline-block;
}

.widgettitle { font-size: 24px; }

#footer {
border-top: 5px solid #1177bb;
}

#footer .flex_column.av_one_third:nth-child(1) {
width: 52%;
}

#footer .flex_column.av_one_third:nth-child(2) {
width: 25%;
}

#footer .flex_column.av_one_third:nth-child(3) {
width: 8%;
}

#footer .widget_pages ul li {
display: inline-block;
margin-right: 15px;
}

footer .menu a {
font-size: 13px;
text-transform: uppercase;
}