.three-by-one{
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.card.card--multi-link{
    &:hover, &:has(a.card__link-target:focus), &:has(a.tile__link-target:focus) {
         background-color: transparent;
    
    }
}

.card--full-width__body--img{
    /*The following ruleset for images in full-width should be added to global stylesheet once macro for cards is set up*/
    & img {
        object-fit: fill;
        max-width: 400px !important;
        height: 100% !important;
    }
    & .is-open, .is-closed{
        text-transform: uppercase;
        &::before{
            display: inline-block;
            border-radius: 100%;
        }
    }
    & ucsd-library-open-status{
        & span[class*="open-status-decorator-"]{
         width: .8rem;
         height: .8rem;
         margin-inline-end: .7rem;
        display: inline-block;
        border-radius: 100%;
        }
        & .open-status-decorator-open{
             background: #6E963B;
        }
         & .open-status-decorator-closed{
             background: #D462AD;
        }
         & .open-status-decorator-unavailable{
             background: #747678;
        }
        & .open-status{margin-block-start: 1rem;}
        & .open-status-text{text-transform: uppercase;}
    }
    & .is-open::before{
        content:'';
        width: .8rem;
        height: .8rem;
        background: #6E963B;
        margin-inline-end: .7rem;
    }
    & .is-closed::before{
        content:'';
        width: .8rem;
        height: .8rem;
        background: #D462AD;
        margin-inline-end: .7rem;
    }
}
.card--full-width{
    .card__body__content{
        address{margin-block-end: 0px;}
        & .address-container, .time-container{
            svg{color: var(--color-brand-core-blue, #00629B);
            width: 1.4rem;
            height: 1.4rem;
            margin-inline-end: .5rem;
            }
        }
    }
    a{display: inline-block;}
}
@media (width <= 755px){
    .card--full-width__body--img{
        & img{
            max-width: revert !important;
            width: 100%;
        }
    }
    .card, .grid > .card{
            margin-inline: auto;
            /*width: clamp(350px, 87vw, 500px);*/
    }
    .card--full-width__body--img{
            flex-direction: column;
    }
}