body { margin: 0; font-family: Arial, sans-serif; display: flex; flex-direction: column; min-height: 100vh; background: #f9fafb; }
.middle-area { flex: 1; padding: 40px 20px; max-width: 1200px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.cms-row { display: flex; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; }
.cms-part { flex: 1; min-width: 300px; background: white; padding: 25px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
.cms-image { width: 100%; height: 180px; object-fit: cover; border-radius: 8px; margin-bottom: 15px; cursor: pointer; }
.single-part { display: flex; align-items: center; justify-content: space-between; flex-direction: row; gap: 30px; }
.single-part .text-wrap { flex: 1; }
.single-part .cms-image { width: 400px; height: auto; max-height: 300px; object-fit: contain; margin: 0; }

#imageModal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 9999; justify-content: center; align-items: center; }
#imageModal img { max-width: 90%; max-height: 90%; border-radius: 8px; }
#closeModal { position: absolute; top: 20px; right: 40px; color: white; font-size: 40px; cursor: pointer; font-weight: bold; }

@media (max-width: 768px) {
    .cms-part { display: flex !important; flex-direction: column !important; padding: 20px; }
    .cms-image { order: -1; width: 100% !important; max-height: 250px; margin-bottom: 20px !important; }
    .text-wrap { order: 2; }
    .single-part { gap: 10px; }
}