.listing-frame
{
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 300px;
    height: auto;
}


.listing-frame-square {
    aspect-ratio: 1/1;

    @supports not (aspect-ratio: 1/1) {
        height: 0;
        padding-bottom: 100%;
    }
}

.listing-frame-vertical {
    aspect-ratio: 3/4;

    @supports not (aspect-ratio: 3/4) {
        height: 0;
        padding-bottom: 133.33%;
    }
}

.listing-frame-horizontal {
    aspect-ratio: 4/3;

    @supports not (aspect-ratio: 4/3) {
        height: 0;
        padding-bottom: 75%;
    }
}

.listing-frame > .img-block {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 12;
}

.listing-frame > .img-block img {
    max-width: 100%;
    max-height: 100%;
}

.listing-frame > .bg-block {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 13;
}

.listing-frame-square-1 {
    background-image: url("images/frame_square_1_bg.webp");
}

.listing-frame > .bg-block {
    filter: drop-shadow(0 0 5px black);
}

.listing-frame > .bg-block:hover {
    cursor: pointer;
    filter: drop-shadow(0 0 5px pink);
}

.listing-frame-square-1 > .bg-block {
    background-image: url("images/frame_square_1.webp");
}

.listing-frame-square-2 > .bg-block {
    background-image: url("images/frame_square_2.webp");
}

.listing-frame-square-3 > .bg-block {
    background-image: url("images/frame_square_3.webp");
}

.listing-frame-square-4 > .bg-block {
    background-image: url("images/frame_square_4.webp");
}

.listing-frame-square-5 > .bg-block {
    background-image: url("images/frame_square_5.webp");
}

.listing-frame-vertical-1 > .bg-block {
    background-image: url("images/frame_vertical_1.webp");
}

.listing-frame-vertical-2 > .bg-block {
    background-image: url("images/frame_vertical_2.webp");
}

.listing-frame-vertical-3 > .bg-block {
    background-image: url("images/frame_vertical_3.webp");
}

.listing-frame-vertical-4 > .bg-block {
    background-image: url("images/frame_vertical_4.webp");
}

.listing-frame-vertical-5 > .bg-block {
    background-image: url("images/frame_vertical_5.webp");
}

.listing-frame-horizontal-1 > .bg-block {
    background-image: url("images/frame_horizontal_1.webp");
}

.listing-frame-horizontal-2 > .bg-block {
    background-image: url("images/frame_horizontal_2.webp");
}

.listing-frame-horizontal-3 > .bg-block {
    background-image: url("images/frame_horizontal_3.webp");
}

.listing-frame-square-1 > .img-block > img {
    width: 62%;
    height: auto;
}

.listing-frame-square-2 > .img-block > img {
    width: 74%;
    height: auto;
}

.listing-frame-square-3 > .img-block > img {
    width: 78%;
    height: auto;
}

.listing-frame-square-4 > .img-block > img {
    width: 64%;
    height: auto;
}

.listing-frame-square-5 > .img-block > img {
    width: 64%;
    height: auto;
}

.listing-frame-vertical-1 > .img-block > img {
    width: auto;
    height: 89%;
}

.listing-frame-vertical-2 > .img-block > img {
    width: auto;
    height: 90%;
}

.listing-frame-vertical-3 > .img-block > img {
    width: auto;
    height: 74%;
}

.listing-frame-vertical-4 > .img-block > img {
    width: auto;
    height: 74%;
}

.listing-frame-vertical-5 > .img-block > img {
    width: auto;
    height: 75%;
}

.listing-frame-horizontal-1 > .img-block > img {
    width: 86%;
    height: auto;
}

.listing-frame-horizontal-2 > .img-block > img {
    width: 75%;
    height: auto;
}

.listing-frame-horizontal-3 > .img-block > img {
    width: 74%;
    height: auto;
}