.landing-section { box-shadow: inset 0 7px 15px -7px rgba(0, 0, 0, 0.4), inset 0 -7px 15px -7px rgba(0, 0, 0, 0.4); padding: 2em 0; background: linear-gradient(90deg, rgba(60, 164, 65, 1) 0%, lighten(rgba(44, 119, 47, 1), 25%) 50%); //background: linear-gradient(90deg, rgba(156,157,157,0.5) 0%, rgba(44,62,80,0.8) 100%); //background: linear-gradient(90deg, rgba(160,75,140,1) 0%, rgba(231,101,200,0.9570027840237657) 50%, rgba(160,75,140,1) 100%); color: white; border-bottom: 0; } .profile-container { display: flex; justify-content: center; align-items: center; } .profile-content { } .profile-imgs-container { width: 28em; height: 28em; display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative; margin-right: 3em; } @keyframes animate { 0% { transform: perspective(1000px) rotateY(0deg) rotateZ(-45deg); } 100% { transform: perspective(1000px) rotateY(360deg) rotateZ(-45deg); } } .profile-imgs-wrapper:hover { animation: animate 20s linear infinite; } .profile-imgs-wrapper { transform: rotateZ(-45deg); border-radius: 5px; overflow: hidden; z-index: 3; } .profile-imgs { position: relative; } .profile-shadow { transform: perspective(1000px) rotateX(99deg); z-index: 1; position: absolute; bottom: -104px; width: 80%; height: 50%; border-radius: 50%; //background-color: rgba(255, 255, 255, 0.8); background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); filter: blur(45px); // box-shadow: // 0 0 10px 0px rgba(255,255,255,0.8); } img.main-profile { } .additional-profile, .additional-profile-filter { position: absolute; } .additional-profile { z-index: 1; } .additional-profile-filter { z-index: 2; } .profile-content { margin-left: 1em; display: flex; justify-content: center; align-items: center; flex-direction: column; } .profile-content .title-1 { text-align: center; font-size: 3em; margin-bottom: 0.4em; line-height: 1.5em; } .profile-content .title-2 { text-align: center; font-size: 1.5em; margin-bottom: 1em; } .profile-content .subtitle { font-size: 1.5em; } @media (max-width: $sm-breakpoint) { .profile-container { flex-direction: column; } .profile-imgs-container { margin-right: 0; } .profile-content { margin-left: 0; margin-top: -1em; .title-1 { font-size: 2.5em; } .title-2 { font-size: 1.2em; } } .profile-imgs-container { transform: scale(0.7); margin-top: -4em; } } @media (max-width: $xs-breakpoint) { .landing-section { padding-top: 0; } .profile-content { margin-top: -4em; padding: 0 1em; .title-1 { font-size: 2.5em; } .title-2 { font-size: 1.2em; } } .profile-imgs-container { transform: scale(0.6); margin-top: -4em; } }