product-media-grid.product-media--grid-wrapper {
    position: relative
}

product-media-grid.product-media--grid-wrapper div[data-product-badge] {
    position: absolute;
    top: 5px;
    left: 5px;
    width: fit-content;
    max-width: 200px
}

@media (min-width:768px) {
    product-media-grid.product-media--grid-wrapper div[data-product-badge] {
        left: 15px;
        top: 15px
    }
}

product-media-grid.product-media--grid-wrapper div[data-product-badge] .custom-badge,
product-media-grid.product-media--grid-wrapper div[data-product-badge] .preorder-badge,
product-media-grid.product-media--grid-wrapper div[data-product-badge] .sale-badge,
product-media-grid.product-media--grid-wrapper div[data-product-badge] .sold-out-badge {
    position: relative;
    top: unset;
    left: unset;
    max-width: unset
}

product-media-grid.product-media--grid-wrapper [data-media-main] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

product-media-grid.product-media--grid-wrapper [data-media-main] .product-media--grid__item {
    width: 100%
}

product-media-grid.product-media--grid-wrapper [data-media-main] .media-column--even,
product-media-grid.product-media--grid-wrapper [data-media-main] .media-column--odd {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    width: calc(50% - 12px / 2)
}

product-media-grid.product-media--grid-wrapper [data-media-main] .media-column--even:has(.external-media-ratio--original),
product-media-grid.product-media--grid-wrapper [data-media-main] .media-column--even:has(.media-ratio--original),
product-media-grid.product-media--grid-wrapper [data-media-main] .media-column--odd:has(.external-media-ratio--original),
product-media-grid.product-media--grid-wrapper [data-media-main] .media-column--odd:has(.media-ratio--original) {
    height: fit-content
}

product-media-grid.product-media--grid-wrapper [data-media-main].custom-aspect-ratio .media-column--odd-full,
product-media-grid.product-media--grid-wrapper [data-media-main].media--single .media-column--odd-full {
    display: flex;
    height: fit-content;
    width: 100%
}

product-media-grid.product-media--grid-wrapper [data-media-main] .media-ratio--square,
product-media-grid.product-media--grid-wrapper [data-media-main] .media-ratio--tall,
product-media-grid.product-media--grid-wrapper [data-media-main] .media-ratio--wide {
    object-fit: cover
}

product-media-grid.product-media--grid-wrapper [data-media-main] .media-ratio--square {
    aspect-ratio: 1/1
}

product-media-grid.product-media--grid-wrapper [data-media-main] .media-ratio--tall {
    aspect-ratio: 2/3
}

product-media-grid.product-media--grid-wrapper [data-media-main] .media-ratio--wide {
    aspect-ratio: 4/3
}

product-media-grid.product-media--grid-wrapper [data-media-main] .media-ratio--adapt_to_first_image:not(.icon--placeholder) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

product-media-grid.product-media--grid-wrapper [data-media-main] a[data-main-media-link] {
    display: flex;
    height: fit-content;
    width: 100%;
    position: relative
}