.framed-image{
    position:relative;
    width:min(270px,100%);
    aspect-ratio:270/444;
}

@media (max-width: 767px) {
    .framed-image{
    aspect-ratio: 200 / 330;
    width: 100%;
    height: 330px;
    }
}

.framed-image.has-background::before{
    content:"";
    position:absolute;
    inset:0;
    background:var(--frame-bg,#04AA9C);
    border-radius:234px 234px 4px 4px;
    z-index:1;
}

.framed-image img{
    position:absolute;
    top:8px;
    left:8px;
    width:calc(100% + 8px);
    height:calc(100% - 16px);
    object-fit:cover;
    border-radius:234px 234px 4px 4px;
    z-index:2;
}



/* Rounded top corners*/
.framed-image.rounded-top::before{
    border-radius: 234px 234px 4px 4px;
}

.framed-image.rounded-top img{
    border-radius: 234px 234px 4px 4px;
}

/* Rounded bottom corners*/
.framed-image.rounded-bottom::before{
    border-radius: 4px 4px 234px 234px;
}

.framed-image.rounded-bottom img{
    border-radius: 4px 4px 234px 234px;
}

/* Rounded all corners*/
.framed-image.rounded-all::before{
    border-radius: 234px 234px 234px 234px;
}

.framed-image.rounded-all img{
    border-radius: 234px 234px 234px 234px;
}