COMMISSIONS BY MARIA

About

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --cream: #f7f2eb; --warm-white: #faf7f3; --clay: #c4856a; --dusty-rose: #d4a898; --deep: #2a1f1a; --mid: #6b4f42; --light-mid: #9e7d6f; --border: #e8ddd4; } /* ── SECTION WRAPPER ── */ .commission-section { max-width: 1100px; margin: 0 auto; padding: 80px 24px 100px; } /* ── EYEBROW ── */ .eyebrow { text-align: center; font-size: 11px; letter-spacing: 6px; text-transform: uppercase; color: var(--clay); margin-bottom: 14px; animation: fadeUp 0.8s ease both; } /* ── HEADING ── */ .commission-heading { text-align: center; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(36px, 5vw, 58px); font-weight: 400; color: var(--deep); line-height: 1.15; margin-bottom: 16px; animation: fadeUp 0.8s 0.1s ease both; } .commission-heading em { font-style: italic; color: var(--clay); } /* ── SUBLINE ── */ .subline { text-align: center; font-size: 17px; font-style: italic; color: var(--light-mid); margin-bottom: 60px; animation: fadeUp 0.8s 0.2s ease both; } /* ── MAIN GRID ── */ .commission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--border); animation: fadeUp 0.8s 0.3s ease both; } /* ── IMAGE SIDE ── */ .image-side { position: relative; overflow: hidden; min-height: 520px; background: #e8ddd4; } .image-side img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform 0.8s ease; } .commission-grid:hover .image-side img { transform: scale(1.03); } /* Soft overlay */ .image-side::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, transparent 60%, var(--warm-white) 100%); pointer-events: none; } /* ── CONTENT SIDE ── */ .content-side { background: var(--warm-white); padding: 60px 52px; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--border); } .content-tag { font-size: 10px; letter-spacing: 5px; text-transform