@covet-pics/covet-pics-widget 0.165.0 → 0.165.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/covet-pics-gallery-grid_3.cjs.entry.js +3 -3
- package/dist/cjs/covet-pics-gallery-header_6.cjs.entry.js +1 -1
- package/dist/collection/components/covet-pics-gallery-grid/covet-pics-gallery-grid.js +3 -3
- package/dist/collection/components/covet-pics-gallery-item/covet-pics-gallery-item.css +1 -0
- package/dist/collection/components/covet-pics-widget/test/test-gallery-data.js +1179 -1179
- package/dist/covet-pics-widget/covet-pics-widget.esm.js +1 -1
- package/dist/covet-pics-widget/{p-fa9df791.entry.js → p-3274366d.entry.js} +1 -1
- package/dist/covet-pics-widget/p-70d0fae1.entry.js +28 -0
- package/dist/esm/covet-pics-gallery-grid_3.entry.js +3 -3
- package/dist/esm/covet-pics-gallery-header_6.entry.js +1 -1
- package/dist/types/components/covet-pics-widget/test/test-gallery-data.d.ts +1176 -1176
- package/package.json +1 -1
- package/dist/covet-pics-widget/p-c93402b4.entry.js +0 -28
|
@@ -3769,10 +3769,10 @@ const CovetPicsGalleryGrid = class {
|
|
|
3769
3769
|
: `post created ${utils$1.getDateFromTimestamp(createdTime)}`;
|
|
3770
3770
|
}
|
|
3771
3771
|
renderStandardItem(item, idx, itemsLength) {
|
|
3772
|
-
return (index.h("covet-pics-gallery-item", { class: { "grid-item": this.layout === "grid", "collage-item": this.layout === "collage" }, highlighted: this.isHighlighted(idx), "image-url": utils$1.getCoverImage(item.cover_images.medium_resolution, item.images.medium_resolution), "image-high-resolution-url": utils$1.getCoverImage(item.cover_images.high_resolution, item.images.high_resolution), "image-responsive-sizes": utils$1.getSizesForResponsiveImage(this.settings.gallery_photos_per_row, this.settings.gallery_mobile_photos_per_row, this.isHighlighted(idx)), "item-id": item.id, "item-source": item.source, "item-index": idx, caption: item.caption, "item-type": item.data_type, links: item.links, url: item.url, rating: item.rating !== null ? item.rating : 0, "user-name": item.username, "created-time": item.created_time, role: "listitem", "aria-label": `${this.layout}-item ${idx + 1}/${itemsLength}`, "alt-tag": this.itemImgAltTag(item.alt_tag, item.caption, item.created_time), appStore: this.appStore }));
|
|
3772
|
+
return (index.h("covet-pics-gallery-item", { class: { "grid-item": this.layout === "grid", "collage-item": this.layout === "collage" }, highlighted: this.isHighlighted(idx), "image-url": utils$1.getCoverImage(item.cover_images.medium_resolution, item.images.medium_resolution), "image-high-resolution-url": utils$1.getCoverImage(item.cover_images.high_resolution, item.images.high_resolution), "image-responsive-sizes": utils$1.getSizesForResponsiveImage(this.settings.gallery_photos_per_row, this.settings.gallery_mobile_photos_per_row, this.isHighlighted(idx)), "item-id": item.id, "item-source": item.source, "item-index": idx, "item-size": this.itemSize, caption: item.caption, "item-type": item.data_type, links: item.links, url: item.url, rating: item.rating !== null ? item.rating : 0, "user-name": item.username, "created-time": item.created_time, role: "listitem", "aria-label": `${this.layout}-item ${idx + 1}/${itemsLength}`, "alt-tag": this.itemImgAltTag(item.alt_tag, item.caption, item.created_time), appStore: this.appStore }));
|
|
3773
3773
|
}
|
|
3774
3774
|
renderStandardUploadItem(item, idx, itemsLength) {
|
|
3775
|
-
return index.h("covet-pics-gallery-item", { class: { "grid-item": this.layout === "grid", "collage-item": this.layout === "collage", "highlighted": this.isHighlighted(idx) }, "image-url": item.imageUrl, "item-source": item.source, "item-index": idx, appStore: this.appStore, "aria-label": `click on for upload image in gallery, ${this.layout}-item ${idx + 1}/${itemsLength},`, role: "listitem" });
|
|
3775
|
+
return index.h("covet-pics-gallery-item", { class: { "grid-item": this.layout === "grid", "collage-item": this.layout === "collage", "highlighted": this.isHighlighted(idx) }, "image-url": item.imageUrl, "item-source": item.source, "item-index": idx, "item-size": this.itemSize, appStore: this.appStore, "aria-label": `click on for upload image in gallery, ${this.layout}-item ${idx + 1}/${itemsLength},`, role: "listitem" });
|
|
3776
3776
|
}
|
|
3777
3777
|
renderDetailUploadItem(item, idx, itemsLength) {
|
|
3778
3778
|
return index.h("covet-pics-gallery-item-detail", { class: { "grid-item": this.layout === "grid", "collage-item": this.layout === "collage", "highlighted": this.isHighlighted(idx) }, "image-url": item.imageUrl, "item-source": item.source, "item-index": idx, "item-size": this.itemSize, appStore: this.appStore, "aria-label": `click on for upload image in gallery, ${this.layout}-item ${idx + 1}/${itemsLength},`, role: "listitem" });
|
|
@@ -3806,7 +3806,7 @@ const CovetPicsGalleryGrid = class {
|
|
|
3806
3806
|
return cssVars;
|
|
3807
3807
|
}
|
|
3808
3808
|
render() {
|
|
3809
|
-
return (index.h(index.Host, { key: '
|
|
3809
|
+
return (index.h(index.Host, { key: '908c4fa5542aa5945dc83ee26ffd36f642088b5d', role: "region", style: this.setCSSVariables() }, this.settings.show_header && this.renderHeader(), this.filtersEnabled && ["style_1", "style_2"].includes(this.settings.tags_style) && this.renderStandardFilters(), this.filtersEnabled && ["style_3", "style_4"].includes(this.settings.tags_style) && this.renderModalFilters(), index.h("div", { key: '2bfff46761460e385a9749031607d62ca98fdf89', class: `gallery ${this.layout}`, role: "list", "aria-label": `gallery of ${this.items.length} items` }, this.layout === "collage" && index.h("div", { key: '5a1eff3c7da0d71a84838b62a2756da7048158f3', class: "grid-sizer" }), this.layout === "collage" && index.h("div", { key: '06974019ad5c2985f7b1725b92cbd42c3c258921', class: "gutter-sizer" }), this.settings.item_style === "standard" && this.items.map((item, idx) => item.source === "upload_widget"
|
|
3810
3810
|
? this.renderStandardUploadItem(item, idx, this.items.length)
|
|
3811
3811
|
: this.renderStandardItem(item, idx, this.items.length)), this.settings.item_style !== "standard" && this.items.map((item, idx) => item.source === "upload_widget"
|
|
3812
3812
|
? this.renderDetailUploadItem(item, idx, this.items.length)
|
|
@@ -172,7 +172,7 @@ const standardRatio = [
|
|
|
172
172
|
{ size: 16, lines: 5 }
|
|
173
173
|
];
|
|
174
174
|
|
|
175
|
-
const covetPicsGalleryItemCss = "covet-pics-gallery-item {\n --covet-item-label-font-size: var(--covet-custom-item-label-font-size, var(--covet-internal-item-label-font-size));\n --covet-item-label-font-style: var(--covet-custom-item-label-font-style, var(--covet-internal-item-label-font-style));\n --covet-item-label-letter-spacing: var(--covet-custom-item-label-letter-spacing, normal);\n --covet-item-animation-duration: var(--covet-custom-item-animation-duration, var(--covet-internal-item-animation-duration));\n --covet-item-animation-duration-base: var(--covet-custom-item-animation-duration-base, var(--covet-internal-item-animation-duration-base));\n --covet-item-label-color: var(--covet-custom-item-label-color, var(--covet-internal-item-label-color));\n --covet-item-hover-border-color: var(--covet-custom-item-hover-border-color, var(--covet-internal-item-hover-border-color));\n --covet-item-hover-color-to: var(--covet-custom-item-hover-color-to, var(--covet-internal-item-hover-color-to));\n --covet-item-hover-color-from: var(--covet-custom-item-hover-color-from, var(--covet-internal-item-hover-color-from));\n --covet-item-hover-bg-opacity: var(--covet-custom-item-hover-bg-opacity, var(--covet-internal-item-hover-bg-opacity));\n}\n\ncovet-pics-gallery-item.hover-preview .bg {\n transform: scale(1.2);\n}\ncovet-pics-gallery-item.hover-preview .overlay-effect {\n display: block;\n}\ncovet-pics-gallery-item.hover-preview .info {\n opacity: 1;\n}\ncovet-pics-gallery-item.hover-preview .info .item-open-icon {\n z-index: 4;\n opacity: 1;\n}\ncovet-pics-gallery-item.hover-preview .hover {\n display: block;\n visibility: visible;\n}\n\ncovet-pics-gallery-item.hover-animation .btn-item-wrap:hover .bg, covet-pics-gallery-item.hover-animation .btn-item-wrap:active .bg, covet-pics-gallery-item.hover-animation .btn-item-wrap:focus .bg {\n transform: scale(1.2);\n}\ncovet-pics-gallery-item.hover-animation .btn-item-wrap:hover .overlay-effect, covet-pics-gallery-item.hover-animation .btn-item-wrap:active .overlay-effect, covet-pics-gallery-item.hover-animation .btn-item-wrap:focus .overlay-effect {\n display: block;\n}\ncovet-pics-gallery-item.hover-animation .btn-item-wrap:hover .info, covet-pics-gallery-item.hover-animation .btn-item-wrap:active .info, covet-pics-gallery-item.hover-animation .btn-item-wrap:focus .info {\n opacity: 1;\n}\ncovet-pics-gallery-item.hover-animation .btn-item-wrap:hover .info .item-open-icon, covet-pics-gallery-item.hover-animation .btn-item-wrap:active .info .item-open-icon, covet-pics-gallery-item.hover-animation .btn-item-wrap:focus .info .item-open-icon {\n z-index: 4;\n opacity: 1;\n}\ncovet-pics-gallery-item.hover-animation .btn-item-wrap:hover .hover, covet-pics-gallery-item.hover-animation .btn-item-wrap:active .hover, covet-pics-gallery-item.hover-animation .btn-item-wrap:focus .hover {\n display: block;\n visibility: visible;\n}\n\ncovet-pics-gallery-item.no-animation:hover .bg, covet-pics-gallery-item.no-animation:active .bg, covet-pics-gallery-item.no-animation:focus .bg {\n transform: none;\n}\ncovet-pics-gallery-item.no-animation:hover .btn-item-wrap .bg, covet-pics-gallery-item.no-animation:active .btn-item-wrap .bg, covet-pics-gallery-item.no-animation:focus .btn-item-wrap .bg {\n transform: none;\n}\n\ncovet-pics-gallery-item {\n outline: none !important;\n cursor: pointer;\n display: inline-block;\n overflow: hidden;\n position: relative;\n container-name: covet-pics-gallery-item;\n container-type: inline-size;\n}\ncovet-pics-gallery-item[is-loading] {\n background-image: linear-gradient(120deg, #DFE3E8, #F9FAFB);\n animation: pulsate 2s ease-in-out infinite;\n}\ncovet-pics-gallery-item[is-loading] img {\n color: transparent;\n}\ncovet-pics-gallery-item[is-loading] .btn-item-wrap {\n position: relative;\n}\ncovet-pics-gallery-item[is-loading] .btn-item-wrap:after {\n content: \"\";\n display: block;\n position: relative;\n bottom: 0;\n width: 1px;\n height: 0;\n padding-top: 100%;\n visibility: hidden;\n}\ncovet-pics-gallery-item.text-review .btn-item-wrap, covet-pics-gallery-item.star-only .btn-item-wrap, covet-pics-gallery-item.grid-item .btn-item-wrap, covet-pics-gallery-item.swiper-slide .btn-item-wrap {\n position: relative;\n}\ncovet-pics-gallery-item.text-review .btn-item-wrap:after, covet-pics-gallery-item.star-only .btn-item-wrap:after, covet-pics-gallery-item.grid-item .btn-item-wrap:after, covet-pics-gallery-item.swiper-slide .btn-item-wrap:after {\n content: \"\";\n display: block;\n position: relative;\n bottom: 0;\n width: 1px;\n height: 0;\n padding-top: 100%;\n visibility: hidden;\n}\ncovet-pics-gallery-item.upload-widget {\n position: relative;\n animation: none;\n}\ncovet-pics-gallery-item.upload-widget:after {\n content: \"\";\n display: block;\n position: relative;\n bottom: 0;\n width: 1px;\n height: 0;\n padding-top: 100%;\n visibility: hidden;\n}\ncovet-pics-gallery-item.upload-widget.collage-item {\n position: absolute;\n}\ncovet-pics-gallery-item.grid-item {\n width: 100%;\n display: flex;\n margin-bottom: calc(var(--covet-mobile-grid-space) * 1%);\n}\ncovet-pics-gallery-item.grid-item.highlighted {\n grid-column-end: span 2;\n grid-row-end: span 2;\n width: 100%;\n margin-bottom: calc(var(--covet-mobile-grid-space) * 1% * var(--covet-mobile-item-width) / var(--covet-mobile-highlighted-width));\n}\ncovet-pics-gallery-item.collage-item {\n margin-bottom: calc(var(--covet-mobile-item-padding) * 1%);\n width: calc(var(--covet-mobile-item-width) * 1%);\n}\ncovet-pics-gallery-item .btn-item-wrap {\n outline: none !important;\n border: none;\n display: block;\n width: 100%;\n height: 100%;\n background-color: transparent;\n overflow: hidden;\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n position: relative;\n cursor: pointer;\n font-family: var(--covet-font-family);\n}\ncovet-pics-gallery-item .btn-item-wrap.no-click {\n cursor: auto;\n}\n@media only screen and (min-width: 800px) {\n covet-pics-gallery-item {\n margin-bottom: calc(var(--covet-desktop-grid-space) * 1%);\n }\n covet-pics-gallery-item.grid-item {\n margin-bottom: calc(var(--covet-desktop-grid-space) * 1%);\n }\n covet-pics-gallery-item.grid-item.highlighted {\n margin-bottom: calc(var(--covet-desktop-grid-space) * 1% * var(--covet-desktop-item-width) / var(--covet-desktop-highlighted-width));\n }\n covet-pics-gallery-item.collage-item {\n width: calc(var(--covet-desktop-item-width) * 1%);\n margin-bottom: calc(var(--covet-desktop-item-padding) * 1%);\n }\n}\ncovet-pics-gallery-item video {\n background: rgba(145, 158, 171, 0.1);\n}\ncovet-pics-gallery-item video.bg {\n background-image: url(asset_path(\"icon-video-play.svg\"));\n background-position: 50% 50%;\n background-size: 40%;\n}\ncovet-pics-gallery-item:hover .bg, covet-pics-gallery-item:active .bg, covet-pics-gallery-item:focus .bg {\n transform: scale(1.2);\n transition: all var(--covet-item-animation-duration) cubic-bezier(0.39, 0.575, 0.565, 1);\n}\ncovet-pics-gallery-item .bg {\n -o-object-fit: cover;\n object-fit: cover;\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 2;\n transition: all 0.35s cubic-bezier(0.39, 0.575, 0.565, 1);\n display: block;\n top: 0;\n left: 0;\n}\n.collage covet-pics-gallery-item .bg {\n position: relative;\n max-width: 100%;\n}\ncovet-pics-gallery-item .star-wrap {\n display: flex;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n}\ncovet-pics-gallery-item .btn {\n display: inline-block;\n margin-top: 15px;\n font-weight: bold;\n font-size: 13px;\n padding: 0px;\n position: relative;\n margin: 0 auto;\n overflow: hidden;\n font-weight: var(--covet-item-label-font-style);\n font-size: var(--covet-item-label-font-size);\n color: var(--covet-item-label-color);\n letter-spacing: var(--covet-item-label-letter-spacing);\n}\ncovet-pics-gallery-item .btn::after {\n background: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item .overlay-effect {\n display: none;\n position: absolute;\n width: 100%;\n height: 100%;\n content: \"\";\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n opacity: 0;\n z-index: 3;\n opacity: var(--covet-item-hover-bg-opacity);\n background: linear-gradient(to bottom right, var(--covet-item-hover-color-from), var(--covet-item-hover-color-to));\n transition: all 0.35s cubic-bezier(0.39, 0.575, 0.565, 1);\n}\ncovet-pics-gallery-item .info {\n color: #fff;\n transform: translateY(-50%);\n font-size: 11px;\n padding: 10px;\n position: absolute;\n left: 0;\n right: 0;\n text-align: center;\n z-index: 4;\n opacity: 0;\n transition: top 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);\n top: 53%;\n display: none;\n}\ncovet-pics-gallery-item .item-open-icon {\n width: calc(var(--covet-item-label-font-size) + 5px);\n height: calc(var(--covet-item-label-font-size) + 5px);\n margin: 0 auto;\n top: 0;\n right: 0;\n transition: all 0.25s;\n}\ncovet-pics-gallery-item .item-open-icon path {\n fill: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item .item-open-icon circle {\n fill: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item .hover {\n display: block;\n visibility: hidden;\n}\ncovet-pics-gallery-item.no-animation .bg, covet-pics-gallery-item.no-animation:hover .bg {\n transform: none;\n transition: none;\n}\n\n@media (any-hover: none) {\n covet-pics-gallery-item.hover-animation:hover .hover,\n covet-pics-gallery-item.hover-animation:focus .hover,\n covet-pics-gallery-item.hover-animation:active .hover,\n covet-pics-gallery-item.hover-preview .hover {\n display: none;\n visibility: hidden;\n }\n covet-pics-gallery-item.hover-animation:hover .overlay-effect,\n covet-pics-gallery-item.hover-animation:focus .overlay-effect,\n covet-pics-gallery-item.hover-animation:active .overlay-effect,\n covet-pics-gallery-item.hover-preview .overlay-effect {\n display: none;\n }\n covet-pics-gallery-item.hover-animation:hover .bg,\n covet-pics-gallery-item.hover-animation:focus .bg,\n covet-pics-gallery-item.hover-animation:active .bg,\n covet-pics-gallery-item.hover-preview .bg {\n transition: none;\n transform: none;\n }\n}\n@keyframes pulsate {\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: 0.3;\n }\n 100% {\n opacity: 1;\n }\n}\n.upload-widget {\n cursor: pointer;\n background-color: #FCFDFF;\n outline: none !important;\n}\n@media (any-hover: hover) {\n .upload-widget:hover .default-cover, .upload-widget:hover .custom-img-wrap, .upload-widget:active .default-cover, .upload-widget:active .custom-img-wrap, .upload-widget:focus .default-cover, .upload-widget:focus .custom-img-wrap {\n transform: scale(1.05);\n }\n}\n@media (any-hover: none) {\n .upload-widget .default-cover, .upload-widget .custom-img-wrap {\n transform: scale(1.05);\n }\n}\n.upload-widget.no-animation .default-cover {\n transform: translateY(0);\n}\n@media (any-hover: hover) {\n .upload-widget.no-animation:hover .default-cover, .upload-widget.no-animation:hover .custom-img-wrap, .upload-widget.no-animation:active .default-cover, .upload-widget.no-animation:active .custom-img-wrap, .upload-widget.no-animation:focus .default-cover, .upload-widget.no-animation:focus .custom-img-wrap {\n transform: scale(1);\n }\n}\n@media (any-hover: none) {\n .upload-widget.no-animation .default-cover, .upload-widget.no-animation .custom-img-wrap {\n transform: scale(1);\n }\n}\n.upload-widget .info {\n top: 50%;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 1;\n padding: 0;\n width: 100%;\n height: 100%;\n}\n.upload-widget .default-cover {\n display: flex;\n flex-direction: column;\n align-items: center;\n transform: translateY(5px);\n transition: all 0.25s ease-out;\n margin: 24px;\n position: relative;\n}\n@media only screen and (max-width: 799.98px) {\n .upload-widget .default-cover {\n margin: 16px;\n }\n}\n.upload-widget .custom-img-wrap {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n position: relative;\n transition: all 0.25s ease-out;\n box-sizing: border-box;\n overflow: hidden;\n}\n.upload-widget .svg-plus {\n width: 48px;\n height: 48px;\n}\n@media only screen and (max-width: 799.98px) {\n .upload-widget .svg-plus {\n width: 40px;\n height: 40px;\n }\n}\n.upload-widget .btn {\n font-weight: normal;\n font-size: 12.8px;\n color: #464858;\n text-decoration: none;\n margin-top: 24px;\n border: none;\n text-transform: uppercase;\n overflow: hidden;\n text-align: center;\n line-height: 17.92px;\n max-height: 35.84px;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n}\n.upload-widget .img {\n width: 100%;\n}\n\ncovet-pics-gallery-item.hover-animation-1.text-review {\n display: block;\n}\ncovet-pics-gallery-item.hover-animation-1 .info {\n text-align: center;\n top: 50%;\n visibility: visible;\n transform: translateY(calc(-50% + 10px));\n transition: all var(--covet-item-animation-duration-base) ease-out;\n z-index: 5;\n}\ncovet-pics-gallery-item.hover-animation-1 .info .btn {\n padding-bottom: 6px;\n}\ncovet-pics-gallery-item.hover-animation-1 .info .btn:after {\n transition: width calc(var(--covet-item-animation-duration-base) * 3.5 / 5) ease-out;\n content: \"\";\n display: block;\n position: absolute;\n left: 0;\n bottom: 0;\n width: 0;\n height: 1px;\n}\ncovet-pics-gallery-item.hover-animation-1 .description {\n position: absolute;\n box-sizing: border-box;\n overflow: hidden;\n display: flex;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n padding: 32px;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-gallery-item.hover-animation-1 .description {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-gallery-item.hover-animation-1 .description.size-xs {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-gallery-item.hover-animation-1 .description {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-gallery-item.hover-animation-1 .description.size-sm {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n}\ncovet-pics-gallery-item.hover-animation-1 .caption {\n position: relative;\n text-align: center;\n width: 100%;\n height: 100%;\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n font-size: var(--covet-item-detail-caption-font-size);\n line-height: 1.4;\n max-height: var(--covet-item-detail-caption-max-height);\n -webkit-line-clamp: var(--covet-item-detail-caption-max-lines);\n margin: auto;\n white-space: pre-line;\n}\ncovet-pics-gallery-item.hover-animation-1 .item-open-icon {\n margin-bottom: 12px;\n display: block;\n visibility: hidden;\n}\ncovet-pics-gallery-item.hover-animation-1 .rating {\n position: absolute;\n z-index: 4;\n opacity: 0;\n display: flex;\n align-items: center;\n top: 0;\n left: 50%;\n transform: translate(-50%, 30px);\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-1 .rating.text-review {\n transform: translate(-50%, 20px);\n opacity: 1;\n}\ncovet-pics-gallery-item.hover-animation-1 .icon-star {\n width: 10px;\n height: 10px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\ncovet-pics-gallery-item.hover-animation-1 .svg-star {\n width: 100%;\n height: 100%;\n}\ncovet-pics-gallery-item.hover-animation-1 .svg-star path {\n fill: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-1 .svg-star.text-review path {\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n fill: #000000;\n}\ncovet-pics-gallery-item.hover-animation-1 .rating-data {\n line-height: 1.4;\n font-size: 14px;\n margin-left: 4px;\n color: var(--covet-item-label-color);\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-1 .rating-data.text-review {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-1 .name-data {\n z-index: 4;\n box-sizing: border-box;\n overflow: hidden;\n position: absolute;\n bottom: 0;\n left: 50%;\n opacity: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n max-width: calc(100% - 40px);\n width: 100%;\n transform: translate(-50%, -10px);\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-1 .name-data.text-review {\n transform: translate(-50%, -20px);\n opacity: 1;\n}\ncovet-pics-gallery-item.hover-animation-1 .name-data.star-only {\n transform: translate(-50%, -20px);\n opacity: 1;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-gallery-item.hover-animation-1 .name-data:not(.text-review), covet-pics-gallery-item.hover-animation-1 .name-data:not(.star-only) {\n display: none;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-gallery-item.hover-animation-1 .name-data:not(.text-review).size-xs, covet-pics-gallery-item.hover-animation-1 .name-data:not(.star-only).size-xs {\n display: none;\n }\n}\ncovet-pics-gallery-item.hover-animation-1 .username {\n line-height: 1.4;\n font-size: 14px;\n color: var(--covet-item-label-color);\n margin: 0;\n font-weight: 400;\n max-width: calc((100% - 16px) / 2);\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-1 .username.text-review {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-1 .username.star-only {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-1 .slash {\n font-size: 14px;\n color: var(--covet-item-label-color);\n margin-left: 2px;\n margin-right: 2px;\n font-weight: 400;\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-1 .slash.text-review {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-1 .slash.star-only {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-1 .created-time {\n display: block;\n font-size: 14px;\n line-height: 1.4;\n max-width: calc((100% - 16px) / 2);\n color: var(--covet-item-label-color);\n font-weight: 400;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-1 .created-time.text-review {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-1 .created-time.star-only {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-1 .overlay-effect.text-review {\n display: block;\n opacity: 0;\n transition: all var(--covet-item-animation-duration-base) ease-out;\n}\n\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .info, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .info, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .info, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .info {\n transform: translateY(-50%);\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .btn:after, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .btn:after, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .btn:after, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .btn:after {\n width: 100%;\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .item-open-icon, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .item-open-icon, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .item-open-icon, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .item-open-icon {\n visibility: visible;\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .info .btn, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .info .btn, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .info .btn, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .info .btn {\n border-bottom-width: 1px;\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .rating, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .rating, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .rating, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .rating {\n opacity: 1;\n transform: translate(-50%, 20px);\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .name-data, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .name-data, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .name-data, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .name-data {\n opacity: 1;\n transform: translate(-50%, -20px);\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .overlay-effect.text-review, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .overlay-effect.text-review, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .overlay-effect.text-review, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .overlay-effect.text-review {\n background: var(--covet-item-hover-color-to);\n opacity: 1;\n z-index: 3;\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .svg-star.text-review path, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .svg-star.text-review path, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .svg-star.text-review path, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .svg-star.text-review path {\n fill: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .svg-star.hover-disabled path, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .svg-star.hover-disabled path, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .svg-star.hover-disabled path, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .svg-star.hover-disabled path {\n fill: #000000;\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .rating-data.text-review, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .rating-data.text-review, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .rating-data.text-review, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .rating-data.text-review {\n color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .rating-data.star-only, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .rating-data.star-only, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .rating-data.star-only, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .rating-data.star-only {\n color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .rating-data.hover-disabled, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .rating-data.hover-disabled, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .rating-data.hover-disabled, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .rating-data.hover-disabled {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .username.text-review, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .username.text-review, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .username.text-review, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .username.text-review {\n color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .username.star-only, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .username.star-only, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .username.star-only, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .username.star-only {\n color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .username.hover-disabled, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .username.hover-disabled, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .username.hover-disabled, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .username.hover-disabled {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .slash.text-review, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .slash.text-review, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .slash.text-review, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .slash.text-review {\n color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .slash.star-only, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .slash.star-only, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .slash.star-only, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .slash.star-only {\n color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .slash.hover-disabled, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .slash.hover-disabled, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .slash.hover-disabled, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .slash.hover-disabled {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .created-time.text-review, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .created-time.text-review, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .created-time.text-review, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .created-time.text-review {\n color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .created-time.star-only, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .created-time.star-only, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .created-time.star-only, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .created-time.star-only {\n color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .created-time.hover-disabled, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .created-time.hover-disabled, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .created-time.hover-disabled, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .created-time.hover-disabled {\n color: #000000;\n}\n\ncovet-pics-gallery-item.hover-animation-2 .info {\n transform: none;\n text-align: left;\n bottom: 35px;\n padding: 0;\n top: auto;\n right: auto;\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) cubic-bezier(0.39, 0.575, 0.565, 1);\n z-index: 5;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-gallery-item.hover-animation-2 .info {\n left: 0;\n bottom: 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-gallery-item.hover-animation-2 .info.size-xs {\n left: 0;\n bottom: 16px;\n }\n}\ncovet-pics-gallery-item.hover-animation-2 .info .btn {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n padding-top: 35px;\n}\ncovet-pics-gallery-item.hover-animation-2 .info .btn .icon-arrow {\n margin-bottom: 8px;\n}\ncovet-pics-gallery-item.hover-animation-2 .info .btn .dynamic-fill {\n fill: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-2 .description {\n position: absolute;\n box-sizing: border-box;\n display: flex;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n padding: 32px;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-gallery-item.hover-animation-2 .description {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-gallery-item.hover-animation-2 .description.size-xs {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-gallery-item.hover-animation-2 .description {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-gallery-item.hover-animation-2 .description.size-sm {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n}\ncovet-pics-gallery-item.hover-animation-2 .caption {\n text-align: center;\n width: 100%;\n position: relative;\n text-align: center;\n width: 100%;\n height: 100%;\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n font-size: var(--covet-item-detail-caption-font-size);\n line-height: 1.4;\n max-height: var(--covet-item-detail-caption-max-height);\n -webkit-line-clamp: var(--covet-item-detail-caption-max-lines);\n margin: auto;\n white-space: pre-line;\n}\ncovet-pics-gallery-item.hover-animation-2 .item-open-icon {\n position: absolute;\n z-index: 4;\n right: 0;\n margin: 18px 18px;\n visibility: hidden;\n opacity: 0;\n}\ncovet-pics-gallery-item.hover-animation-2 .rating {\n position: absolute;\n z-index: 4;\n opacity: 0;\n display: flex;\n align-items: center;\n top: 0;\n right: 0;\n transform: translate(-80px, 30px);\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-gallery-item.hover-animation-2 .rating {\n left: 0;\n transform: translateY(16px);\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-gallery-item.hover-animation-2 .rating.size-xs {\n left: 0;\n transform: translateY(16px);\n }\n}\ncovet-pics-gallery-item.hover-animation-2 .rating.text-review {\n transform: translate(-40px, 32px);\n opacity: 1;\n}\ncovet-pics-gallery-item.hover-animation-2 .icon-star {\n width: 10px;\n height: 10px;\n display: flex;\n}\ncovet-pics-gallery-item.hover-animation-2 .svg-star {\n width: 100%;\n height: 100%;\n}\ncovet-pics-gallery-item.hover-animation-2 .svg-star path {\n fill: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-2 .svg-star.text-review path {\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n fill: #000000;\n}\ncovet-pics-gallery-item.hover-animation-2 .rating-data {\n line-height: 1.4;\n font-size: 14px;\n margin-left: 4px;\n color: var(--covet-item-label-color);\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-2 .rating-data.text-review {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-2 .rating-data.star-only {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-2 .name-data {\n z-index: 4;\n box-sizing: border-box;\n overflow: hidden;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n display: flex;\n align-items: center;\n max-width: calc(100% - 80px - 22px);\n width: 100%;\n transform: translateY(30px);\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n padding-right: 3px;\n}\ncovet-pics-gallery-item.hover-animation-2 .name-data.text-review {\n transform: translate(40px, 30px);\n opacity: 1;\n}\ncovet-pics-gallery-item.hover-animation-2 .name-data.star-only {\n transform: translate(40px, 30px);\n opacity: 1;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-gallery-item.hover-animation-2 .name-data:not(.text-review), covet-pics-gallery-item.hover-animation-2 .name-data:not(.star-only) {\n display: none;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-gallery-item.hover-animation-2 .name-data:not(.text-review).size-xs, covet-pics-gallery-item.hover-animation-2 .name-data:not(.star-only).size-xs {\n display: none;\n }\n}\ncovet-pics-gallery-item.hover-animation-2 .username {\n line-height: 1.4;\n font-size: 14px;\n color: var(--covet-item-label-color);\n margin: 0;\n font-weight: 400;\n max-width: 100%;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-2 .username.text-review {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-2 .username.star-only {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-2 .slash {\n font-size: 14px;\n color: var(--covet-item-label-color);\n margin-left: 2px;\n margin-right: 2px;\n font-weight: 400;\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-2 .slash.text-review {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-2 .slash.star-only {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-2 .created-time {\n display: block;\n font-size: 14px;\n line-height: 1.4;\n max-width: 100%;\n color: var(--covet-item-label-color);\n font-weight: 400;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-2 .created-time.text-review {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-2 .created-time.star-only {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-2 .overlay-effect.text-review {\n display: block;\n opacity: 0;\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n}\n\ncovet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .info, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .info, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .info, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .info {\n transform: translateX(40px);\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .info, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .info, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .info, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .info {\n transform: translateX(16px);\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .info.size-xs, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .info.size-xs, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .info.size-xs, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .info.size-xs {\n transform: translateX(16px);\n }\n}\ncovet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .item-open-icon, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .item-open-icon, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .item-open-icon, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .item-open-icon {\n opacity: 1;\n visibility: visible;\n}\ncovet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .rating, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .rating, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .rating, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .rating {\n opacity: 1;\n transform: translate(-40px, 32px);\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .rating, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .rating, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .rating, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .rating {\n transform: translate(16px, 16px);\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .rating.size-xs, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .rating.size-xs, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .rating.size-xs, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .rating.size-xs {\n transform: translate(16px, 16px);\n }\n}\ncovet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .name-data, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .name-data, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .name-data, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .name-data {\n opacity: 1;\n transform: translate(40px, 30px);\n}\ncovet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .overlay-effect.text-review, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .overlay-effect.text-review, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .overlay-effect.text-review, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .overlay-effect.text-review {\n background: var(--covet-item-hover-color-to);\n opacity: 1;\n z-index: 3;\n}\ncovet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .svg-star.text-review path, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .svg-star.text-review path, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .svg-star.text-review path, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .svg-star.text-review path {\n fill: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .svg-star.hover-disabled path, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .svg-star.hover-disabled path, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .svg-star.hover-disabled path, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .svg-star.hover-disabled path {\n fill: #000000;\n}\ncovet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .rating-data.text-review, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .rating-data.text-review, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .rating-data.text-review, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .rating-data.text-review {\n color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .rating-data.hover-disabled, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .rating-data.hover-disabled, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .rating-data.hover-disabled, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .rating-data.hover-disabled {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .username.text-review, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .username.text-review, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .username.text-review, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .username.text-review {\n color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .username.star-only, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .username.star-only, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .username.star-only, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .username.star-only {\n color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .username.hover-disabled, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .username.hover-disabled, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .username.hover-disabled, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .username.hover-disabled {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .slash.text-review, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .slash.text-review, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .slash.text-review, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .slash.text-review {\n color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .slash.star-only, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .slash.star-only, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .slash.star-only, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .slash.star-only {\n color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .slash.hover-disabled, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .slash.hover-disabled, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .slash.hover-disabled, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .slash.hover-disabled {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .created-time.text-review, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .created-time.text-review, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .created-time.text-review, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .created-time.text-review {\n color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .created-time.star-only, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .created-time.star-only, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .created-time.star-only, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .created-time.star-only {\n color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .created-time.hover-disabled, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .created-time.hover-disabled, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .created-time.hover-disabled, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .created-time.hover-disabled {\n color: #000000;\n}\n\ncovet-pics-gallery-item.hover-animation-3 .info {\n transform: none;\n text-align: center;\n width: 70%;\n height: 70%;\n top: 0;\n bottom: 0;\n right: 0;\n border-right: 2px solid var(--covet-item-label-color);\n border-bottom: 2px solid var(--covet-item-label-color);\n visibility: visible !important;\n transition: all calc(var(--covet-item-animation-duration-base) * 2.5 / 5) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-3 .info .btn {\n position: relative;\n margin: 0 auto;\n overflow: hidden;\n left: 50%;\n top: 50%;\n text-align: center;\n width: 100%;\n padding-left: 10px;\n padding-right: 10px;\n transform: translate(-50%, -50%);\n z-index: 3;\n}\ncovet-pics-gallery-item.hover-animation-3 .info .btn.star-rating {\n position: relative;\n display: flex;\n justify-content: center;\n margin: 0 auto;\n overflow: hidden;\n left: 50%;\n top: 50%;\n text-align: center;\n width: 100%;\n padding-left: 10px;\n padding-right: 10px;\n z-index: 3;\n}\ncovet-pics-gallery-item.hover-animation-3 .description {\n position: absolute;\n box-sizing: border-box;\n display: flex;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n padding: 32px;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-gallery-item.hover-animation-3 .description {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-gallery-item.hover-animation-3 .description.size-xs {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-gallery-item.hover-animation-3 .description {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-gallery-item.hover-animation-3 .description.size-sm {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n}\ncovet-pics-gallery-item.hover-animation-3 .caption {\n position: relative;\n text-align: center;\n width: 100%;\n height: 100%;\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n font-size: var(--covet-item-detail-caption-font-size);\n line-height: 1.4;\n max-height: var(--covet-item-detail-caption-max-height);\n -webkit-line-clamp: var(--covet-item-detail-caption-max-lines);\n margin: auto;\n white-space: pre-line;\n}\ncovet-pics-gallery-item.hover-animation-3 .item-open-icon {\n margin: 0 auto;\n margin-bottom: 12px;\n display: block;\n visibility: hidden;\n}\ncovet-pics-gallery-item.hover-animation-3 .rating.text-review {\n position: absolute;\n display: flex;\n align-items: center;\n top: 0;\n left: 50%;\n transform: translate(-50%, 20px);\n}\ncovet-pics-gallery-item.hover-animation-3 .rating.info-rating {\n position: relative;\n z-index: 4;\n left: 0;\n display: flex;\n transform: none;\n align-items: center;\n margin-left: 13px;\n padding-left: 13px;\n}\ncovet-pics-gallery-item.hover-animation-3 .rating.info-rating:before {\n content: \"\";\n display: block;\n position: absolute;\n width: 1px;\n height: 14px;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n background-color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-3 .icon-star {\n width: 10px;\n height: 10px;\n display: flex;\n}\ncovet-pics-gallery-item.hover-animation-3 .svg-star {\n width: 100%;\n height: 100%;\n}\ncovet-pics-gallery-item.hover-animation-3 .svg-star path {\n fill: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-3 .svg-star.text-review path {\n transition: all var(--covet-item-animation-duration-base) ease-out;\n fill: #000000;\n}\ncovet-pics-gallery-item.hover-animation-3 .rating-data {\n line-height: 1.4;\n font-size: 14px;\n margin-left: 4px;\n color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-3 .rating-data.text-review {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-3 .name-data {\n z-index: 4;\n box-sizing: border-box;\n overflow: hidden;\n position: absolute;\n bottom: 0;\n left: 50%;\n opacity: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n max-width: calc(100% - 40px);\n width: 100%;\n transform: translate(-50%, -10px);\n transition: all var(--covet-item-animation-duration-base) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-3 .name-data.text-review {\n z-index: 1;\n transform: translate(-50%, -20px);\n opacity: 1;\n}\ncovet-pics-gallery-item.hover-animation-3 .name-data.star-only {\n z-index: 1;\n transform: translate(-50%, -20px);\n opacity: 1;\n}\ncovet-pics-gallery-item.hover-animation-3 .username {\n line-height: 1.4;\n font-size: 14px;\n color: var(--covet-item-label-color);\n margin: 0;\n font-weight: 400;\n max-width: calc((100% - 16px) / 2);\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\ncovet-pics-gallery-item.hover-animation-3 .username.text-review {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-3 .username.star-only {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-3 .slash {\n font-size: 14px;\n color: var(--covet-item-label-color);\n margin-left: 2px;\n margin-right: 2px;\n font-weight: 400;\n}\ncovet-pics-gallery-item.hover-animation-3 .slash.text-review {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-3 .slash.star-only {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-3 .created-time {\n display: block;\n font-size: 14px;\n line-height: 1.4;\n max-width: calc((100% - 16px) / 2);\n color: var(--covet-item-label-color);\n font-weight: 400;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\ncovet-pics-gallery-item.hover-animation-3 .created-time.text-review {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-3 .created-time.star-only {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-3 .overlay-effect.text-review {\n display: block;\n opacity: 0;\n transition: all var(--covet-item-animation-duration-base) ease-out;\n}\n\ncovet-pics-gallery-item.hover-animation-3 .btn-item-wrap:hover .info, covet-pics-gallery-item.hover-animation-3 .btn-item-wrap:active .info, covet-pics-gallery-item.hover-animation-3 .btn-item-wrap:focus .info, covet-pics-gallery-item.hover-animation-3 .btn-item-wrap.hover-preview .info {\n width: 85%;\n height: 85%;\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-3 .btn-item-wrap:hover .item-open-icon, covet-pics-gallery-item.hover-animation-3 .btn-item-wrap:active .item-open-icon, covet-pics-gallery-item.hover-animation-3 .btn-item-wrap:focus .item-open-icon, covet-pics-gallery-item.hover-animation-3 .btn-item-wrap.hover-preview .item-open-icon {\n visibility: visible;\n}\ncovet-pics-gallery-item.hover-animation-3 .btn-item-wrap:hover .overlay-effect.text-review, covet-pics-gallery-item.hover-animation-3 .btn-item-wrap:active .overlay-effect.text-review, covet-pics-gallery-item.hover-animation-3 .btn-item-wrap:focus .overlay-effect.text-review, covet-pics-gallery-item.hover-animation-3 .btn-item-wrap.hover-preview .overlay-effect.text-review {\n background: var(--covet-item-hover-color-to);\n transition: all var(--covet-item-animation-duration-base) ease-out;\n opacity: 1;\n z-index: 3;\n}\n\ncovet-pics-gallery-item.hover-animation-4 .info {\n text-align: center;\n transition: all calc(var(--covet-item-animation-duration-base) * 2.5 / 5) ease-out;\n transform: translateY(100%);\n bottom: 0;\n width: 75%;\n padding: 0 25px;\n top: auto !important;\n visibility: visible;\n opacity: 1;\n background-color: var(--covet-item-hover-border-color);\n}\ncovet-pics-gallery-item.hover-animation-4 .info .btn {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin: 0 auto;\n width: 100%;\n padding: 40px 0 40px 0;\n text-align: left;\n}\ncovet-pics-gallery-item.hover-animation-4 .info .btn .dynamic-fill {\n fill: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-4 .overlay-effect {\n background-color: var(--covet-item-hover-border-color);\n}\ncovet-pics-gallery-item.hover-animation-4 .description {\n position: absolute;\n box-sizing: border-box;\n display: flex;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n padding: 32px;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-gallery-item.hover-animation-4 .description {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-gallery-item.hover-animation-4 .description.size-xs {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-gallery-item.hover-animation-4 .description {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-gallery-item.hover-animation-4 .description.size-sm {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n}\ncovet-pics-gallery-item.hover-animation-4 .caption {\n position: relative;\n text-align: center;\n width: 100%;\n height: 100%;\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n font-size: var(--covet-item-detail-caption-font-size);\n line-height: 1.4;\n max-height: var(--covet-item-detail-caption-max-height);\n -webkit-line-clamp: var(--covet-item-detail-caption-max-lines);\n margin: auto;\n white-space: pre-line;\n}\ncovet-pics-gallery-item.hover-animation-4 .item-open-icon {\n position: absolute;\n z-index: 4;\n right: 0;\n margin: 18px 18px;\n display: block;\n opacity: 0;\n visibility: hidden;\n}\ncovet-pics-gallery-item.hover-animation-4 .rating {\n position: relative;\n z-index: 4;\n display: flex;\n align-items: center;\n}\ncovet-pics-gallery-item.hover-animation-4 .rating.text-review {\n position: absolute;\n top: 0;\n left: 50%;\n transform: translate(-50%, 20px);\n}\ncovet-pics-gallery-item.hover-animation-4 .icon-star {\n width: 10px;\n height: 10px;\n display: flex;\n}\ncovet-pics-gallery-item.hover-animation-4 .svg-star {\n width: 100%;\n height: 100%;\n}\ncovet-pics-gallery-item.hover-animation-4 .svg-star path {\n fill: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-4 .svg-star.text-review path {\n transition: all var(--covet-item-animation-duration-base) ease-out;\n fill: #000000;\n}\ncovet-pics-gallery-item.hover-animation-4 .rating-data {\n line-height: 1.4;\n font-size: 14px;\n margin-left: 4px;\n color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-4 .rating-data.text-review {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-4 .name-data.text-review, covet-pics-gallery-item.hover-animation-4 .name-data.star-only {\n z-index: 4;\n box-sizing: border-box;\n overflow: hidden;\n position: absolute;\n bottom: 0;\n left: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n max-width: calc(100% - 40px);\n width: 100%;\n transform: translate(-50%, -20px);\n transition: all var(--covet-item-animation-duration-base) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-4 .username.text-review, covet-pics-gallery-item.hover-animation-4 .username.star-only {\n line-height: 1.4;\n font-size: 14px;\n color: #000000;\n margin: 0;\n font-weight: 400;\n max-width: calc((100% - 16px) / 2);\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\ncovet-pics-gallery-item.hover-animation-4 .slash.text-review, covet-pics-gallery-item.hover-animation-4 .slash.star-only {\n font-size: 14px;\n color: #000000;\n margin-left: 2px;\n margin-right: 2px;\n font-weight: 400;\n}\ncovet-pics-gallery-item.hover-animation-4 .created-time.text-review, covet-pics-gallery-item.hover-animation-4 .created-time.star-only {\n display: block;\n font-size: 14px;\n line-height: 1.4;\n color: #000000;\n font-weight: 400;\n max-width: calc((100% - 16px) / 2);\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n\ncovet-pics-gallery-item.hover-animation-4 .btn-item-wrap:hover .info, covet-pics-gallery-item.hover-animation-4 .btn-item-wrap:active .info, covet-pics-gallery-item.hover-animation-4 .btn-item-wrap:focus .info, covet-pics-gallery-item.hover-animation-4 .btn-item-wrap.hover-preview .info {\n opacity: 1;\n z-index: 5;\n transform: translateY(0);\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-4 .btn-item-wrap:hover .overlay-effect, covet-pics-gallery-item.hover-animation-4 .btn-item-wrap:active .overlay-effect, covet-pics-gallery-item.hover-animation-4 .btn-item-wrap:focus .overlay-effect, covet-pics-gallery-item.hover-animation-4 .btn-item-wrap.hover-preview .overlay-effect {\n opacity: 0.2;\n}\ncovet-pics-gallery-item.hover-animation-4 .btn-item-wrap:hover .overlay-effect.text-review, covet-pics-gallery-item.hover-animation-4 .btn-item-wrap:active .overlay-effect.text-review, covet-pics-gallery-item.hover-animation-4 .btn-item-wrap:focus .overlay-effect.text-review, covet-pics-gallery-item.hover-animation-4 .btn-item-wrap.hover-preview .overlay-effect.text-review {\n opacity: 0;\n}\ncovet-pics-gallery-item.hover-animation-4 .btn-item-wrap:hover .item-open-icon, covet-pics-gallery-item.hover-animation-4 .btn-item-wrap:active .item-open-icon, covet-pics-gallery-item.hover-animation-4 .btn-item-wrap:focus .item-open-icon, covet-pics-gallery-item.hover-animation-4 .btn-item-wrap.hover-preview .item-open-icon {\n opacity: 1;\n visibility: visible;\n}\n\ncovet-pics-gallery-item.hover-animation-5 .info {\n position: absolute;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n text-align: right;\n bottom: -10px;\n height: 40px;\n left: auto;\n transition: all calc(var(--covet-item-animation-duration-base) * 2.5 / 5) ease-out;\n padding: 0;\n transform: translateY(25px);\n right: 40px;\n visibility: visible !important;\n top: auto !important;\n}\ncovet-pics-gallery-item.hover-animation-5 .info .btn {\n position: relative;\n display: inline-block;\n margin: 0 !important;\n overflow: hidden;\n cursor: pointer;\n padding: 0;\n line-height: 40px;\n}\ncovet-pics-gallery-item.hover-animation-5 .info .btn.source-instagram.show {\n padding-right: calc(var(--covet-item-label-font-size) + 10px);\n}\ncovet-pics-gallery-item.hover-animation-5 .description {\n position: absolute;\n box-sizing: border-box;\n display: flex;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n padding: 32px;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-gallery-item.hover-animation-5 .description {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-gallery-item.hover-animation-5 .description.size-xs {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-gallery-item.hover-animation-5 .description {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-gallery-item.hover-animation-5 .description.size-sm {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n}\ncovet-pics-gallery-item.hover-animation-5 .caption {\n position: relative;\n text-align: center;\n width: 100%;\n height: 100%;\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n font-size: var(--covet-item-detail-caption-font-size);\n line-height: 1.4;\n max-height: var(--covet-item-detail-caption-max-height);\n -webkit-line-clamp: var(--covet-item-detail-caption-max-lines);\n margin: auto;\n white-space: pre-line;\n}\ncovet-pics-gallery-item.hover-animation-5 .item-open-icon {\n display: block;\n}\ncovet-pics-gallery-item.hover-animation-5 .overlay-effect {\n visibility: hidden;\n display: block;\n opacity: 1;\n border: 1px solid #000000;\n border-color: var(--covet-item-hover-border-color);\n background: none;\n transition: all calc(var(--covet-item-animation-duration-base) * 3.5 / 5) cubic-bezier(0.39, 0.575, 0.565, 1);\n}\ncovet-pics-gallery-item.hover-animation-5 .item-open-icon {\n position: absolute;\n top: 50%;\n transform: translate(0, -50%);\n right: 0;\n}\ncovet-pics-gallery-item.hover-animation-5 .rating {\n position: absolute;\n box-sizing: border-box;\n top: 0;\n left: 0;\n width: 100%;\n height: 40px;\n display: flex;\n align-items: center;\n padding-left: 40px;\n padding-right: 40px;\n transform: translateY(-27px);\n transition: all calc(var(--covet-item-animation-duration-base) * 2.5 / 5) ease-out;\n z-index: 4;\n}\ncovet-pics-gallery-item.hover-animation-5 .rating.text-review {\n z-index: 1;\n position: absolute;\n width: auto;\n height: auto;\n top: 0;\n left: 50%;\n transform: translate(-50%, 20px);\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-gallery-item.hover-animation-5 .rating:not(.text-review) {\n display: none;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-gallery-item.hover-animation-5 .rating:not(.text-review).size-xs {\n display: none;\n }\n}\ncovet-pics-gallery-item.hover-animation-5 .icon-star {\n display: flex;\n width: 10px;\n height: 10px;\n margin-right: 10px;\n opacity: 0.5;\n}\ncovet-pics-gallery-item.hover-animation-5 .icon-star.active {\n opacity: 1;\n}\ncovet-pics-gallery-item.hover-animation-5 .icon-star.active .svg-star path {\n fill: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-5 .icon-star.active.text-review {\n margin-right: 0;\n}\ncovet-pics-gallery-item.hover-animation-5 .icon-star.active.text-review .svg-star path {\n fill: #000000;\n}\ncovet-pics-gallery-item.hover-animation-5 .svg-star {\n width: 100%;\n height: 100%;\n}\ncovet-pics-gallery-item.hover-animation-5 .svg-star path {\n fill: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-5 .rating-data {\n line-height: 1.4;\n font-size: 15px;\n font-weight: bold;\n margin-left: auto;\n color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-5 .rating-data.text-review {\n color: #000000;\n font-weight: 400;\n font-size: 14px;\n margin-left: 4px;\n}\ncovet-pics-gallery-item.hover-animation-5 .rating-data.star-only {\n color: #000000;\n font-weight: 400;\n font-size: 14px;\n margin-left: 4px;\n}\ncovet-pics-gallery-item.hover-animation-5 .name-data.text-review, covet-pics-gallery-item.hover-animation-5 .name-data.star-only {\n z-index: 1;\n box-sizing: border-box;\n overflow: hidden;\n position: absolute;\n bottom: 0;\n left: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n max-width: calc(100% - 40px);\n width: 100%;\n transform: translate(-50%, -20px);\n transition: all var(--covet-item-animation-duration-base) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-5 .username.text-review, covet-pics-gallery-item.hover-animation-5 .username.star-only {\n line-height: 1.4;\n font-size: 14px;\n color: #000000;\n margin: 0;\n font-weight: 400;\n max-width: calc((100% - 16px) / 2);\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\ncovet-pics-gallery-item.hover-animation-5 .slash.text-review, covet-pics-gallery-item.hover-animation-5 .slash.star-only {\n font-size: 14px;\n color: #000000;\n margin-left: 2px;\n margin-right: 2px;\n font-weight: 400;\n}\ncovet-pics-gallery-item.hover-animation-5 .created-time.text-review, covet-pics-gallery-item.hover-animation-5 .created-time.star-only {\n display: block;\n font-size: 14px;\n line-height: 1.4;\n max-width: calc((100% - 16px) / 2);\n color: #000000;\n font-weight: 400;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n\ncovet-pics-gallery-item.hover-animation-5 .btn-item-wrap:hover .info, covet-pics-gallery-item.hover-animation-5 .btn-item-wrap:active .info, covet-pics-gallery-item.hover-animation-5 .btn-item-wrap:focus .info, covet-pics-gallery-item.hover-animation-5 .btn-item-wrap.hover-preview .info {\n opacity: 1;\n z-index: 5;\n transform: translateY(-10px);\n width: calc(100% - 40px);\n align-items: center;\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-5 .btn-item-wrap:hover .overlay-effect, covet-pics-gallery-item.hover-animation-5 .btn-item-wrap:active .overlay-effect, covet-pics-gallery-item.hover-animation-5 .btn-item-wrap:focus .overlay-effect, covet-pics-gallery-item.hover-animation-5 .btn-item-wrap.hover-preview .overlay-effect {\n z-index: 2;\n visibility: visible;\n border-width: 40px;\n border-color: var(--covet-item-hover-border-color);\n width: calc(100% - 80px);\n height: calc(100% - 80px);\n}\ncovet-pics-gallery-item.hover-animation-5 .btn-item-wrap:hover .rating, covet-pics-gallery-item.hover-animation-5 .btn-item-wrap:active .rating, covet-pics-gallery-item.hover-animation-5 .btn-item-wrap:focus .rating, covet-pics-gallery-item.hover-animation-5 .btn-item-wrap.hover-preview .rating {\n transform: translateY(0);\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-5 .btn-item-wrap:hover .rating.text-review, covet-pics-gallery-item.hover-animation-5 .btn-item-wrap:active .rating.text-review, covet-pics-gallery-item.hover-animation-5 .btn-item-wrap:focus .rating.text-review, covet-pics-gallery-item.hover-animation-5 .btn-item-wrap.hover-preview .rating.text-review {\n transform: translate(-50%, 20px);\n}";
|
|
175
|
+
const covetPicsGalleryItemCss = "covet-pics-gallery-item {\n --covet-item-label-font-size: var(--covet-custom-item-label-font-size, var(--covet-internal-item-label-font-size));\n --covet-item-label-font-style: var(--covet-custom-item-label-font-style, var(--covet-internal-item-label-font-style));\n --covet-item-label-letter-spacing: var(--covet-custom-item-label-letter-spacing, normal);\n --covet-item-animation-duration: var(--covet-custom-item-animation-duration, var(--covet-internal-item-animation-duration));\n --covet-item-animation-duration-base: var(--covet-custom-item-animation-duration-base, var(--covet-internal-item-animation-duration-base));\n --covet-item-label-color: var(--covet-custom-item-label-color, var(--covet-internal-item-label-color));\n --covet-item-hover-border-color: var(--covet-custom-item-hover-border-color, var(--covet-internal-item-hover-border-color));\n --covet-item-hover-color-to: var(--covet-custom-item-hover-color-to, var(--covet-internal-item-hover-color-to));\n --covet-item-hover-color-from: var(--covet-custom-item-hover-color-from, var(--covet-internal-item-hover-color-from));\n --covet-item-hover-bg-opacity: var(--covet-custom-item-hover-bg-opacity, var(--covet-internal-item-hover-bg-opacity));\n}\n\ncovet-pics-gallery-item.hover-preview .bg {\n transform: scale(1.2);\n}\ncovet-pics-gallery-item.hover-preview .overlay-effect {\n display: block;\n}\ncovet-pics-gallery-item.hover-preview .info {\n opacity: 1;\n}\ncovet-pics-gallery-item.hover-preview .info .item-open-icon {\n z-index: 4;\n opacity: 1;\n}\ncovet-pics-gallery-item.hover-preview .hover {\n display: block;\n visibility: visible;\n}\n\ncovet-pics-gallery-item.hover-animation .btn-item-wrap:hover .bg, covet-pics-gallery-item.hover-animation .btn-item-wrap:active .bg, covet-pics-gallery-item.hover-animation .btn-item-wrap:focus .bg {\n transform: scale(1.2);\n}\ncovet-pics-gallery-item.hover-animation .btn-item-wrap:hover .overlay-effect, covet-pics-gallery-item.hover-animation .btn-item-wrap:active .overlay-effect, covet-pics-gallery-item.hover-animation .btn-item-wrap:focus .overlay-effect {\n display: block;\n}\ncovet-pics-gallery-item.hover-animation .btn-item-wrap:hover .info, covet-pics-gallery-item.hover-animation .btn-item-wrap:active .info, covet-pics-gallery-item.hover-animation .btn-item-wrap:focus .info {\n opacity: 1;\n}\ncovet-pics-gallery-item.hover-animation .btn-item-wrap:hover .info .item-open-icon, covet-pics-gallery-item.hover-animation .btn-item-wrap:active .info .item-open-icon, covet-pics-gallery-item.hover-animation .btn-item-wrap:focus .info .item-open-icon {\n z-index: 4;\n opacity: 1;\n}\ncovet-pics-gallery-item.hover-animation .btn-item-wrap:hover .hover, covet-pics-gallery-item.hover-animation .btn-item-wrap:active .hover, covet-pics-gallery-item.hover-animation .btn-item-wrap:focus .hover {\n display: block;\n visibility: visible;\n}\n\ncovet-pics-gallery-item.no-animation:hover .bg, covet-pics-gallery-item.no-animation:active .bg, covet-pics-gallery-item.no-animation:focus .bg {\n transform: none;\n}\ncovet-pics-gallery-item.no-animation:hover .btn-item-wrap .bg, covet-pics-gallery-item.no-animation:active .btn-item-wrap .bg, covet-pics-gallery-item.no-animation:focus .btn-item-wrap .bg {\n transform: none;\n}\n\ncovet-pics-gallery-item {\n outline: none !important;\n cursor: pointer;\n display: inline-block;\n overflow: hidden;\n position: relative;\n container-name: covet-pics-gallery-item;\n container-type: inline-size;\n}\ncovet-pics-gallery-item[is-loading] {\n background-image: linear-gradient(120deg, #DFE3E8, #F9FAFB);\n animation: pulsate 2s ease-in-out infinite;\n}\ncovet-pics-gallery-item[is-loading] img {\n color: transparent;\n}\ncovet-pics-gallery-item[is-loading] .btn-item-wrap {\n position: relative;\n}\ncovet-pics-gallery-item[is-loading] .btn-item-wrap:after {\n content: \"\";\n display: block;\n position: relative;\n bottom: 0;\n width: 1px;\n height: 0;\n padding-top: 100%;\n visibility: hidden;\n}\ncovet-pics-gallery-item.text-review .btn-item-wrap, covet-pics-gallery-item.star-only .btn-item-wrap, covet-pics-gallery-item.grid-item .btn-item-wrap, covet-pics-gallery-item.swiper-slide .btn-item-wrap {\n position: relative;\n}\ncovet-pics-gallery-item.text-review .btn-item-wrap:after, covet-pics-gallery-item.star-only .btn-item-wrap:after, covet-pics-gallery-item.grid-item .btn-item-wrap:after, covet-pics-gallery-item.swiper-slide .btn-item-wrap:after {\n content: \"\";\n display: block;\n position: relative;\n bottom: 0;\n width: 1px;\n height: 0;\n padding-top: 100%;\n visibility: hidden;\n}\ncovet-pics-gallery-item.upload-widget {\n position: relative;\n animation: none;\n}\ncovet-pics-gallery-item.upload-widget:after {\n content: \"\";\n display: block;\n position: relative;\n bottom: 0;\n width: 1px;\n height: 0;\n padding-top: 100%;\n visibility: hidden;\n}\ncovet-pics-gallery-item.upload-widget.collage-item {\n position: absolute;\n}\ncovet-pics-gallery-item.grid-item {\n width: 100%;\n display: flex;\n margin-bottom: calc(var(--covet-mobile-grid-space) * 1%);\n}\ncovet-pics-gallery-item.grid-item.highlighted {\n grid-column-end: span 2;\n grid-row-end: span 2;\n width: 100%;\n margin-bottom: calc(var(--covet-mobile-grid-space) * 1% * var(--covet-mobile-item-width) / var(--covet-mobile-highlighted-width));\n}\ncovet-pics-gallery-item.collage-item {\n margin-bottom: calc(var(--covet-mobile-item-padding) * 1%);\n width: calc(var(--covet-mobile-item-width) * 1%);\n}\ncovet-pics-gallery-item .btn-item-wrap {\n outline: none !important;\n border: none;\n display: block;\n width: 100%;\n height: 100%;\n background-color: transparent;\n overflow: hidden;\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n position: relative;\n cursor: pointer;\n font-family: var(--covet-font-family);\n}\ncovet-pics-gallery-item .btn-item-wrap.no-click {\n cursor: auto;\n}\n@media only screen and (min-width: 800px) {\n covet-pics-gallery-item {\n margin-bottom: calc(var(--covet-desktop-grid-space) * 1%);\n }\n covet-pics-gallery-item.grid-item {\n margin-bottom: calc(var(--covet-desktop-grid-space) * 1%);\n }\n covet-pics-gallery-item.grid-item.highlighted {\n margin-bottom: calc(var(--covet-desktop-grid-space) * 1% * var(--covet-desktop-item-width) / var(--covet-desktop-highlighted-width));\n }\n covet-pics-gallery-item.collage-item {\n width: calc(var(--covet-desktop-item-width) * 1%);\n margin-bottom: calc(var(--covet-desktop-item-padding) * 1%);\n }\n}\ncovet-pics-gallery-item video {\n background: rgba(145, 158, 171, 0.1);\n}\ncovet-pics-gallery-item video.bg {\n background-image: url(asset_path(\"icon-video-play.svg\"));\n background-position: 50% 50%;\n background-size: 40%;\n}\ncovet-pics-gallery-item:hover .bg, covet-pics-gallery-item:active .bg, covet-pics-gallery-item:focus .bg {\n transform: scale(1.2);\n transition: all var(--covet-item-animation-duration) cubic-bezier(0.39, 0.575, 0.565, 1);\n}\ncovet-pics-gallery-item .bg {\n -o-object-fit: cover;\n object-fit: cover;\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 2;\n transition: all 0.35s cubic-bezier(0.39, 0.575, 0.565, 1);\n display: block;\n top: 0;\n left: 0;\n}\n.collage covet-pics-gallery-item .bg {\n position: relative;\n max-width: 100%;\n}\ncovet-pics-gallery-item .star-wrap {\n display: flex;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n}\ncovet-pics-gallery-item .btn {\n display: inline-block;\n margin-top: 15px;\n font-weight: bold;\n font-size: 13px;\n padding: 0px;\n position: relative;\n margin: 0 auto;\n overflow: hidden;\n font-weight: var(--covet-item-label-font-style);\n font-size: var(--covet-item-label-font-size);\n color: var(--covet-item-label-color);\n letter-spacing: var(--covet-item-label-letter-spacing);\n}\ncovet-pics-gallery-item .btn::after {\n background: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item .overlay-effect {\n display: none;\n position: absolute;\n width: 100%;\n height: 100%;\n content: \"\";\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n opacity: 0;\n z-index: 3;\n opacity: var(--covet-item-hover-bg-opacity);\n background: linear-gradient(to bottom right, var(--covet-item-hover-color-from), var(--covet-item-hover-color-to));\n transition: all 0.35s cubic-bezier(0.39, 0.575, 0.565, 1);\n}\ncovet-pics-gallery-item .info {\n color: #fff;\n transform: translateY(-50%);\n font-size: 11px;\n padding: 10px;\n position: absolute;\n left: 0;\n right: 0;\n text-align: center;\n z-index: 4;\n opacity: 0;\n transition: top 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);\n top: 53%;\n display: none;\n}\ncovet-pics-gallery-item .item-open-icon {\n width: calc(var(--covet-item-label-font-size) + 5px);\n height: calc(var(--covet-item-label-font-size) + 5px);\n margin: 0 auto;\n top: 0;\n right: 0;\n transition: all 0.25s;\n}\ncovet-pics-gallery-item .item-open-icon path {\n fill: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item .item-open-icon circle {\n fill: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item .hover {\n display: block;\n visibility: hidden;\n}\ncovet-pics-gallery-item.no-animation .bg, covet-pics-gallery-item.no-animation:hover .bg {\n transform: none;\n transition: none;\n}\n\n@media (any-hover: none) {\n covet-pics-gallery-item.hover-animation:hover .hover,\n covet-pics-gallery-item.hover-animation:focus .hover,\n covet-pics-gallery-item.hover-animation:active .hover,\n covet-pics-gallery-item.hover-preview .hover {\n display: none;\n visibility: hidden;\n }\n covet-pics-gallery-item.hover-animation:hover .overlay-effect,\n covet-pics-gallery-item.hover-animation:focus .overlay-effect,\n covet-pics-gallery-item.hover-animation:active .overlay-effect,\n covet-pics-gallery-item.hover-preview .overlay-effect {\n display: none;\n }\n covet-pics-gallery-item.hover-animation:hover .bg,\n covet-pics-gallery-item.hover-animation:focus .bg,\n covet-pics-gallery-item.hover-animation:active .bg,\n covet-pics-gallery-item.hover-preview .bg {\n transition: none;\n transform: none;\n }\n}\n@keyframes pulsate {\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: 0.3;\n }\n 100% {\n opacity: 1;\n }\n}\n.upload-widget {\n cursor: pointer;\n background-color: #FCFDFF;\n outline: none !important;\n}\n@media (any-hover: hover) {\n .upload-widget:hover .default-cover, .upload-widget:hover .custom-img-wrap, .upload-widget:active .default-cover, .upload-widget:active .custom-img-wrap, .upload-widget:focus .default-cover, .upload-widget:focus .custom-img-wrap {\n transform: scale(1.05);\n }\n}\n@media (any-hover: none) {\n .upload-widget .default-cover, .upload-widget .custom-img-wrap {\n transform: scale(1.05);\n }\n}\n.upload-widget.no-animation .default-cover {\n transform: translateY(0);\n}\n@media (any-hover: hover) {\n .upload-widget.no-animation:hover .default-cover, .upload-widget.no-animation:hover .custom-img-wrap, .upload-widget.no-animation:active .default-cover, .upload-widget.no-animation:active .custom-img-wrap, .upload-widget.no-animation:focus .default-cover, .upload-widget.no-animation:focus .custom-img-wrap {\n transform: scale(1);\n }\n}\n@media (any-hover: none) {\n .upload-widget.no-animation .default-cover, .upload-widget.no-animation .custom-img-wrap {\n transform: scale(1);\n }\n}\n.upload-widget .info {\n top: 50%;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 1;\n padding: 0;\n width: 100%;\n height: 100%;\n}\n.upload-widget .default-cover {\n display: flex;\n flex-direction: column;\n align-items: center;\n transform: translateY(5px);\n transition: all 0.25s ease-out;\n margin: 24px;\n position: relative;\n}\n@media only screen and (max-width: 799.98px) {\n .upload-widget .default-cover {\n margin: 16px;\n }\n}\n.upload-widget .custom-img-wrap {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n position: relative;\n transition: all 0.25s ease-out;\n box-sizing: border-box;\n overflow: hidden;\n}\n.upload-widget .svg-plus {\n width: 48px;\n height: 48px;\n}\n@media only screen and (max-width: 799.98px) {\n .upload-widget .svg-plus {\n width: 40px;\n height: 40px;\n }\n}\n.upload-widget .btn {\n font-weight: normal;\n font-size: 12.8px;\n color: #464858;\n text-decoration: none;\n margin-top: 24px;\n border: none;\n text-transform: uppercase;\n overflow: hidden;\n text-align: center;\n line-height: 17.92px;\n max-height: 35.84px;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n}\n.upload-widget .img {\n width: 100%;\n}\n\ncovet-pics-gallery-item.hover-animation-1.text-review {\n display: block;\n}\ncovet-pics-gallery-item.hover-animation-1 .info {\n text-align: center;\n top: 50%;\n visibility: visible;\n transform: translateY(calc(-50% + 10px));\n transition: all var(--covet-item-animation-duration-base) ease-out;\n z-index: 5;\n}\ncovet-pics-gallery-item.hover-animation-1 .info .btn {\n padding-bottom: 6px;\n}\ncovet-pics-gallery-item.hover-animation-1 .info .btn:after {\n transition: width calc(var(--covet-item-animation-duration-base) * 3.5 / 5) ease-out;\n content: \"\";\n display: block;\n position: absolute;\n left: 0;\n bottom: 0;\n width: 0;\n height: 1px;\n}\ncovet-pics-gallery-item.hover-animation-1 .description {\n position: absolute;\n box-sizing: border-box;\n overflow: hidden;\n display: flex;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n padding: 32px;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-gallery-item.hover-animation-1 .description {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-gallery-item.hover-animation-1 .description.size-xs {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-gallery-item.hover-animation-1 .description {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-gallery-item.hover-animation-1 .description.size-sm {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n}\ncovet-pics-gallery-item.hover-animation-1 .caption {\n position: relative;\n text-align: center;\n width: 100%;\n height: 100%;\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n font-size: var(--covet-item-detail-caption-font-size);\n line-height: 1.4;\n max-height: var(--covet-item-detail-caption-max-height);\n -webkit-line-clamp: var(--covet-item-detail-caption-max-lines);\n margin: auto;\n white-space: pre-line;\n}\ncovet-pics-gallery-item.hover-animation-1 .item-open-icon {\n margin-bottom: 12px;\n display: block;\n visibility: hidden;\n}\ncovet-pics-gallery-item.hover-animation-1 .rating {\n position: absolute;\n z-index: 4;\n opacity: 0;\n display: flex;\n align-items: center;\n top: 0;\n left: 50%;\n transform: translate(-50%, 30px);\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-1 .rating.text-review {\n transform: translate(-50%, 20px);\n opacity: 1;\n}\ncovet-pics-gallery-item.hover-animation-1 .icon-star {\n width: 10px;\n height: 10px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\ncovet-pics-gallery-item.hover-animation-1 .svg-star {\n width: 100%;\n height: 100%;\n}\ncovet-pics-gallery-item.hover-animation-1 .svg-star path {\n fill: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-1 .svg-star.text-review path {\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n fill: #000000;\n}\ncovet-pics-gallery-item.hover-animation-1 .rating-data {\n line-height: 1.4;\n font-size: 14px;\n margin-left: 4px;\n color: var(--covet-item-label-color);\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-1 .rating-data.text-review {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-1 .name-data {\n z-index: 4;\n box-sizing: border-box;\n overflow: hidden;\n position: absolute;\n bottom: 0;\n left: 50%;\n opacity: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n max-width: calc(100% - 40px);\n width: 100%;\n transform: translate(-50%, -10px);\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-1 .name-data.text-review {\n transform: translate(-50%, -20px);\n opacity: 1;\n}\ncovet-pics-gallery-item.hover-animation-1 .name-data.star-only {\n transform: translate(-50%, -20px);\n opacity: 1;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-gallery-item.hover-animation-1 .name-data:not(.text-review), covet-pics-gallery-item.hover-animation-1 .name-data:not(.star-only) {\n display: none;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-gallery-item.hover-animation-1 .name-data:not(.text-review).size-xs, covet-pics-gallery-item.hover-animation-1 .name-data:not(.star-only).size-xs {\n display: none;\n }\n}\ncovet-pics-gallery-item.hover-animation-1 .username {\n line-height: 1.4;\n font-size: 14px;\n color: var(--covet-item-label-color);\n margin: 0;\n font-weight: 400;\n max-width: calc((100% - 16px) / 2);\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-1 .username.text-review {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-1 .username.star-only {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-1 .slash {\n font-size: 14px;\n color: var(--covet-item-label-color);\n margin-left: 2px;\n margin-right: 2px;\n font-weight: 400;\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-1 .slash.text-review {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-1 .slash.star-only {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-1 .created-time {\n display: block;\n font-size: 14px;\n line-height: 1.4;\n max-width: calc((100% - 16px) / 2);\n color: var(--covet-item-label-color);\n font-weight: 400;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-1 .created-time.text-review {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-1 .created-time.star-only {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-1 .overlay-effect.text-review {\n display: block;\n opacity: 0;\n transition: all var(--covet-item-animation-duration-base) ease-out;\n}\n\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .info, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .info, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .info, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .info {\n transform: translateY(-50%);\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .btn:after, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .btn:after, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .btn:after, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .btn:after {\n width: 100%;\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .item-open-icon, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .item-open-icon, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .item-open-icon, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .item-open-icon {\n visibility: visible;\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .info .btn, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .info .btn, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .info .btn, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .info .btn {\n border-bottom-width: 1px;\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .rating, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .rating, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .rating, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .rating {\n opacity: 1;\n transform: translate(-50%, 20px);\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .name-data, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .name-data, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .name-data, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .name-data {\n opacity: 1;\n transform: translate(-50%, -20px);\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .overlay-effect.text-review, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .overlay-effect.text-review, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .overlay-effect.text-review, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .overlay-effect.text-review {\n background: var(--covet-item-hover-color-to);\n opacity: 1;\n z-index: 3;\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .svg-star.text-review path, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .svg-star.text-review path, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .svg-star.text-review path, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .svg-star.text-review path {\n fill: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .svg-star.hover-disabled path, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .svg-star.hover-disabled path, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .svg-star.hover-disabled path, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .svg-star.hover-disabled path {\n fill: #000000;\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .rating-data.text-review, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .rating-data.text-review, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .rating-data.text-review, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .rating-data.text-review {\n color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .rating-data.star-only, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .rating-data.star-only, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .rating-data.star-only, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .rating-data.star-only {\n color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .rating-data.hover-disabled, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .rating-data.hover-disabled, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .rating-data.hover-disabled, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .rating-data.hover-disabled {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .username.text-review, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .username.text-review, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .username.text-review, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .username.text-review {\n color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .username.star-only, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .username.star-only, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .username.star-only, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .username.star-only {\n color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .username.hover-disabled, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .username.hover-disabled, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .username.hover-disabled, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .username.hover-disabled {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .slash.text-review, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .slash.text-review, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .slash.text-review, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .slash.text-review {\n color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .slash.star-only, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .slash.star-only, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .slash.star-only, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .slash.star-only {\n color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .slash.hover-disabled, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .slash.hover-disabled, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .slash.hover-disabled, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .slash.hover-disabled {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .created-time.text-review, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .created-time.text-review, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .created-time.text-review, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .created-time.text-review {\n color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .created-time.star-only, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .created-time.star-only, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .created-time.star-only, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .created-time.star-only {\n color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-1 .btn-item-wrap:hover .created-time.hover-disabled, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:active .created-time.hover-disabled, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap:focus .created-time.hover-disabled, covet-pics-gallery-item.hover-animation-1 .btn-item-wrap.hover-preview .created-time.hover-disabled {\n color: #000000;\n}\n\ncovet-pics-gallery-item.hover-animation-2 .info {\n transform: none;\n text-align: left;\n bottom: 35px;\n padding: 0;\n top: auto;\n right: auto;\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) cubic-bezier(0.39, 0.575, 0.565, 1);\n z-index: 5;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-gallery-item.hover-animation-2 .info {\n left: 0;\n bottom: 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-gallery-item.hover-animation-2 .info.size-xs {\n left: 0;\n bottom: 16px;\n }\n}\ncovet-pics-gallery-item.hover-animation-2 .info .btn {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n padding-top: 35px;\n}\ncovet-pics-gallery-item.hover-animation-2 .info .btn .icon-arrow {\n margin-bottom: 8px;\n}\ncovet-pics-gallery-item.hover-animation-2 .info .btn .dynamic-fill {\n fill: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-2 .description {\n position: absolute;\n box-sizing: border-box;\n display: flex;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n padding: 32px;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-gallery-item.hover-animation-2 .description {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-gallery-item.hover-animation-2 .description.size-xs {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-gallery-item.hover-animation-2 .description {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-gallery-item.hover-animation-2 .description.size-sm {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n}\ncovet-pics-gallery-item.hover-animation-2 .caption {\n text-align: center;\n width: 100%;\n position: relative;\n text-align: center;\n width: 100%;\n height: 100%;\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n font-size: var(--covet-item-detail-caption-font-size);\n line-height: 1.4;\n max-height: var(--covet-item-detail-caption-max-height);\n -webkit-line-clamp: var(--covet-item-detail-caption-max-lines);\n margin: auto;\n white-space: pre-line;\n}\ncovet-pics-gallery-item.hover-animation-2 .item-open-icon {\n position: absolute;\n z-index: 4;\n right: 0;\n margin: 18px 18px;\n visibility: hidden;\n opacity: 0;\n}\ncovet-pics-gallery-item.hover-animation-2 .rating {\n position: absolute;\n z-index: 4;\n opacity: 0;\n display: flex;\n align-items: center;\n top: 0;\n right: 0;\n transform: translate(-80px, 30px);\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-gallery-item.hover-animation-2 .rating {\n left: 0;\n transform: translateY(16px);\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-gallery-item.hover-animation-2 .rating.size-xs {\n left: 0;\n transform: translateY(16px);\n }\n}\ncovet-pics-gallery-item.hover-animation-2 .rating.text-review {\n transform: translate(-40px, 32px);\n opacity: 1;\n}\ncovet-pics-gallery-item.hover-animation-2 .icon-star {\n width: 10px;\n height: 10px;\n display: flex;\n}\ncovet-pics-gallery-item.hover-animation-2 .svg-star {\n width: 100%;\n height: 100%;\n}\ncovet-pics-gallery-item.hover-animation-2 .svg-star path {\n fill: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-2 .svg-star.text-review path {\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n fill: #000000;\n}\ncovet-pics-gallery-item.hover-animation-2 .rating-data {\n line-height: 1.4;\n font-size: 14px;\n margin-left: 4px;\n color: var(--covet-item-label-color);\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-2 .rating-data.text-review {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-2 .rating-data.star-only {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-2 .name-data {\n z-index: 4;\n box-sizing: border-box;\n overflow: hidden;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n display: flex;\n align-items: center;\n max-width: calc(100% - 80px - 22px);\n width: 100%;\n transform: translateY(30px);\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n padding-right: 3px;\n}\ncovet-pics-gallery-item.hover-animation-2 .name-data.text-review {\n transform: translate(40px, 30px);\n opacity: 1;\n}\ncovet-pics-gallery-item.hover-animation-2 .name-data.star-only {\n transform: translate(40px, 30px);\n opacity: 1;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-gallery-item.hover-animation-2 .name-data:not(.text-review), covet-pics-gallery-item.hover-animation-2 .name-data:not(.star-only) {\n display: none;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-gallery-item.hover-animation-2 .name-data:not(.text-review).size-xs, covet-pics-gallery-item.hover-animation-2 .name-data:not(.star-only).size-xs {\n display: none;\n }\n}\ncovet-pics-gallery-item.hover-animation-2 .username {\n line-height: 1.4;\n font-size: 14px;\n color: var(--covet-item-label-color);\n margin: 0;\n font-weight: 400;\n max-width: 100%;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-2 .username.text-review {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-2 .username.star-only {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-2 .slash {\n font-size: 14px;\n color: var(--covet-item-label-color);\n margin-left: 2px;\n margin-right: 2px;\n font-weight: 400;\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-2 .slash.text-review {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-2 .slash.star-only {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-2 .created-time {\n display: block;\n font-size: 14px;\n line-height: 1.4;\n max-width: 100%;\n color: var(--covet-item-label-color);\n font-weight: 400;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-2 .created-time.text-review {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-2 .created-time.star-only {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-2 .overlay-effect.text-review {\n display: block;\n opacity: 0;\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n}\n\ncovet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .info, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .info, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .info, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .info {\n transform: translateX(40px);\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .info, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .info, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .info, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .info {\n transform: translateX(16px);\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .info.size-xs, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .info.size-xs, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .info.size-xs, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .info.size-xs {\n transform: translateX(16px);\n }\n}\ncovet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .item-open-icon, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .item-open-icon, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .item-open-icon, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .item-open-icon {\n opacity: 1;\n visibility: visible;\n}\ncovet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .rating, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .rating, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .rating, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .rating {\n opacity: 1;\n transform: translate(-40px, 32px);\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .rating, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .rating, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .rating, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .rating {\n transform: translate(16px, 16px);\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .rating.size-xs, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .rating.size-xs, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .rating.size-xs, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .rating.size-xs {\n transform: translate(16px, 16px);\n }\n}\ncovet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .name-data, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .name-data, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .name-data, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .name-data {\n opacity: 1;\n transform: translate(40px, 30px);\n}\ncovet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .overlay-effect.text-review, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .overlay-effect.text-review, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .overlay-effect.text-review, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .overlay-effect.text-review {\n background: var(--covet-item-hover-color-to);\n opacity: 1;\n z-index: 3;\n}\ncovet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .svg-star.text-review path, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .svg-star.text-review path, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .svg-star.text-review path, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .svg-star.text-review path {\n fill: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .svg-star.hover-disabled path, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .svg-star.hover-disabled path, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .svg-star.hover-disabled path, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .svg-star.hover-disabled path {\n fill: #000000;\n}\ncovet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .rating-data.text-review, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .rating-data.text-review, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .rating-data.text-review, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .rating-data.text-review {\n color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .rating-data.hover-disabled, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .rating-data.hover-disabled, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .rating-data.hover-disabled, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .rating-data.hover-disabled {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .username.text-review, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .username.text-review, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .username.text-review, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .username.text-review {\n color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .username.star-only, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .username.star-only, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .username.star-only, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .username.star-only {\n color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .username.hover-disabled, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .username.hover-disabled, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .username.hover-disabled, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .username.hover-disabled {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .slash.text-review, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .slash.text-review, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .slash.text-review, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .slash.text-review {\n color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .slash.star-only, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .slash.star-only, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .slash.star-only, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .slash.star-only {\n color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .slash.hover-disabled, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .slash.hover-disabled, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .slash.hover-disabled, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .slash.hover-disabled {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .created-time.text-review, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .created-time.text-review, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .created-time.text-review, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .created-time.text-review {\n color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .created-time.star-only, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .created-time.star-only, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .created-time.star-only, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .created-time.star-only {\n color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-2 .btn-item-wrap:hover .created-time.hover-disabled, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:active .created-time.hover-disabled, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap:focus .created-time.hover-disabled, covet-pics-gallery-item.hover-animation-2 .btn-item-wrap.hover-preview .created-time.hover-disabled {\n color: #000000;\n}\n\ncovet-pics-gallery-item.hover-animation-3 .info {\n transform: none;\n text-align: center;\n width: 70%;\n height: 70%;\n top: 0;\n bottom: 0;\n right: 0;\n border-right: 2px solid var(--covet-item-label-color);\n border-bottom: 2px solid var(--covet-item-label-color);\n visibility: visible !important;\n transition: all calc(var(--covet-item-animation-duration-base) * 2.5 / 5) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-3 .info .btn {\n position: relative;\n margin: 0 auto;\n overflow: hidden;\n left: 50%;\n top: 50%;\n text-align: center;\n width: 100%;\n padding-left: 10px;\n padding-right: 10px;\n transform: translate(-50%, -50%);\n z-index: 3;\n}\ncovet-pics-gallery-item.hover-animation-3 .info .btn.star-rating {\n position: relative;\n display: flex;\n justify-content: center;\n margin: 0 auto;\n overflow: hidden;\n left: 50%;\n top: 50%;\n text-align: center;\n width: 100%;\n padding-left: 10px;\n padding-right: 10px;\n z-index: 3;\n}\ncovet-pics-gallery-item.hover-animation-3 .description {\n position: absolute;\n box-sizing: border-box;\n display: flex;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n padding: 32px;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-gallery-item.hover-animation-3 .description {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-gallery-item.hover-animation-3 .description.size-xs {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-gallery-item.hover-animation-3 .description {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-gallery-item.hover-animation-3 .description.size-sm {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n}\ncovet-pics-gallery-item.hover-animation-3 .caption {\n position: relative;\n text-align: center;\n width: 100%;\n height: 100%;\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n font-size: var(--covet-item-detail-caption-font-size);\n line-height: 1.4;\n max-height: var(--covet-item-detail-caption-max-height);\n -webkit-line-clamp: var(--covet-item-detail-caption-max-lines);\n margin: auto;\n white-space: pre-line;\n}\ncovet-pics-gallery-item.hover-animation-3 .item-open-icon {\n margin: 0 auto;\n margin-bottom: 12px;\n display: block;\n visibility: hidden;\n}\ncovet-pics-gallery-item.hover-animation-3 .rating.text-review {\n position: absolute;\n display: flex;\n align-items: center;\n top: 0;\n left: 50%;\n transform: translate(-50%, 20px);\n}\ncovet-pics-gallery-item.hover-animation-3 .rating.info-rating {\n position: relative;\n z-index: 4;\n left: 0;\n display: flex;\n transform: none;\n align-items: center;\n margin-left: 13px;\n padding-left: 13px;\n}\ncovet-pics-gallery-item.hover-animation-3 .rating.info-rating:before {\n content: \"\";\n display: block;\n position: absolute;\n width: 1px;\n height: 14px;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n background-color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-3 .icon-star {\n width: 10px;\n height: 10px;\n display: flex;\n}\ncovet-pics-gallery-item.hover-animation-3 .svg-star {\n width: 100%;\n height: 100%;\n}\ncovet-pics-gallery-item.hover-animation-3 .svg-star path {\n fill: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-3 .svg-star.text-review path {\n transition: all var(--covet-item-animation-duration-base) ease-out;\n fill: #000000;\n}\ncovet-pics-gallery-item.hover-animation-3 .rating-data {\n line-height: 1.4;\n font-size: 14px;\n margin-left: 4px;\n color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-3 .rating-data.text-review {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-3 .name-data {\n z-index: 4;\n box-sizing: border-box;\n overflow: hidden;\n position: absolute;\n bottom: 0;\n left: 50%;\n opacity: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n max-width: calc(100% - 40px);\n width: 100%;\n transform: translate(-50%, -10px);\n transition: all var(--covet-item-animation-duration-base) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-3 .name-data.text-review {\n z-index: 1;\n transform: translate(-50%, -20px);\n opacity: 1;\n}\ncovet-pics-gallery-item.hover-animation-3 .name-data.star-only {\n z-index: 1;\n transform: translate(-50%, -20px);\n opacity: 1;\n}\ncovet-pics-gallery-item.hover-animation-3 .username {\n line-height: 1.4;\n font-size: 14px;\n color: var(--covet-item-label-color);\n margin: 0;\n font-weight: 400;\n max-width: calc((100% - 16px) / 2);\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\ncovet-pics-gallery-item.hover-animation-3 .username.text-review {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-3 .username.star-only {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-3 .slash {\n font-size: 14px;\n color: var(--covet-item-label-color);\n margin-left: 2px;\n margin-right: 2px;\n font-weight: 400;\n}\ncovet-pics-gallery-item.hover-animation-3 .slash.text-review {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-3 .slash.star-only {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-3 .created-time {\n display: block;\n font-size: 14px;\n line-height: 1.4;\n max-width: calc((100% - 16px) / 2);\n color: var(--covet-item-label-color);\n font-weight: 400;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\ncovet-pics-gallery-item.hover-animation-3 .created-time.text-review {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-3 .created-time.star-only {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-3 .overlay-effect.text-review {\n display: block;\n opacity: 0;\n transition: all var(--covet-item-animation-duration-base) ease-out;\n}\n\ncovet-pics-gallery-item.hover-animation-3 .btn-item-wrap:hover .info, covet-pics-gallery-item.hover-animation-3 .btn-item-wrap:active .info, covet-pics-gallery-item.hover-animation-3 .btn-item-wrap:focus .info, covet-pics-gallery-item.hover-animation-3 .btn-item-wrap.hover-preview .info {\n width: 85%;\n height: 85%;\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-3 .btn-item-wrap:hover .item-open-icon, covet-pics-gallery-item.hover-animation-3 .btn-item-wrap:active .item-open-icon, covet-pics-gallery-item.hover-animation-3 .btn-item-wrap:focus .item-open-icon, covet-pics-gallery-item.hover-animation-3 .btn-item-wrap.hover-preview .item-open-icon {\n visibility: visible;\n}\ncovet-pics-gallery-item.hover-animation-3 .btn-item-wrap:hover .overlay-effect.text-review, covet-pics-gallery-item.hover-animation-3 .btn-item-wrap:active .overlay-effect.text-review, covet-pics-gallery-item.hover-animation-3 .btn-item-wrap:focus .overlay-effect.text-review, covet-pics-gallery-item.hover-animation-3 .btn-item-wrap.hover-preview .overlay-effect.text-review {\n background: var(--covet-item-hover-color-to);\n transition: all var(--covet-item-animation-duration-base) ease-out;\n opacity: 1;\n z-index: 3;\n}\n\ncovet-pics-gallery-item.hover-animation-4 .info {\n text-align: center;\n transition: all calc(var(--covet-item-animation-duration-base) * 2.5 / 5) ease-out;\n transform: translateY(100%);\n bottom: 0;\n width: 75%;\n padding: 0 25px;\n top: auto !important;\n visibility: visible;\n opacity: 1;\n background-color: var(--covet-item-hover-border-color);\n}\ncovet-pics-gallery-item.hover-animation-4 .info .btn {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin: 0 auto;\n width: 100%;\n padding: 40px 0 40px 0;\n text-align: left;\n}\ncovet-pics-gallery-item.hover-animation-4 .info .btn .dynamic-fill {\n fill: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-4 .overlay-effect {\n background-color: var(--covet-item-hover-border-color);\n}\ncovet-pics-gallery-item.hover-animation-4 .description {\n position: absolute;\n box-sizing: border-box;\n display: flex;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n padding: 32px;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-gallery-item.hover-animation-4 .description {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-gallery-item.hover-animation-4 .description.size-xs {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-gallery-item.hover-animation-4 .description {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-gallery-item.hover-animation-4 .description.size-sm {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n}\ncovet-pics-gallery-item.hover-animation-4 .caption {\n position: relative;\n text-align: center;\n width: 100%;\n height: 100%;\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n font-size: var(--covet-item-detail-caption-font-size);\n line-height: 1.4;\n max-height: var(--covet-item-detail-caption-max-height);\n -webkit-line-clamp: var(--covet-item-detail-caption-max-lines);\n margin: auto;\n white-space: pre-line;\n}\ncovet-pics-gallery-item.hover-animation-4 .item-open-icon {\n position: absolute;\n z-index: 4;\n right: 0;\n margin: 18px 18px;\n display: block;\n opacity: 0;\n visibility: hidden;\n}\ncovet-pics-gallery-item.hover-animation-4 .rating {\n position: relative;\n z-index: 4;\n display: flex;\n align-items: center;\n}\ncovet-pics-gallery-item.hover-animation-4 .rating.text-review {\n position: absolute;\n top: 0;\n left: 50%;\n transform: translate(-50%, 20px);\n}\ncovet-pics-gallery-item.hover-animation-4 .icon-star {\n width: 10px;\n height: 10px;\n display: flex;\n}\ncovet-pics-gallery-item.hover-animation-4 .svg-star {\n width: 100%;\n height: 100%;\n}\ncovet-pics-gallery-item.hover-animation-4 .svg-star path {\n fill: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-4 .svg-star.text-review path {\n transition: all var(--covet-item-animation-duration-base) ease-out;\n fill: #000000;\n}\ncovet-pics-gallery-item.hover-animation-4 .rating-data {\n line-height: 1.4;\n font-size: 14px;\n margin-left: 4px;\n color: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-4 .rating-data.text-review {\n color: #000000;\n}\ncovet-pics-gallery-item.hover-animation-4 .name-data.text-review, covet-pics-gallery-item.hover-animation-4 .name-data.star-only {\n z-index: 4;\n box-sizing: border-box;\n overflow: hidden;\n position: absolute;\n bottom: 0;\n left: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n max-width: calc(100% - 40px);\n width: 100%;\n transform: translate(-50%, -20px);\n transition: all var(--covet-item-animation-duration-base) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-4 .username.text-review, covet-pics-gallery-item.hover-animation-4 .username.star-only {\n line-height: 1.4;\n font-size: 14px;\n color: #000000;\n margin: 0;\n font-weight: 400;\n max-width: calc((100% - 16px) / 2);\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\ncovet-pics-gallery-item.hover-animation-4 .slash.text-review, covet-pics-gallery-item.hover-animation-4 .slash.star-only {\n font-size: 14px;\n color: #000000;\n margin-left: 2px;\n margin-right: 2px;\n font-weight: 400;\n}\ncovet-pics-gallery-item.hover-animation-4 .created-time.text-review, covet-pics-gallery-item.hover-animation-4 .created-time.star-only {\n display: block;\n font-size: 14px;\n line-height: 1.4;\n color: #000000;\n font-weight: 400;\n max-width: calc((100% - 16px) / 2);\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n\ncovet-pics-gallery-item.hover-animation-4 .btn-item-wrap:hover .info, covet-pics-gallery-item.hover-animation-4 .btn-item-wrap:active .info, covet-pics-gallery-item.hover-animation-4 .btn-item-wrap:focus .info, covet-pics-gallery-item.hover-animation-4 .btn-item-wrap.hover-preview .info {\n opacity: 1;\n z-index: 5;\n transform: translateY(0);\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-4 .btn-item-wrap:hover .overlay-effect, covet-pics-gallery-item.hover-animation-4 .btn-item-wrap:active .overlay-effect, covet-pics-gallery-item.hover-animation-4 .btn-item-wrap:focus .overlay-effect, covet-pics-gallery-item.hover-animation-4 .btn-item-wrap.hover-preview .overlay-effect {\n opacity: 0.2;\n}\ncovet-pics-gallery-item.hover-animation-4 .btn-item-wrap:hover .overlay-effect.text-review, covet-pics-gallery-item.hover-animation-4 .btn-item-wrap:active .overlay-effect.text-review, covet-pics-gallery-item.hover-animation-4 .btn-item-wrap:focus .overlay-effect.text-review, covet-pics-gallery-item.hover-animation-4 .btn-item-wrap.hover-preview .overlay-effect.text-review {\n opacity: 0;\n}\ncovet-pics-gallery-item.hover-animation-4 .btn-item-wrap:hover .item-open-icon, covet-pics-gallery-item.hover-animation-4 .btn-item-wrap:active .item-open-icon, covet-pics-gallery-item.hover-animation-4 .btn-item-wrap:focus .item-open-icon, covet-pics-gallery-item.hover-animation-4 .btn-item-wrap.hover-preview .item-open-icon {\n opacity: 1;\n visibility: visible;\n}\n\ncovet-pics-gallery-item.hover-animation-5 .info {\n position: absolute;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n text-align: right;\n bottom: -10px;\n height: 40px;\n left: auto;\n transition: all calc(var(--covet-item-animation-duration-base) * 2.5 / 5) ease-out;\n padding: 0;\n transform: translateY(25px);\n right: 40px;\n visibility: visible !important;\n top: auto !important;\n}\ncovet-pics-gallery-item.hover-animation-5 .info .btn {\n position: relative;\n display: inline-block;\n margin: 0 !important;\n overflow: hidden;\n cursor: pointer;\n padding: 0;\n line-height: 40px;\n}\ncovet-pics-gallery-item.hover-animation-5 .info .btn.source-instagram.show {\n padding-right: calc(var(--covet-item-label-font-size) + 10px);\n}\ncovet-pics-gallery-item.hover-animation-5 .description {\n position: absolute;\n box-sizing: border-box;\n display: flex;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n padding: 32px;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-gallery-item.hover-animation-5 .description {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-gallery-item.hover-animation-5 .description.size-xs {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-gallery-item.hover-animation-5 .description {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-gallery-item.hover-animation-5 .description.size-sm {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n}\ncovet-pics-gallery-item.hover-animation-5 .caption {\n position: relative;\n text-align: center;\n width: 100%;\n height: 100%;\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n font-size: var(--covet-item-detail-caption-font-size);\n line-height: 1.4;\n max-height: var(--covet-item-detail-caption-max-height);\n -webkit-line-clamp: var(--covet-item-detail-caption-max-lines);\n margin: auto;\n white-space: pre-line;\n}\ncovet-pics-gallery-item.hover-animation-5 .item-open-icon {\n display: block;\n}\ncovet-pics-gallery-item.hover-animation-5 .overlay-effect {\n visibility: hidden;\n display: block;\n opacity: 1;\n border: 1px solid #000000;\n border-color: var(--covet-item-hover-border-color);\n background: none;\n transition: all calc(var(--covet-item-animation-duration-base) * 3.5 / 5) cubic-bezier(0.39, 0.575, 0.565, 1);\n}\ncovet-pics-gallery-item.hover-animation-5 .item-open-icon {\n position: absolute;\n top: 50%;\n transform: translate(0, -50%);\n right: 0;\n}\ncovet-pics-gallery-item.hover-animation-5 .rating {\n position: absolute;\n box-sizing: border-box;\n top: 0;\n left: 0;\n width: 100%;\n height: 40px;\n display: flex;\n align-items: center;\n padding-left: 40px;\n padding-right: 40px;\n transform: translateY(-27px);\n transition: all calc(var(--covet-item-animation-duration-base) * 2.5 / 5) ease-out;\n z-index: 4;\n}\ncovet-pics-gallery-item.hover-animation-5 .rating.text-review {\n z-index: 1;\n position: absolute;\n width: auto;\n height: auto;\n top: 0;\n left: 50%;\n transform: translate(-50%, 20px);\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-gallery-item.hover-animation-5 .rating:not(.text-review) {\n display: none;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-gallery-item.hover-animation-5 .rating:not(.text-review).size-xs {\n display: none;\n }\n}\ncovet-pics-gallery-item.hover-animation-5 .icon-star {\n display: flex;\n width: 10px;\n height: 10px;\n margin-right: 10px;\n opacity: 0.5;\n}\ncovet-pics-gallery-item.hover-animation-5 .icon-star.active {\n opacity: 1;\n}\ncovet-pics-gallery-item.hover-animation-5 .icon-star.active .svg-star path {\n fill: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-5 .icon-star.active.text-review {\n margin-right: 0;\n}\ncovet-pics-gallery-item.hover-animation-5 .icon-star.active.text-review .svg-star path {\n fill: #000000;\n}\ncovet-pics-gallery-item.hover-animation-5 .svg-star {\n width: 100%;\n height: 100%;\n}\ncovet-pics-gallery-item.hover-animation-5 .svg-star path {\n fill: var(--covet-item-label-color);\n}\ncovet-pics-gallery-item.hover-animation-5 .rating-data {\n line-height: 1.4;\n font-size: 15px;\n font-weight: bold;\n margin-left: auto;\n color: var(--covet-item-label-color);\n text-wrap: nowrap;\n}\ncovet-pics-gallery-item.hover-animation-5 .rating-data.text-review {\n color: #000000;\n font-weight: 400;\n font-size: 14px;\n margin-left: 4px;\n}\ncovet-pics-gallery-item.hover-animation-5 .rating-data.star-only {\n color: #000000;\n font-weight: 400;\n font-size: 14px;\n margin-left: 4px;\n}\ncovet-pics-gallery-item.hover-animation-5 .name-data.text-review, covet-pics-gallery-item.hover-animation-5 .name-data.star-only {\n z-index: 1;\n box-sizing: border-box;\n overflow: hidden;\n position: absolute;\n bottom: 0;\n left: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n max-width: calc(100% - 40px);\n width: 100%;\n transform: translate(-50%, -20px);\n transition: all var(--covet-item-animation-duration-base) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-5 .username.text-review, covet-pics-gallery-item.hover-animation-5 .username.star-only {\n line-height: 1.4;\n font-size: 14px;\n color: #000000;\n margin: 0;\n font-weight: 400;\n max-width: calc((100% - 16px) / 2);\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\ncovet-pics-gallery-item.hover-animation-5 .slash.text-review, covet-pics-gallery-item.hover-animation-5 .slash.star-only {\n font-size: 14px;\n color: #000000;\n margin-left: 2px;\n margin-right: 2px;\n font-weight: 400;\n}\ncovet-pics-gallery-item.hover-animation-5 .created-time.text-review, covet-pics-gallery-item.hover-animation-5 .created-time.star-only {\n display: block;\n font-size: 14px;\n line-height: 1.4;\n max-width: calc((100% - 16px) / 2);\n color: #000000;\n font-weight: 400;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n\ncovet-pics-gallery-item.hover-animation-5 .btn-item-wrap:hover .info, covet-pics-gallery-item.hover-animation-5 .btn-item-wrap:active .info, covet-pics-gallery-item.hover-animation-5 .btn-item-wrap:focus .info, covet-pics-gallery-item.hover-animation-5 .btn-item-wrap.hover-preview .info {\n opacity: 1;\n z-index: 5;\n transform: translateY(-10px);\n width: calc(100% - 40px);\n align-items: center;\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-5 .btn-item-wrap:hover .overlay-effect, covet-pics-gallery-item.hover-animation-5 .btn-item-wrap:active .overlay-effect, covet-pics-gallery-item.hover-animation-5 .btn-item-wrap:focus .overlay-effect, covet-pics-gallery-item.hover-animation-5 .btn-item-wrap.hover-preview .overlay-effect {\n z-index: 2;\n visibility: visible;\n border-width: 40px;\n border-color: var(--covet-item-hover-border-color);\n width: calc(100% - 80px);\n height: calc(100% - 80px);\n}\ncovet-pics-gallery-item.hover-animation-5 .btn-item-wrap:hover .rating, covet-pics-gallery-item.hover-animation-5 .btn-item-wrap:active .rating, covet-pics-gallery-item.hover-animation-5 .btn-item-wrap:focus .rating, covet-pics-gallery-item.hover-animation-5 .btn-item-wrap.hover-preview .rating {\n transform: translateY(0);\n transition: all calc(var(--covet-item-animation-duration-base) * 4 / 5) ease-out;\n}\ncovet-pics-gallery-item.hover-animation-5 .btn-item-wrap:hover .rating.text-review, covet-pics-gallery-item.hover-animation-5 .btn-item-wrap:active .rating.text-review, covet-pics-gallery-item.hover-animation-5 .btn-item-wrap:focus .rating.text-review, covet-pics-gallery-item.hover-animation-5 .btn-item-wrap.hover-preview .rating.text-review {\n transform: translate(-50%, 20px);\n}";
|
|
176
176
|
|
|
177
177
|
const CovetPicsGalleryItem = class {
|
|
178
178
|
constructor(hostRef) {
|
|
@@ -321,10 +321,10 @@ export class CovetPicsGalleryGrid {
|
|
|
321
321
|
: `post created ${getDateFromTimestamp(createdTime)}`;
|
|
322
322
|
}
|
|
323
323
|
renderStandardItem(item, idx, itemsLength) {
|
|
324
|
-
return (h("covet-pics-gallery-item", { class: { "grid-item": this.layout === "grid", "collage-item": this.layout === "collage" }, highlighted: this.isHighlighted(idx), "image-url": getCoverImage(item.cover_images.medium_resolution, item.images.medium_resolution), "image-high-resolution-url": getCoverImage(item.cover_images.high_resolution, item.images.high_resolution), "image-responsive-sizes": getSizesForResponsiveImage(this.settings.gallery_photos_per_row, this.settings.gallery_mobile_photos_per_row, this.isHighlighted(idx)), "item-id": item.id, "item-source": item.source, "item-index": idx, caption: item.caption, "item-type": item.data_type, links: item.links, url: item.url, rating: item.rating !== null ? item.rating : 0, "user-name": item.username, "created-time": item.created_time, role: "listitem", "aria-label": `${this.layout}-item ${idx + 1}/${itemsLength}`, "alt-tag": this.itemImgAltTag(item.alt_tag, item.caption, item.created_time), appStore: this.appStore }));
|
|
324
|
+
return (h("covet-pics-gallery-item", { class: { "grid-item": this.layout === "grid", "collage-item": this.layout === "collage" }, highlighted: this.isHighlighted(idx), "image-url": getCoverImage(item.cover_images.medium_resolution, item.images.medium_resolution), "image-high-resolution-url": getCoverImage(item.cover_images.high_resolution, item.images.high_resolution), "image-responsive-sizes": getSizesForResponsiveImage(this.settings.gallery_photos_per_row, this.settings.gallery_mobile_photos_per_row, this.isHighlighted(idx)), "item-id": item.id, "item-source": item.source, "item-index": idx, "item-size": this.itemSize, caption: item.caption, "item-type": item.data_type, links: item.links, url: item.url, rating: item.rating !== null ? item.rating : 0, "user-name": item.username, "created-time": item.created_time, role: "listitem", "aria-label": `${this.layout}-item ${idx + 1}/${itemsLength}`, "alt-tag": this.itemImgAltTag(item.alt_tag, item.caption, item.created_time), appStore: this.appStore }));
|
|
325
325
|
}
|
|
326
326
|
renderStandardUploadItem(item, idx, itemsLength) {
|
|
327
|
-
return h("covet-pics-gallery-item", { class: { "grid-item": this.layout === "grid", "collage-item": this.layout === "collage", "highlighted": this.isHighlighted(idx) }, "image-url": item.imageUrl, "item-source": item.source, "item-index": idx, appStore: this.appStore, "aria-label": `click on for upload image in gallery, ${this.layout}-item ${idx + 1}/${itemsLength},`, role: "listitem" });
|
|
327
|
+
return h("covet-pics-gallery-item", { class: { "grid-item": this.layout === "grid", "collage-item": this.layout === "collage", "highlighted": this.isHighlighted(idx) }, "image-url": item.imageUrl, "item-source": item.source, "item-index": idx, "item-size": this.itemSize, appStore: this.appStore, "aria-label": `click on for upload image in gallery, ${this.layout}-item ${idx + 1}/${itemsLength},`, role: "listitem" });
|
|
328
328
|
}
|
|
329
329
|
renderDetailUploadItem(item, idx, itemsLength) {
|
|
330
330
|
return h("covet-pics-gallery-item-detail", { class: { "grid-item": this.layout === "grid", "collage-item": this.layout === "collage", "highlighted": this.isHighlighted(idx) }, "image-url": item.imageUrl, "item-source": item.source, "item-index": idx, "item-size": this.itemSize, appStore: this.appStore, "aria-label": `click on for upload image in gallery, ${this.layout}-item ${idx + 1}/${itemsLength},`, role: "listitem" });
|
|
@@ -358,7 +358,7 @@ export class CovetPicsGalleryGrid {
|
|
|
358
358
|
return cssVars;
|
|
359
359
|
}
|
|
360
360
|
render() {
|
|
361
|
-
return (h(Host, { key: '
|
|
361
|
+
return (h(Host, { key: '908c4fa5542aa5945dc83ee26ffd36f642088b5d', role: "region", style: this.setCSSVariables() }, this.settings.show_header && this.renderHeader(), this.filtersEnabled && ["style_1", "style_2"].includes(this.settings.tags_style) && this.renderStandardFilters(), this.filtersEnabled && ["style_3", "style_4"].includes(this.settings.tags_style) && this.renderModalFilters(), h("div", { key: '2bfff46761460e385a9749031607d62ca98fdf89', class: `gallery ${this.layout}`, role: "list", "aria-label": `gallery of ${this.items.length} items` }, this.layout === "collage" && h("div", { key: '5a1eff3c7da0d71a84838b62a2756da7048158f3', class: "grid-sizer" }), this.layout === "collage" && h("div", { key: '06974019ad5c2985f7b1725b92cbd42c3c258921', class: "gutter-sizer" }), this.settings.item_style === "standard" && this.items.map((item, idx) => item.source === "upload_widget"
|
|
362
362
|
? this.renderStandardUploadItem(item, idx, this.items.length)
|
|
363
363
|
: this.renderStandardItem(item, idx, this.items.length)), this.settings.item_style !== "standard" && this.items.map((item, idx) => item.source === "upload_widget"
|
|
364
364
|
? this.renderDetailUploadItem(item, idx, this.items.length)
|
|
@@ -1617,6 +1617,7 @@ covet-pics-gallery-item.hover-animation-5 .rating-data {
|
|
|
1617
1617
|
font-weight: bold;
|
|
1618
1618
|
margin-left: auto;
|
|
1619
1619
|
color: var(--covet-item-label-color);
|
|
1620
|
+
text-wrap: nowrap;
|
|
1620
1621
|
}
|
|
1621
1622
|
covet-pics-gallery-item.hover-animation-5 .rating-data.text-review {
|
|
1622
1623
|
color: #000000;
|