.storeMain { display: flex; flex-direction: column; grid-gap: 0px; align-items: center; } .storeMainTop { width: 100%; display: flex; flex-direction: column; position: relative; padding-top: 35%; border-radius: 8px; background: rgba(0,0,0,0.05); overflow: hidden; box-shadow: 0 0 4px 0 rgb(0,0,0,0.5); align-items: center; } .storeMainMid { display: flex; flex-direction: column; grid-gap: 25px; justify-content: center; align-items: center; padding: 0 5%; } .storeMainMidInside { width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 25px; margin-top: -50px; border-radius: 8px; padding: 10px; background: rgba(255,255,255,0.85); z-index: 1; backdrop-filter: blur(10px); box-shadow: 0 0 4px 0 rgb(0,0,0,0.2); flex-wrap: wrap; } @media (max-width: 992px) { .storeMainMidInside { grid-template-columns: 1fr; } } .storeMainTopImg { object-fit: cover; width: 100%; height: 100%; z-index: 1; position: absolute; top: 0; bottom: 0; right: 0; left: 0; } .storeMainMidInsideSec { display: flex; flex-direction: row; grid-gap: 10px; } .storeMainMidInsideSec.storeMainMidInsideSecAlt { flex-direction: column; } .storeMainMidInsideSecProfilePic { height: 125px; width: 125px; min-height: 125px; min-width: 125px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: rgba(0,0,0,0.1); border-radius: 6px; position: relative; overflow: hidden; box-shadow: 0 0 6px 0 rgb(0,0,0,0.25); border: solid 4px white; } .storeMainMidInsideSecProfileDetails { display: flex; flex-direction: column; grid-gap: 5px; justify-content: space-between; } .storeMainMidInsideSecProfilePicImg { object-fit: cover; width: 100%; height: 100%; z-index: 1; position: absolute; top: 0; bottom: 0; right: 0; left: 0; } .storeMainMidInsideSecProfileDetailsName { font-weight: 600; font-size: 21px; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1; } .storeMainMidInsideSecProfileDetailsBio { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; } .storeMainMidInsideSecProfilePop { justify-self: center; align-self: end; padding: 5px 10px; border-radius: 4px; } .storeMainMidInsideSecUser { width: 100%; display: flex; flex-direction: row; justify-content: space-between; grid-gap: 10px; background: white; border-radius: 5px; padding: 5px 5px 5px 15px; border: solid 1px rgba(0,0,0,0.15); align-items: center; flex-wrap: wrap; } .btnMain.storeMainMidInsideSecUserBtn { padding: 5px 15px; flex-grow: 1; background: rgba(0,0,0,0.1); color: rgba(0,0,0,0.5); } .storeMainMidInsideSecUserText { display: flex; grid-gap: 10px; flex-wrap: wrap; flex-grow: 1; } .storeMainMidInsideSecUserTextLink { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1; flex-grow: 1; max-width: 300px; font-weight: 500; } .btnMain.storeMainMidInsideSecUserBtn.storeMainMidInsideSecUserBtnActive { background: rgb(255,153,0); color: white; }