.image-center-columns { display: flex; align-items: center; justify-content: center; gap: 32px; } .image-side-text-content { text-align: center; font-size: 18px; color: #222; margin: 0 8px; transition: color 0.2s; } .image-center-image { display: flex; align-items: center; justify-content: center; } .image-left-text-right, .image-right-text-left { display: flex; align-items: center; gap: 40px; box-shadow: 0 4px 24px rgba(0,0,0,0.06); transition: box-shadow 0.2s; background: #fff; } .image-left-text-right:hover, .image-right-text-left:hover, .image-center-text-sides:hover, .image-top-text-bottom:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.12); } .image-left-image, .image-right-image { display: flex; align-items: center; justify-content: center; } .image-left-text-content, .image-right-text-content { font-size: 20px; color: #222; text-align: left; margin: 0 8px; transition: color 0.2s; } .image-top-text-bottom { display: flex; flex-direction: column; align-items: center; gap: 24px; box-shadow: 0 4px 24px rgba(0,0,0,0.06); background: #fff; transition: box-shadow 0.2s; } .image-bottom-text-content { font-size: 18px; color: #222; text-align: center; margin-top: 8px; margin-bottom: 0; transition: color 0.2s; } .image-ui-rounded img, .image-ui-rounded { border-radius: 18px !important; box-shadow: 0 2px 16px rgba(0,0,0,0.10); transition: box-shadow 0.2s, transform 0.2s; } .image-ui-rounded img:hover, .image-ui-rounded:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.18); transform: translateY(-2px) scale(1.03); } @media (max-width: 900px) { .image-center-columns { flex-direction: column; gap: 20px; } .image-left-text-right, .image-right-text-left { flex-direction: column; gap: 20px; } .image-left-text-content, .image-right-text-content { text-align: center; } } @media (max-width: 600px) { .image-center-columns, .image-left-text-right, .image-right-text-left { gap: 10px; } .image-bottom-text-content, .image-side-text-content { font-size: 16px; } .image-left-text-content, .image-right-text-content { font-size: 16px; } .image-center-text-sides, .image-left-text-right, .image-right-text-left, .image-top-text-bottom { padding-left: 12px !important; padding-right: 12px !important; } }