section.location-list {
    padding: 50px 0;
}

h2.location-list__title {
    text-align: center;
    margin-bottom: 40px;
}

/*list*/
.location-list__items {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
}

.location-list__item {
    position: relative;
    flex: 1 0 20%;
    max-width: 23%;
}
a.location-list__link {
    position: relative;
    z-index: 1;

    display: block;
    width: 100%;
    padding: 15px 20px;
    padding-right: 60px;

    background: var(--color-sage);
    border: 2px solid var(--color-lightning);
    outline: 3px solid var(--color-sage);
    border-radius: 5px;

    text-align: center;
    font-family: "Lato", sans-serif;
    font-size: 22px;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-white);

    transition: all 0.3s ease;
}
a.location-list__link:hover {
    background: var(--color-white);
    color: var(--color-grass);
    outline: 3px solid var(--color-lightning);

    transition: all 0.3s ease;
}

.location-list__item .icon {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 0;
    transform: translateY(-50%) rotate(10deg);

    transition: all 0.3s ease;
}
a.location-list__link:hover .icon {
    transform: translateY(-80%) rotate(8deg);

    transition: all 0.3s ease;
}
.location-list__item .icon svg {
    height: 65px;
    width: auto;
    opacity: 0.8;

    transition: all 0.3s ease;
}
a.location-list__link:hover .icon svg {
    opacity: 1;

    transition: all 0.3s ease;
}
.location-list__item .icon svg path {
    fill: var(--color-grass);
    stroke: #fff;
    stroke-width: 30px;

    transition: all 0.3s ease;
}
a.location-list__link:hover .icon svg path {
    stroke-width: 45px;

    transition: all 0.3s ease;
}

@media (max-width: 992px) {
    .location-list__item {
        flex: 1 0 45%;
        max-width: 48%;
    }
}
@media (max-width: 576px) {
    .location-list__item {
        flex: 0 0 100%;
        max-width: 100%;
    }
}