/* "What they're practicing" on teal (see practice-f.js) */
.sec-calm section.practice.pf { background: var(--teal) !important; }
.pf .obj, .pf .spark, .pf .areas-rows { display: none !important; }
.pf .wrap { width: var(--colw) !important; max-width: none !important; padding-inline: 0 !important; display: grid !important; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.pf-ph { border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 4.2; }
.pf-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 68% center; display: block; }
.pf .head { text-align: left !important; align-items: flex-start !important; justify-items: start !important; margin: 0 0 32px !important; }
.pf .head h2.display { color: #FBF2E4 !important; text-align: left !important; }
.pf .head .sub { color: rgba(251,242,228,.88) !important; text-align: left !important; margin-left: 0 !important; max-width: 30em !important; }
.sec-calm section.practice.pf .areas { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 36px !important; border-top: 1px solid rgba(251,242,228,.2); margin: 0 !important; max-width: none !important; padding: 0 !important; list-style: none; }
.sec-calm section.practice.pf .areas li { display: flex !important; align-items: center; gap: 14px; padding: 18px 0 !important; margin: 0 !important; border: 0 !important; border-bottom: 1px solid rgba(251,242,228,.2) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; font: 400 19px/1.3 p22-mackinac-pro, "Fraunces", Georgia, serif !important; color: #FBF2E4 !important; }
.sec-calm section.practice.pf .areas li svg { width: 24px; height: 24px; flex: none; color: #F0B429 !important; stroke: currentColor; }
@media (max-width: 900px) { .pf .wrap { grid-template-columns: 1fr; gap: 36px; } .pf .areas { grid-template-columns: 1fr; } }
/* a little more room for the words, so the intro stays within three lines */
@media (min-width: 901px) { .pf .wrap { grid-template-columns: .88fr 1.12fr; gap: 72px; } }
@media (min-width: 901px) { .sec-calm section.practice.pf .head p { font-size: 21px !important; line-height: 1.4 !important; } }
@media (min-width: 901px) and (max-width: 1360px) { .pf .wrap { grid-template-columns: .78fr 1.22fr; gap: 56px; } }