.o_attachments_previews {
    > .o_attachment {
        width: 50%;

        @include media-breakpoint-up(md) {
            width: percentage(1/3);
        }
        @include media-breakpoint-up(lg) {
            width: percentage(1/4);
        }
        @include media-breakpoint-up(xl) {
            width: percentage(1/6);
        }

        .o_attachment_wrap {
            padding: 0;
            border-radius: 2px;
            border: 1px solid gray('400');
        }

        .o_image_box {
            overflow: hidden;
            padding-top: 75%;

            .o_attachment_image {
                @include o-position-absolute(0, 0, 0, 0);
                background-size: cover;
                background-position: center;
                transform: scale(1.05);
                transition: all 0.3s ease 0s;
            }

            &:hover .o_attachment_image {
                transform: scale(1);
            }
        }

        .o_image_overlay {
            @include o-position-absolute($top: 0, $left: 0, $right:0, $bottom:0);
            @include o-hover-opacity($default-opacity: 0, $hover-opacity: 1);
            background-image: linear-gradient(180deg, rgba(black, 0.2), rgba(black, 0.9));
            transition: all 0.3s ease 0s;
            padding: 10px;

            .o_attachment_title {
                @include o-position-absolute($bottom: 7px);
                width: 80%;
                @include o-text-overflow(inline-block);
                font-size: $font-size-sm;
            }

            .o_attachment_delete_cross {
                color: white;
            }

            .o_attachment_download {
                @include o-position-absolute($right: 7px, $bottom:7px);
            }
        }
    }
}

.o_website_sale_image_list .o_kanban_view.o_kanban_ungrouped.o_attachments_previews {
    width: auto;

    .o_kanban_record.o_attachment.o_website_sale_image_card {
        border: none;
        background: none;
        margin: 0 0 $grid-gutter-width*0.2;
        padding: $o-attachment-margin;
        flex: 0 1 50%;

        @include media-breakpoint-up(md) {
            flex: 0 0 percentage(1/3);
        }

        @include media-breakpoint-up(lg) {
            flex: 0 0 percentage(1/5);
        }

        @include media-breakpoint-up(xl) {
            flex: 0 0 percentage(1/6);
        }

        .o_image_box {
            padding-top: 50%;

            @include media-breakpoint-up(md) {
                padding-top: 75%;
            }
        }

        .o_image_overlay {
            bottom: 16%;
            background: rgba(gray('900'), 0.2);
        }

        .o_website_sale_image_card_title {
            @include o-text-overflow(block);
            padding:6px;
            position: relative;
            background: gray('200');
            color:$headings-color;
        }

        .o_website_sale_image_card_remove, .o_website_sale_image_card_size {
            @include o-position-absolute(0, 0);
            border-radius: 0 2px;
        }

        .o_website_sale_image_card_size {
            left: 0;
            right: auto;
            border-radius: 0 0 2px;
            font-weight: normal;
            font-size: $font-size-sm - 1;

            &.label-normal {
                background-color: gray('200');
                color: $body-color;
            }
        }
    }
}

.o_website_sale_image_modal {
    .o_website_sale_image_modal_container {
        border-left: 1px solid gray('400');

        .o_field_image {
            margin-bottom: 0;
            box-shadow: 0 2px 10px gray('300');

            > img {
                border: 1px solid gray('400');
                min-height: 200px;
                max-height: 350px; // Fallback for browsers that dosn't support responsive units
                max-height: 50vh;
                width: auto;
            }

            .o_form_image_controls {
                @include o-hover-opacity(0.7, 1);
                padding: 2%;
            }
        }
    }
}
