.storeMain { display: flex; flex-direction: column; grid-gap: 0px; } .storeMainTop { 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); /*border: solid 1px rgba(0,0,0,0.1);*/ } .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.75); 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; } .storeMainMidInsideSecWoT { display: flex; flex-direction: row; grid-gap: 10px; } @media (max-width: 576px) { .storeMainMidInsideSecWoT { flex-direction: column; } } .storeMainMidInsideSecAction { } .storeMainMidInsideSecWoTSec { display: flex; flex-direction: column; grid-gap: 5px; width: 100%; } .storeMainMidInsideSecWoTSecPeople { display: flex; flex-direction: row; grid-gap: 5px; } .storeMainMidInsideSecWoTSecPeoplePerson { transition: ease 0.3s; min-width: 40px; max-width: 40px; min-height: 40px; min-width: 40px; background: rgba(255,255,255,0.75); backdrop-filter: blur(5px); border-radius: 100%; border: solid 3px white; box-shadow: 0 0 4px 0 rgb(0,0,0,0.5); display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; overflow: hidden; margin-left: -20px; color: rgba(0,0,0,0.5); font-weight: 700; font-size: 14px; } .storeMainMidInsideSecWoTSecPeoplePerson:first-child { margin: 0; } .storeMainMidInsideSecWoTSecPeoplePerson:hover { margin: 0 20px 0 0; transform: translateY(-5px); border: solid 3px rgb(255,153,0); box-shadow: 0 0 0px 0 rgb(0,0,0,0.5); } .storeMainMidInsideSecWoTSecPeoplePersonImg { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; } .storeMainMidInsideSecUser { width: 100%; display: flex; flex-direction: row; justify-content: space-between; grid-gap: 10px; background: white; border-radius: 5px; padding: 5px 15px; }