.p-forUsePlans { padding-block: var(--spc-24) var(--spc-36); background-color: var(--c-gray-300); @media (max-width: 1024px) { padding-block: var(--spc-16) var(--spc-32); }} .p-forUsePlans-head + .p-forUsePlans-content { margin-top: var(--spc-12);} .p-forUsePlans-content + .p-forUsePlans-bottom { margin-top: var(--spc-8);} .p-forUsePlans-bottom-inner { display: flex; flex-direction: column; gap: var(--spc-4);} .p-forUsePlans__subtitle { color: var(--c-blue-700); & + .p-forUsePlans__title { margin-top: var(--spc-2); }} .p-forUsePlans__title { color: var(--c-blue-900); span { color: var(--c-blue-500); }} .p-forUsePlans__list { display: flex; flex-wrap: wrap; gap: var(--spc-1); @media (max-width: 1024px) { flex-direction: column; gap: var(--spc-8); } & > li { flex: 1; display: flex; flex-direction: column; }} .p-forUsePlans__list-head { display: flex; align-items: center; gap: var(--spc-4); text-align: center; color: var(--c-blue-700); &:before, &::after { content: ''; display: block; flex: 1; height: .1rem; background-color: var(--c-white); } & + .p-forUsePlans__list-content { margin-top: var(--spc-4); }} .p-forUsePlans__list-content { flex: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spc-1); @media (max-width: 600px) { flex-direction: column; align-items: center; gap: var(--spc-4); } & > article { flex: 1; @media (max-width: 600px) { width: 100%; } }}