.device-card {
    transition: box-shadow .25s;
    cursor: pointer;
    display: inline-block;
    width: 15rem;
    transition: .25s ease all;
    max-width: 100%;
}

    .device-card.expanded {
        cursor: unset;
        display: block;
        width: 35rem;
        height: auto;
        transition: .25s ease all;
    }

        .device-card.expanded .card-body {
            overflow-y: auto;
            height: 30rem;
            transition: .25s ease all;
        }

    .device-card:hover {
        transition: all .25s;
    }

    .device-card.light:hover {
        box-shadow: 0px 0px 10px 0px rgb(25,25,25);
    }

    .device-card.dark:hover {
        box-shadow: 0px 0px 10px 0px rgb(150 150 150)
    }

    .device-card .card-body {
        font-size: 0.9rem;
        overflow: hidden;
        white-space: nowrap;
        transition: .25s ease all;
    }

        .device-card .card-body > div {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-column-gap: 2rem;
            transition: .25s ease all;
        }

    .device-card .expanded-visible {
        display: none;
    }

    .device-card.expanded .expanded-visible {
        display: unset;
    }

    .device-card.expanded .card-body > div {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        transition: .25s ease all;
    }

    .device-card.expanded .card-body {
        overflow-y: auto;
        grid-template-columns: 1fr 1fr;
        transition: .25s ease all;
    }

    .device-card .card-header {
        display: grid;
        grid-template-columns: auto 1fr auto;
        white-space: nowrap;
        align-content: start;
        user-select: none;
    }


    .device-card input[readonly] {
        cursor: default;
    }


@media (max-width: 641px) {
    .device-card {
        width: calc(50% - 1rem);
    }
}