.productCardMain { transition: ease 0.4s; display: flex; flex-direction: column; grid-gap: 0px; position: relative; overflow: hidden; border-radius: 8px; background: white; box-shadow: 0 0 4px 0 rgba(0,0,0,0.05); padding: 10px; } .productCardMain:hover { box-shadow: 0 0 16px 0 rgba(0,0,0,0.2); } .productCardMainInside { width: 100%; display: flex; flex-direction: column; grid-gap: 15px; height: 100%; position: relative; } .productCardMainInsideTop { display: flex; flex-direction: column; position: relative; background: rgba(0,0,0,0.1); overflow: hidden; padding-top: 56.25%; border-radius: 6px; } .productCardMain:hover > .productCardMainInside > .productCardMainInsideTop { box-shadow: 0 0 6px 0 rgba(0,0,0,0.5); } .productCardMainInsideMid { width: 100%; display: flex; flex-direction: column; grid-gap: 5px; padding: 0 10px; flex-grow: 1; } .productCardMainInsideBot { display: flex; flex-direction: row; grid-gap: 10px; } .btnMain.productCardMainInsideBotBtn { flex-grow: 1; padding: 8px; font-weight: 700; flex-wrap: wrap; } .btnMain.productCardMainInsideBotBtn:hover { transform: scale(1.01); } .productCardMainInsideMidTitle { font-weight: 600; font-size: 21px; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; } .productCardMainInsideMidText { font-size: 14px; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 3; } .productCardMain:hover > .productCardMainInside > .productCardMainInsideTop > .productCardMainInsideTopPicture { transform: scale(1.02); } .productCardMainInsideTopPicture { transition: ease 0.6s; position: absolute; top: 0; bottom: 0; right: 0; left: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } .productCardMainInsideTopPictureImg { object-fit: cover; width: 100%; height: 100%; z-index: 1; position: absolute; top: 0; bottom: 0; right: 0; left: 0; } .prudctCardMainInsideTopIcon { opacity: 0.25; position: absolute; font-size: 42px; } .productCardMainInsideTopIcon { opacity: 0.25; position: absolute; font-size: 42px; } .productCardMainInsideTopVideo { transition: ease 0.6s; position: absolute; top: 0; bottom: 0; right: 0; left: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; z-index: 2; } .productCardMain:hover > .productCardMainInside > .productCardMainInsideTop > .productCardMainInsideTopVideo { transform: scale(1.02); opacity: 1; box-shadow: 0 0 8px 0 rgba(0,0,0,0.91); } .productCardMainInsideTopVideoClip { object-fit: cover; width: 100%; height: 100%; z-index: 2; position: absolute; top: 0; bottom: 0; right: 0; left: 0; } .productCardMainInsideTopDetailsTagIcon { opacity: 0.5; max-width: 15px; color: black; } .productCardMainInsideStore { width: 100%; display: flex; flex-direction: row; grid-gap: 5px; } .productCardMainInsideStoreLink { padding: 5px 10px; border-radius: 4px; background: rgba(255,153,0,0); color: rgba(0,0,0,0.5); display: flex; flex-direction: row; grid-gap: 5px; align-items: center; border: solid 1px rgba(0,0,0,0.1); } .productCardMainInsideStoreLink:hover { background: rgba(255,153,0,0.85); color: rgba(255,255,255,0.85); transform: scale(1.01); border: solid 1px rgba(0,0,0,0); } .productCardMainInsideStoreLinkIcon { max-width: 15px; } .productCardMainInsideStoreLinkText { font-size: 12px; font-weight: 800; } .productCardMainInsideStoreLinkDivider { width: 1px; height: 100%; max-height: 15px; background: rgba(255,255,255,0.1); } .productCardMainInsideBotBtnSpan { text-align: center; flex-grow: 1; } .productCardMainInsideBotBtnSpan.productCardMainInsideBotBtnSpanAlt { font-size: 14px; padding: 5px 15px; border-radius: 4px; background: rgba(0,0,0,0.05); border: solid 1px rgba(255,255,255,0.15); flex-grow: unset; }