* { margin: 0; padding: 0; box-sizing: border-box; } body { background: #e7dfea; color: #000; overflow-x: hidden; } .hero { min-height: auto; display: grid; grid-template-columns: 140px minmax(620px, 1fr) 520px; align-items: start; padding: 30px 30px 0; gap: 40px; } .vertical-name { writing-mode: vertical-rl; transform: rotate(180deg); font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 8rem; line-height: 0.85; letter-spacing: -6px; text-transform: uppercase; padding-top: 10px; } .middle { position: relative; padding-top: 60px; margin-left: 0; max-width: 760px; } .menu { position: absolute; top: -40px; left: 0; font-size: 2rem; font-family: Arial, sans-serif; margin-bottom: 0; } .about-title { font-family: 'Montserrat', sans-serif; font-size: 3.2rem; font-weight: 900; text-transform: uppercase; line-height: 0.95; margin-bottom: 40px; margin-top: 0; } .image-wrap { width: 520px; display: flex; justify-content: flex-end; } .image-wrap img { width: 100%; height: 760px; object-fit: cover; display: block; } .bio { max-width: 100%; margin: 0; padding: 0 40px 0 0; font-family: 'Playfair Display', serif; font-size: 1rem; line-height: 1.65; color: #2d2d2d; } .bio p { margin-bottom: 28px; } .bio strong { font-weight: 700; } @media (max-width: 1100px) { .hero { grid-template-columns: 120px 1fr; } .image-wrap { grid-column: 1 / -1; margin-top: 40px; } .image-wrap img { height: auto; } } .footer { background: #af86ab; margin-top: 120px; padding: 20px 30px 10px; } .footer-nav { display: flex; justify-content: space-between; font-family: 'Montserrat', sans-serif; font-size: 0.95rem; font-weight: 700; margin-bottom: 40px; } .footer-name { font-family: 'Montserrat', sans-serif; font-size: 7rem; line-height: 0.9; font-weight: 900; letter-spacing: -5px; text-align: center; } @media (max-width: 700px) { .footer-nav { flex-direction: column; gap: 20px; } .footer-name { font-size: 3.5rem; } .hero { display: block; padding: 20px; } .vertical-name { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 4rem; letter-spacing: -3px; margin-bottom: 30px; } .menu { position: relative; top: 0; margin-bottom: 40px; } .about-title { font-size: 2.2rem; margin-bottom: 40px; } .image-wrap { width: 100%; margin-top: 40px; } .image-wrap img { width: 100%; height: auto; } .bio { margin-top: 30px; padding: 0 20px 40px 0; } }