.ps3-container{
    --ps3-side-gap:0px;
    width:calc(100% - (var(--ps3-side-gap) * 2));
    max-width:100%;
    margin:14px auto 0;
    box-sizing:border-box;
}

.ps3-row{
    display:flex;
    align-items:stretch;
    justify-content:space-between;
    flex-wrap:nowrap;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
}

.ps3-card{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    overflow:hidden !important;
    flex:1 1 0;
    aspect-ratio:auto;
    min-width:0;
    padding:0 !important;
    background:#fff !important;
    border-radius:14px;
    text-decoration:none;
    color:inherit;
    box-sizing:border-box;
    margin:0 !important;
    line-height:0;
    transition:transform .2s ease, filter .2s ease;
}

.ps3-rounded .ps3-card{
    border-radius:14px;
}

.ps3-square .ps3-card{
    border-radius:0 !important;
}

.ps3-rounded .ps3-body{
    border-radius:0 0 14px 14px;
}

.ps3-square .ps3-body{
    border-radius:0 !important;
}

.ps3-card:hover{
    transform:translateY(-2px);
    filter:saturate(1.04);
}

.ps3-media{
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:100%;
    aspect-ratio:1 / 1;
    flex:none;
    min-height:0;
    box-sizing:border-box;
    overflow:hidden;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    line-height:0;
    background:var(--ps3-card-bg, transparent) !important;
}

.ps3-rounded .ps3-media{
    border-radius:0;
}

.ps3-square .ps3-media{
    border-radius:0 !important;
}

.ps3-image-rounded .ps3-media{
    border-radius:14px !important;
}

.ps3-image-square .ps3-media{
    border-radius:0 !important;
}

.ps3-no-bg .ps3-media{
    background:transparent !important;
}

.ps3-image{
    display:block;
    width:90%;
    height:90%;
    object-position:center;
    border:0;
    max-width:100%;
    max-height:100%;
    pointer-events:none;
}

.ps3-fit-contain{
    object-fit:contain;
}

.ps3-fit-cover{
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    object-fit:cover;
}

.ps3-body{
    position:static;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    width:100%;
    min-height:86px;
    padding:18px 18px 16px;
    background:#fff;
    border-radius:0;
    box-sizing:border-box;
    box-shadow:inset 0 1px 0 rgba(0,0,0,.06);
}

.ps3-title{
    display:block;
    width:100%;
    color:#111;
    border-radius:0;
    font-size:14px;
    line-height:1.2;
    font-weight:800;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:0;
    word-break:break-word;
    box-sizing:border-box;
}

.ps3-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    max-width:100%;
    padding:8px 14px;
    background:#111;
    color:#fff;
    border-radius:6px;
    font-size:12px;
    line-height:1;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0;
    box-sizing:border-box;
}

.ps3-button-left{
    align-items:flex-start;
}

.ps3-button-center{
    align-items:center;
}

.ps3-button-right{
    align-items:flex-end;
}

@media (max-width:768px){
    .ps3-container{
        margin-top:14px;
    }

    .ps3-row{
        flex-direction:column;
        flex-wrap:nowrap;
    }

    .ps3-card{
        width:100%;
        flex:none;
        aspect-ratio:auto;
        padding:0;
    }

    .ps3-card:hover{
        transform:none;
    }

    .ps3-image{
        width:88%;
        height:88%;
        max-height:100%;
    }

    .ps3-title{
        font-size:14px;
    }

    .ps3-body{
        min-height:82px;
        padding:16px 14px 14px;
    }
}

@media (max-width:480px){
    .ps3-container{
        margin-top:10px;
    }

    .ps3-title{
        font-size:13px;
    }
}

@media (min-width:769px) and (max-width:1024px){
    .ps3-image{
        width:88%;
        height:88%;
    }
}