.local-container { display:flex; gap: 1.5rem; flex-direction: column; }
.local-wrap { padding: 2rem 2.25rem; background-color: #fff; border-right: 1px solid #32586d; color: #32586d; font-weight: 500; letter-spacing: 0.02rem; font-family: 'Pretendard'; white-space: nowrap; }
.local-group-wrap .local-wrap { border: none; }
.local-group-wrap { padding: 2rem 2.25rem; background-color: #fff; border-right: 1px solid #32586d; display: grid; grid-template-columns: repeat(2, 1fr); }
.local-group-wrap .local-wrap { padding: 0; }

.local-header { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
.local-header h3.local-name { font-weight: 400; font-size: 1.25rem; }
.local-header .local-website { font-size: 0.875rem; color: #ad8736; display: flex; gap: 0.25rem; padding-right: 1.25rem; }

.local-body { padding: 1.875rem 0 1.25rem 1.25rem; display: grid; gap: 3.25rem; grid-template-columns: repeat(4, auto); grid-template-areas: "list0 list1 list2 list-text"; }
.local-group-wrap .local-body { grid-template-columns: repeat(2, auto); grid-template-areas: "list0 list-text"; }

.local-officer-wrap { display: flex; flex-direction: column; gap: 1.25rem; align-items: center; }
.local-officer-wrap.list-0 { grid-area: list0; }
.local-officer-wrap.list-1 { grid-area: list1; }
.local-officer-wrap.list-2 { grid-area: list2; }
.local-officer-text-list { grid-area: list-text; }

.local-officer-photo { width: 6.125rem; height: 8.5rem; display: flex; justify-content: center; align-items: center; }
.local-officer-photo img { width: 100%; height: auto; }

.local-officer-info { display: flex; flex-direction: column; align-items: center; gap: 3px; }

.local-officer-role { font-size: 0.875rem; color: #6c6c6c; grid-area: officer-role; }
.local-officer-name { font-size: 1.125rem; grid-area: officer-name; }
.local-officer-church { font-size: 0.875rem; grid-area: officer-church; }

.local-officer-text-list { display: flex; flex-direction: column; gap: 0.875rem; }
.local-officer-text-wrap { display: grid; grid-template-areas: "officer-role officer-role""officer-name officer-church"; gap: 0.25rem; align-items: baseline; justify-content: start; }
.local-group-wrap .local-officer-text-wrap { grid-template-areas: "officer-role""officer-name""officer-church"; }

@media (max-width: 768px) {
    .local-body { grid-template-columns: repeat(2, 1fr); grid-template-areas: "list0 list1" "list2 list-text"; }
    .local-officer-text-list { border-left: none; }
    .local-group-wrap { grid-template-columns: 1fr; }
}

@media (max-width: 425px) {
    html {
        font-size: 10px;
    }
}