/* ========================================
   Info List Styles
   ======================================== */

.info-list {
    flex: 0 1 100vw;
    margin: 0;
}

/* Info List Item */
.info-list__item {
    display: flex;
    align-items: center;
    padding: 2vw 0;
    margin: 0;
    color: black;
    text-decoration: none;
    border-left: none;
    border-right: none;
    border-top: 0.3vw solid black;
    transition: background-color 0.3s, color 0.3s;
}

.info-list__item--first {
    border-top: none;
}

.info-list__item:hover {
    background-color: black;
    color: white;
}

.info-list__item:hover .info-list__date {
    border-right-color: white;
}

/* Info List Date */
.info-list__date {
    flex: 1;
    padding: 0 1vw;
    text-align: center;
    line-height: 6vw;
    font-size: 2vw;
    border-right: 0.3vw dotted black;
    transition: border-right-color 0.3s;
}

/* Info List Title */
.info-list__title {
    flex: 6;
    padding-left: 2vw;
    text-align: left;
    line-height: 6vw;
    font-size: 2vw;
}