.bg-option--container{
    display:flex;
    flex-wrap: wrap;
    gap:20px;
    align-items: center;
}
.bg-option{
    cursor:pointer;
    position: relative;
    border-radius:15px;
    overflow:hidden;
    border:4px solid transparent;
}
.bg-option:before{
    content:'';
    display:block;
    inset:0 0 0 0;
    position:absolute;
    background:rgba(0,0,0,0.2);
    opacity:0;
    z-index:1;
}
.bg-option:hover:before{
    opacity:1;
}
.bg-option--label{
    transform:scale(0) translate(-50%,0);
    transform-origin: bottom left;
    transition:0.3s transform cubic-bezier(0.3,0,0.3,1) 0.1s;
    color:white;
    font-weight:bold;
    position:absolute;
    top:50%;
    left:50%;
    white-space: nowrap;
    font-size:12px;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
    z-index:2;
}
.bg-option:hover .bg-option--label{
    transform:scale(1) translate(-50%,-50%);
}
.bg-option input{
    position:fixed;
    top:-100px;
    left:-100px;
}
.bg-option img{
    width:120px;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center;
    transition:0.4s transform cubic-bezier(0.3,0,0.3,1);
}
.bg-option:hover img{
    transform:scale(1.1);
}
.bg-option:is(.bg-option--selected,.bg-option--checked){
    border-color: rgb(55,190,255);
}
.bg-option:is(.bg-option--selected,.bg-option--checked) .bg-option--label{
    transform:scale(1) translate(-50%,-50%);
}
.bg-option:is(.bg-option--selected,.bg-option--checked) .bg-option--label:before{
    content:'✔ ';
}
.bg-option:is(.bg-option--selected,.bg-option--checked):before{
    opacity:1;
}
[for="bg-option--default-0"] .bg-option--label{
    transform: scale(1) translate(-50%, -50%);
}