.container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 48rem; width: 100%; margin-right: 1.6rem; border-radius: 1.6rem; gap: var(--Spacing-x2); padding: 0px 3.2rem; text-align: center; } .themeOne { --font-color: var(--Brand-Main-Strong, #4d001b); --script-color: var(--UI-Red-70, #ad0015); --divider-color: var(--UI-Red-10, #f7c1c2); background: var(--Theme-Primary-Light-Surface-Normal, #f7e1d5); } .themeTwo { --font-color: var(--Brand-Forest-Strong, #093021); --script-color: var(--UI-Green-70, #286806); --divider-color: var(--UI-Green-10, #badda8); background: var(--Brand-Forest-Subtle, #d2edaf); } .themeThree { --font-color: var(--Brand-Sea-Strong, #0d1440); --script-color: var(--UI-Blue-70, #1555b4); --divider-color: var(--UI-Blue-10, #c7d9f5); background: var(--Brand-Sea-Accent, #fff0c2); } .scriptContainer { display: grid; gap: 1rem; } .scriptedTitle { color: var(--script-color); font-family: var(--typography-Script-2-fontFamily); font-size: var(--typography-Script-2-fontSize); font-weight: var(--typography-Script-2-fontWeight); line-height: var(--typography-Script-2-lineHeight); letter-spacing: 0.48px; padding: 1rem; transform: rotate(-3deg); } .divider { border-bottom-color: var(--divider-color); } .heading { color: var(--font-color); } .bodyText { color: var(--font-color); text-align: center; font-size: var(--typography-Body-Regular-fontSize); font-weight: var(--typography-Body-Regular-fontWeight); line-height: var(--typography-Body-Regular-lineHeight); letter-spacing: 0.096px; } .buttonContainer { display: flex; gap: 0.8rem; justify-content: center; }