.generalInfo{ display: flex; flex-direction: column; flex-grow: 1; width: 30%; padding: 10px; } .cards{ display: flex; gap: 10px; padding: 10px; flex-direction: row; } .Cards{ display: flex; flex-direction: column; gap: 20px; margin: 20px; } .CompactCard{ display: flex; flex-direction: row; padding: 20px; width: 300px; height: 200px; align-items: center; gap: 20px; cursor: pointer; background-color: antiquewhite; border-width: 5px; border-color: rgb(85, 85, 85); border-radius: 5px; filter: drop-shadow(2px 4px 6px rgb(114, 114, 114)); } .CompactCard:hover { filter: drop-shadow(2px 4px 6px rgb(255, 255, 255)); } .data>h1 { font-size: large; font-weight: 1000; } .CompactCard>span { display: flex; flex-direction: row; align-items: end; } .motionCard{ gap: 20px; } .h{ display: flex; flex-direction: row; margin: 10px; gap: 10px; }