.psrv-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
}

.psrv-card {
    --psrv-tone:#e3f6f3;
    --psrv-accent:#087f7a;
    min-width:0;
    overflow:hidden;
    border:1px solid color-mix(in srgb,var(--psrv-accent) 12%,var(--diver));
    border-radius:30px;
    background:#fff;
    box-shadow:0 20px 48px -42px color-mix(in srgb,var(--psrv-accent) 75%,transparent);
    transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}

.psrv-tone-2 { --psrv-tone:#fff0d9; --psrv-accent:#a96712; }
.psrv-tone-3 { --psrv-tone:#e9edff; --psrv-accent:#4f62ad; }
.psrv-tone-4 { --psrv-tone:#f5e7f3; --psrv-accent:#93578d; }
.psrv-tone-5 { --psrv-tone:#e9f3df; --psrv-accent:#5d823e; }
.psrv-tone-6 { --psrv-tone:#ffe9e5; --psrv-accent:#ad5c56; }

.psrv-card-media {
    position:relative;
    height:235px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    overflow:hidden;
    padding:20px 28px 0;
    background:var(--psrv-tone);
}

.psrv-card-media > img {
    position:relative;
    z-index:2;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center bottom;
    transition:transform 350ms ease;
}

.psrv-card-no {
    position:absolute;
    z-index:3;
    top:18px;
    inset-inline-start:20px;
    color:color-mix(in srgb,var(--psrv-accent) 70%,transparent);
    font-family:var(--f-number);
    font-size:24px;
    font-weight:800;
    line-height:1;
}

.psrv-card-shape {
    position:absolute;
    z-index:1;
    top:8px;
    inset-inline-end:-35px;
    width:150px;
    height:150px;
    background:var(--tree) center / contain no-repeat;
    opacity:.32;
    animation:psrvCardFloat 2.4s ease-in-out infinite alternate;
}

@keyframes psrvCardFloat {
    to { transform:translateY(-12px) rotate(4deg); }
}

.psrv-card-placeholder {
    position:relative;
    z-index:2;
    width:98px;
    height:98px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto;
    border-radius:34px;
    color:var(--psrv-accent);
    background:color-mix(in srgb,var(--psrv-accent) 12%,#fff);
    font-size:38px;
}

.psrv-card-body {
    min-width:0;
    padding:24px;
}

.psrv-card-meta {
    min-height:24px;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px 15px;
    margin-bottom:13px;
}

.psrv-card-meta span {
    min-width:0;
    display:flex;
    align-items:center;
    gap:6px;
    color:var(--psrv-accent);
    font-size:11px;
    font-weight:900;
    overflow-wrap:anywhere;
}

.psrv-card-meta i {
    flex:0 0 auto;
    font-size:12px;
}

.psrv-card h3 {
    margin:0 0 11px;
    color:var(--primary-text);
    font-size:22px;
    font-weight:900;
    line-height:1.45;
    overflow-wrap:anywhere;
}

.psrv-card h3 a {
    color:inherit;
}

.psrv-card p {
    min-height:54px;
    margin:0 0 22px;
    color:var(--secondarytext);
    font-size:14px;
    line-height:1.8;
    overflow-wrap:anywhere;
}

.psrv-card-footer {
    min-height:54px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding-top:17px;
    border-top:1px solid color-mix(in srgb,var(--psrv-accent) 12%,var(--diver));
}

.psrv-card-footer > strong {
    min-width:0;
    color:var(--primary-text);
    font-size:15px;
    font-weight:900;
    overflow-wrap:anywhere;
}

.psrv-card-link {
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--psrv-accent);
    font-size:12px;
    font-weight:900;
}

.psrv-card-link i {
    flex:0 0 32px;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#fff;
    background:var(--psrv-accent);
}

@media (hover:hover) and (pointer:fine) {
    .psrv-card:hover {
        transform:translateY(-5px);
        border-color:color-mix(in srgb,var(--psrv-accent) 28%,var(--diver));
        box-shadow:0 28px 58px -40px color-mix(in srgb,var(--psrv-accent) 70%,transparent);
    }

    .psrv-card:hover .psrv-card-media > img {
        transform:scale(1.035);
    }
}

@media only screen and (max-width:1100px) {
    .psrv-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:18px;
    }
}

@media only screen and (max-width:767px) {
    .psrv-grid {
        gap:12px;
    }

    .psrv-card {
        border-radius:22px;
        box-shadow:0 14px 32px -30px color-mix(in srgb,var(--psrv-accent) 75%,transparent);
    }

    .psrv-card-media {
        height:auto;
        min-height:132px;
        aspect-ratio:1.28 / 1;
        padding:14px 14px 0;
    }

    .psrv-card-no {
        top:13px;
        inset-inline-start:14px;
        font-size:18px;
    }

    .psrv-card-shape {
        top:4px;
        inset-inline-end:-28px;
        width:105px;
        height:105px;
        opacity:.24;
    }

    .psrv-card-body {
        padding:15px;
    }

    .psrv-card-meta {
        min-height:0;
        align-items:flex-start;
        flex-direction:column;
        gap:5px;
        margin-bottom:9px;
    }

    .psrv-card h3 {
        margin-bottom:8px;
        font-size:17px;
    }

    .psrv-card p {
        min-height:0;
        margin-bottom:14px;
        font-size:12px;
        line-height:1.7;
    }

    .psrv-card-footer {
        min-height:0;
        align-items:flex-start;
        flex-direction:column;
        gap:9px;
        padding-top:12px;
    }
}

@media only screen and (max-width:575px) {
    .psrv-grid {
        grid-template-columns:1fr;
        gap:14px;
    }

    .psrv-card {
        display:grid;
        grid-template-columns:minmax(112px,38%) minmax(0,1fr);
        align-items:stretch;
    }

    .psrv-card-media {
        height:100%;
        min-height:210px;
        aspect-ratio:auto;
        padding:34px 10px 0;
    }

    .psrv-card-body {
        display:flex;
        flex-direction:column;
        padding:15px 14px;
    }

    .psrv-card h3 {
        font-size:16px;
    }

    .psrv-card p {
        margin-bottom:12px;
        font-size:11px;
        line-height:1.65;
    }

    .psrv-card-footer {
        margin-top:auto;
    }
}

@media only screen and (max-width:340px) {
    .psrv-card {
        grid-template-columns:1fr;
    }

    .psrv-card-media {
        min-height:170px;
        aspect-ratio:1.55 / 1;
        padding:16px 16px 0;
    }
}

@media (prefers-reduced-motion:reduce) {
    .psrv-card,
    .psrv-card-media > img {
        transition:none;
    }

    .psrv-card-shape {
        animation:none;
    }
}