.public-illustration {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.public-visual {
    width: min(100%, 500px);
    margin-inline: auto;
}

.public-visual--compact {
    width: min(100%, 320px);
}

.public-visual--mini {
    width: min(100%, 220px);
}

.public-visual--banner {
    width: min(100%, 520px);
}

.public-visual--banner img {
    border-radius: 1rem;
}

.public-visual--on-dark {
    filter: drop-shadow(0 20px 36px rgba(4, 46, 19, .18));
}

.public-visual img {
    width: 100%;
}

.public-article-visual {
    width: min(100%, 590px);
    margin: 0 auto 1.75rem;
    padding: .25rem 1rem;
    background: linear-gradient(135deg, #f0fdf4, #f8fafc);
    border: 1px solid #dcfce7;
    border-radius: 1.25rem;
    overflow: hidden;
}

.public-article-visual img {
    width: 100%;
    max-height: 280px;
}

.public-blog-image {
    display: grid;
    place-items: center;
    min-height: 150px;
    border-radius: .8rem;
    background: linear-gradient(135deg, #f0fdf4, #f8fafc);
    overflow: hidden;
}

.public-blog-image img {
    width: 100%;
    height: 150px;
    object-fit: contain;
}

.public-blog-image--featured img {
    height: 230px;
}

.public-parallax-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(120deg, #20bf60 0%, #168d45 100%);
}

.public-parallax-cta > :not(.public-parallax-art) {
    position: relative;
    z-index: 1;
}

.public-parallax-art {
    position: absolute;
    inset: -40px 0;
    z-index: 0;
    pointer-events: none;
    transform: translate3d(0, var(--public-parallax-y, 0px), 0);
}

.public-parallax-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: .58;
}

.public-parallax-art--photo img {
    opacity: .18;
    filter: saturate(.65) contrast(1.1);
}

@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
    .public-parallax-visual > img {
        transform: translate3d(0, var(--public-parallax-y, 0px), 0);
    }
}

@media (max-width: 767px) {
    .public-visual--compact { width: min(100%, 245px); }
    .public-visual--banner { width: min(100%, 340px); }
    .public-article-visual img { max-height: 210px; }
    .public-blog-image--featured img { height: 180px; }
    .public-parallax-art { display: none; }
}