.hrc-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 270px));
    grid-auto-rows: minmax(220px, 1fr);
    gap: 20px;
    width: min(100%, 1140px);
    max-width: 100%;
    margin-inline: auto;
}

.hrc-card {
    position: relative;
    min-width: 0;
    min-height: 220px;
    perspective: 1000px;
    transform-origin: center;
    will-change: opacity, transform;
}

.hrc-card__inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
    transform-style: preserve-3d;
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
}

.hrc-card.is-flipped .hrc-card__inner { transform: rotateY(180deg); }

.hrc-card__face {
    box-sizing: border-box;
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 100%;
    padding: 26px 32px;
    border: .727px solid var(--wma-color-sand, #ddd2c2);
    border-radius: 14px;
    background: var(--wma-color-white, #fff);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.hrc-card__front { justify-content: flex-start; }
.hrc-card__back { transform: rotateY(180deg); overflow: hidden; }
.hrc-card__icon { display: inline-flex; flex: 0 0 3rem; align-items: center; justify-content: center; width: 3rem; height: 3rem; margin-bottom: .875rem; border-radius: 50%; background: var(--wma-color-copper, #b86f4a); transform-origin: center; will-change: transform; }
.hrc-card__icon svg { display: block; width: 1.75rem; height: auto; overflow: visible; }
.hrc-card__icon svg path { transform-origin: center; }
#page-container .hrc-card__front .hrc-card__title { width: 100%; margin: 0; color: var(--wma-color-charcoal, #252525); font-family: var(--wma-font-body, inherit); font-size: .875rem; font-style: normal; font-weight: 600; line-height: 1.3rem; text-align: left; text-wrap: pretty; }
.hrc-card__copy { width: 100%; height: 100%; overflow: auto; color: var(--wma-color-charcoal, #252525); font-family: var(--wma-font-body, inherit); font-size: .9375rem; line-height: 1.45rem; }
.hrc-card__copy > :first-child { margin-top: 0; }
.hrc-card__copy > :last-child { margin-bottom: 0; }
.hrc-flip-toggle { position: absolute; right: 12px; bottom: 10px; z-index: 4; display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; color: var(--wma-color-charcoal, #252525); background: var(--wma-color-sand, #eee6da); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .2s ease, background-color .2s ease, color .2s ease; }
.hrc-flip-toggle svg { display: block; width: 15px; height: 15px; }
.hrc-card:hover .hrc-flip-toggle, .hrc-card:focus-within .hrc-flip-toggle { opacity: 1; pointer-events: auto; }
.hrc-card:hover .hrc-flip-toggle { background: var(--wma-color-copper, #b86f4a); color: #fff; }
.hrc-card--flippable:hover { cursor: pointer; }
.hrc-flip-toggle:hover, .hrc-flip-toggle:focus-visible { background: var(--wma-color-copper, #b86f4a); color: #fff; }
.hrc-card:focus-visible { outline: 2px solid var(--wma-color-copper, #b86f4a); outline-offset: 4px; }

@media (hover: none), (pointer: coarse) { .hrc-flip-toggle { opacity: 1; pointer-events: auto; } }

@media only screen and (max-width: 980px) { .hrc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media only screen and (max-width: 600px) { .hrc-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(190px, 1fr); } .hrc-card { min-height: 190px; } }