#divMyPasses{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    margin:0;
    padding:0;
    list-style:none;
    justify-content:flex-start;
}

.portal-pass-item{
    width:300px;
    aspect-ratio:16/9;
    background:linear-gradient(135deg,#6d2e73,#009bb7);
    border-radius:12px;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-rows:auto 1fr auto;
    grid-template-areas:"name photo" ". photo" "qr photo";
    gap:12px;
    padding:12px;
    color:#fff;
    overflow:hidden;
    box-sizing:border-box;
    align-items:center;
}

.pass-item-info{display:contents;}

.pass-item-relation{
    grid-area:name;
    font-weight:700;
    font-size:1rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    align-self:start;
}

.pass-item-picture{
    grid-area:photo;
    display:flex;
    align-items:start;
    justify-content:end;
    width:60px;
    height:60px;
    border-radius:12px;
    overflow:hidden;
    cursor:default;
}

.pass-item-picture img,
.pass-item-picture i{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:8px;
}

.pass-item-picture i{
    font-size:1.5rem;
    opacity:.65;
    display:flex;
    align-items:center;
    justify-content:center;
}

.pass-item-picture.no-picture{
    position:relative;
    background:rgba(255,255,255,.15);
}

.pass-item-picture.no-picture::after{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:2rem;
    font-weight:600;
    color:#fff;
    text-shadow:0 0 3px rgba(0,0,0,.6);
    pointer-events:none;
}

.pass-item-picture.no-picture i{
    cursor:pointer;
}

.pass-item-scanCode{
    grid-area:qr;
    background:#fff;
    border-radius:12px;
    padding:8px;
    width:100px;
    height:100px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.pass-item-scanCode canvas,
.pass-item-scanCode img{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
}

.list .list-item{
    border-bottom:none;
    width:auto;
}

@media (max-width:900px){
    .portal-pass-item{
        aspect-ratio:unset;
        height:auto;
    }
}

@media (max-width:650px){
    #divMyPasses{
        flex-direction:column;
        gap:16px;
        padding:0;
    }
    .portal-pass-item{
        flex:0 0 auto;
        aspect-ratio:unset;
        height:auto;
    }
}

@media (max-width:520px){
    .portal-pass-item{
        aspect-ratio:unset;
        height:auto;
    }
}