.guestDetails { display: flex; flex-direction: column; align-items: center; background-color: var(--Main-Brand-PalePeach); padding: var(--Spacing-x3) 0; border-radius: var(--Corner-radius-Medium); gap: var(--Spacing-x2); } .memberLevel { align-items: center; height: 32px; width: fit-content; } .memberLevelIcon { height: 100%; width: fit-content; } .rowTitle { margin-bottom: var(--Spacing-x1); } .userDetails { width: 80%; border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider); padding-bottom: var(--Spacing-x3); text-align: center; display: flex; flex-direction: column; gap: var(--Spacing-x1); color: var(--Scandic-Brand-Burgundy); align-items: center; } .totalPoints { display: flex; flex-direction: row; align-items: center; gap: var(--Spacing-x1); justify-content: space-between; padding-top: var(--Spacing-x3); } .totalPointsText { display: flex; gap: var(--Spacing-x-one-and-half); align-items: center; } .guest { display: flex; flex-direction: column; align-items: center; gap: var(--Spacing-x-half); } .memberNumber { color: var(--Scandic-Brand-Burgundy); } .contactInfoMobile { display: flex; flex-direction: column; gap: var(--Spacing-x-half); text-align: center; } .contactInfoDesktop { display: none; } @media (min-width: 768px) { .guest { align-items: flex-start; } .memberLevel { height: 24px; align-items: flex-start; } .userDetails { width: 100%; border-bottom: none; padding: 0; align-items: flex-start; } .guestDetails { align-items: flex-start; padding: var(--Spacing-x3) var(--Spacing-x-one-and-half); } .contactInfoMobile, .userDetailsTitle { display: none; } .contactInfoDesktop { display: flex; flex-direction: column; gap: var(--Spacing-x-half); } .totalPoints { padding: var(--Spacing-x-one-and-half) 0; justify-content: flex-start; } }