.fan-club-benefits h3 {
    text-transform: uppercase;
    letter-spacing: .5rem;
    font-weight: 400;
    font-size: 3.8rem;
    margin: 0 0 5rem 0;
    text-align: center;
}
.fan-club-benefits h3 span {
    color: var(--accent-color);
}
.fan-club-benefits .benefits-grid {
    display: grid;
    grid-template-columns: 1fr 2.5fr;
    grid-gap: 5rem;
}
    .fan-club-benefits .benefits-grid img {
        max-width: 100%;
    }
    .fan-club-benefits .benefits-grid > div:nth-child(1) img {
        padding: 25px;
        background-color: #fff;
        box-shadow: 0 0 15px 10px #e2e2e2;
        border-radius: .2rem;
    }
    .fan-club-benefits .benefits-grid h5 {
        text-transform: uppercase;
        letter-spacing: .5rem;
        font-weight: 500;
        font-size: 2.0rem;
        margin-bottom: 1rem;
        color: #fff;
        background-color: var(--accent-color);
        padding: 1rem 2.5rem;
        box-shadow: 0 0 25px 10px #e2e2e2;
        border-radius: .2rem;
    }
    .fan-club-benefits .benefits-grid .benefit-item {
        font-size: 2rem;
        background-color: #fff;
        padding: 1rem 2.5rem;
        margin-bottom: 1rem;
        border-radius: .2rem;
    }
    .fan-club-benefits .benefits-grid .benefit-item p {
        margin: 0;
    }
        .fan-club-benefits .benefits-grid .benefit-item .benefit-item-grid {
            display: grid;
            grid-template-columns: 7rem 1fr;
            grid-gap: 3rem;
            align-items: center;
            transition: all .5s;
            cursor: pointer;
        }
            .fan-club-benefits .benefits-grid .benefit-item .benefit-item-grid.show-image {
                grid-template-columns: 100%;
            }
            .fan-club-benefits .benefits-grid .benefit-item .benefit-item-grid.show-image > div:nth-child(2) {
                text-align: center;
            }

.fan-club-benefits .join-link {
    margin: 1.5rem 0;
}
    .fan-club-benefits .join-link a {
        background-color: var(--main-color);
        color: #fff;
        padding: .75rem 2.5rem;
        box-shadow: 0 0 25px 10px #e2e2e2;
        border-radius: .2rem;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: .4rem;
        font-weight: 600;
        font-size: 2.0rem;
        display: block;
    }
        .fan-club-benefits .join-link a:hover {
            background-color: var(--main-color-hover);
            box-shadow: 0 0 25px 10px #e2e2e2;
        }

@media (max-width: 1024px) {
    .fan-club-benefits .benefits-grid {
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 3rem;
    }
    .fan-club-benefits .join-link a {
        font-size: 2.5rem;
    }
    .fan-club-benefits .benefits-grid h5 {
        font-size: 1.6rem;
        letter-spacing: .2rem;
    }
}
@media (max-width: 768px) {
    .fan-club-benefits .benefits-grid {
        grid-gap: 1rem;
    }
    .fan-club-benefits h3 {
        letter-spacing: .5rem;
        font-weight: 500;
        font-size: 2.8rem;
    }
    .fan-club-benefits .benefits-grid h5 {
        margin-bottom: 3rem;
    }
    .fan-club-benefits .benefits-grid {
        grid-template-columns: 1fr;
    }
        .fan-club-benefits .benefits-grid > div:nth-child(1) {
            order: 2;
        }
        .fan-club-benefits .benefits-grid > div:nth-child(2) {
            order: 1;
        }
            .fan-club-benefits .benefits-grid > div:nth-child(1) img {
                display: none;
            }

}
@media (max-width: 550px) {
    .fan-club-benefits h3 {
        letter-spacing: .4rem;
        font-weight: 500;
        font-size: 2.0rem;
    }
    .fan-club-benefits .benefits-grid h5 {
        font-size: 1.4rem;
        text-align: center;
    }
}