#SubstanceUse .card-carousel {
    margin: 0 auto 0 auto;
    padding: 2rem 0 2rem 0;
    overflow-x: scroll;
    scrollbar-width: none;
    transition-duration: 500ms;
}

#SubstanceUse .cards {
    display: grid;
    grid-gap: 20px;
    grid-template-rows: 400px;
    grid-auto-flow: column;
    grid-auto-columns: 300px;
    scroll-snap-type: x proximity;
    list-style-type: none;
    padding-left: 0;
}

    #SubstanceUse .cards > li {
        scroll-snap-align: center;
        font-size: 16px;
        padding: 1rem;
        background: #EEEAE5;
        border-radius: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

#SubstanceUse .scroll-buttons button {
    font-size: 2rem;
    font-weight: bold;
    border: none;    
    margin: 0 10px 0 10px;
    padding: 0px 10px 0px 10px;
    border-radius: 50%;
    color: #6D9FB0;
    background-color: #DBEBE8;
}

#SubstanceUse .info-box {
    position: absolute;
    display: grid;
    grid-template-columns: auto auto;
    gap: 10px;
    top: 50%;
    transform: translateY(-50%);
    left: 10%;
    width: 40%;    
    padding: 1rem;
    background-color: white;
    border-radius: .75rem;
}
@media screen and (max-width:768px) {
    #SubstanceUse .info-box {
        width: calc(100vw - 50px);
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
}