#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(45deg,#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 auto;
    grid-template-areas:
        "name photo"
        "qr   photo";
    gap:20px;
    padding:20px;
    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;
    position:relative;
    outline:none;
    cursor:default;
}

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

.pass-item-picture.no-picture:hover,
.pass-item-picture.no-picture:focus-visible{
    box-shadow:0 0 0 3px rgba(255,255,255,.35) inset, 0 0 0 2px rgba(0,0,0,.1);
}

.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-upload-btn {
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:4px;
    font-size:.65rem;
    font-weight:600;
    line-height:1.2;
    border-radius:12px;
    background:rgba(255,255,255,.85);
    border:none;
    color:#111;
    cursor:pointer;
}

.pass-item-picture:not(.no-picture) .pass-item-upload-btn{
    display:none;
}

.pass-item-upload-btn:hover,
.pass-item-upload-btn:focus-visible {
    background:#fff;
    outline:2px solid #fff;
    outline-offset:2px;
}

.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;
    }
    .pass-item-upload-btn{
        padding:8px 12px;
        font-size:.65rem;
    }
}

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