@import 'tablet.css';

@media (min-width: 1250px) {

    .container {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        max-width: none;
        width: 1116px;
        flex-grow: 0;
    }

    .user {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 3;

        display: grid;
        grid-template-columns: 1fr;

        transition: background-color 0.8s, box-shadow 0.6s;
    }

    .user__info {
        grid-column-start: 1;
        grid-column-end: 3;

        height: 260.5px;
        padding: 32px;
        gap: 40px;

        flex-direction: column;
    }

    .user__info__details__name {
        font-size: 40px;
        font-weight: 300;
        line-height: 47px;
        letter-spacing: 0px;
    }

    .user__options {
        padding: 28px 32px;
        display: flex;
        flex-direction: column;
    }

    .user__options__item {
        text-align: start;
        display: flex;
        align-items: center;

        transition: transform 0.2s;
    }

    .card {
        transition: box-shadow 0.6s;
    }

    .card__info {
        padding: 31px 30px;
        gap: 24px;

        transition: background-color 0.6s;
    }

    .card__info__top__ellipsis {
        transition: transform 0.2s;
    }

    /* Active states */
    .card:hover .card__info {
        background-color: var(--navy800);
    }

    .card:hover {
        box-shadow: 0px 10px 30px #151d35;
    }

    .user:hover {
        background-color: var(--navy800);
        box-shadow: 0px 10px 30px #151d35;
    }
    
}