.cat-personalities-con { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem;}
.cat-personalities-item { width: 31%; padding: 1.5rem; background: var(--btnColor); border: 4px solid rgba(206, 154, 42, 0.27); border-radius: 1rem; }
.cat-personalities-item h3 { color: var(--priColor); }
.top-con { display: flex; justify-content: space-between; align-items: center; position: relative; padding: 1.5rem 0 1rem; }
.top-con::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; background: #D5B54A; height: 4px; border-radius: 5rem; }

.top-con figure img { clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%); }
.main-content p:last-of-type { margin: 0 !important; }
.subcontent { color: var(--priColor) !important; background: #A1A1EC42; display: flex; align-items: center; padding: 1rem 0 1rem 1rem !important; border-left: 5px solid var(--priColor); border-radius: .8rem; font-style: italic; }
.cat-personalities-item h4 { color: #424D5B; }

.open-modal-btn.btn-modal { background: var(--priColor); color: var(--whiteColor); width: 100%; padding: .8rem; clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%); }
.modal-content { background: var(--bgColor) !important; }
.personality-modal .close-modal-btn { position: absolute; top: 5px; right: 16px; background: transparent; border: none; color: #333; font-weight: 700; font-size: 1.8rem; cursor: pointer; z-index: 1; }
.modal-content .top-con::after { width: 90%; margin: 0 auto; text-align: center; left: 50%; transform: translateX(-50%); }

@media (max-width: 1200px) {
    .cat-personalities-item { width: 48%; }
}
@media (max-width: 1100px) {
    .cat-personalities-item { width: 47%; }
}
@media (max-width: 600px) {
    .cat-personalities-item { width: 100%; }
}