diff --git a/src/styles/main.css b/src/styles/main.css index ad73037..dae47d1 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -1366,4 +1366,72 @@ img { box-shadow: var(--shadow); } -/* ... NewsDetail content styles ... */ \ No newline at end of file +/* ... NewsDetail content styles ... */ + +/* About.css Consolidated */ +.expert-profile { + margin-top: 4rem; + margin-bottom: 4rem; +} + +.profile-wrapper { + display: flex; + flex-direction: column; + gap: 3rem; + align-items: center; +} + +@media (min-width: 768px) { + .profile-wrapper { + flex-direction: row; + align-items: flex-start; + } +} + +.profile-image-container { + flex-shrink: 0; + width: 100%; + max-width: 350px; + /* Adjust as needed */ +} + +.profile-image { + width: 100%; + aspect-ratio: 1 / 1; + /* Enforce 1:1 Square aspect ratio */ + object-fit: cover; + /* Ensure image covers the square area */ + border-radius: 1rem; + box-shadow: var(--shadow); + border: 1px solid var(--border-color); +} + +.profile-content-container { + flex: 1; +} + +.profile-card { + background-color: var(--white); + padding: 2.5rem; + border-radius: 1rem; + box-shadow: var(--shadow); + border: 1px solid var(--border-color); + height: 100%; + display: flex; + align-items: center; +} + +.profile-list { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 1.25rem; +} + +.profile-list li { + font-size: 1.05rem; + color: var(--text-color); + font-weight: 500; +} \ No newline at end of file