.row-images {
    position: relative;
    background-color: var(--heritage-brick, #9C5E42);
    padding: 6.3rem 0 6rem;
    border-bottom: var(--border);
}
.row-images::before,
.row-images::after {
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    top: 0;
    left: 0;
}
.row-images::before {
    top: 2.1rem;
    border-top: var(--border);
}
.row-images::after {
    top: auto;
    bottom: 2.1rem;
    border-bottom: var(--border);
}
/* HEADER */
.row-images__header {
    margin: 0 auto !important;
    text-align: center;
    padding: 0 2rem 4rem!important;
}
.row-images__header .icon-flower {
    display: block;
    font-size: 3rem;
    color: var(--canvas-weave, #BCB094);
    margin: 0 0 2rem;
}
.row-images__header h2 {
    text-transform: uppercase;
    margin: 0 0 4rem;
}
/* ARTICLES */
.row-images__grid {
    padding-inline: 2rem!important;
}
.row-images__item {
    text-align: center;
}
.row-images__item:not(:last-child) {
    margin: 0 0 2.4rem;
}
.row-images__item .img-box {
    border: var(--border);
    font-size: 0;
    margin: 0 0 2rem;
    height: 30rem;
}
.row-images__item h3 { 
    --ff: var(--textFont);
    --fw: 700;
    --fs: 1.4rem;
    --lh: 1.7em;
    --ls: .02em;
}
@media only screen 
and (min-width: 961px) {
    .row-images {
        padding: 6.6rem 0 5.7rem;
    }
    .row-images::after {
        bottom: 2.4rem;
    }
    .row-images__header {
        padding: 0 0 5.9rem;
        max-width: 103.7rem !important;
    }
    .row-images__header .icon-flower {
        font-size: 4rem;
        margin: 0 0 2.4rem;
    }
    .row-images__header h2 {
        margin: 0 0 3.3rem;
    }
    .row-images__grid {
        height: max-content;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        padding-inline: 2.8rem!important;
    }
    /* ARTICLES */
    .row-images__item {
        flex: 0 1 33.3333%;
        max-width: 33.3333%;
        padding: 0 1.2rem;
    }
    .row-images__item .img-box {
        height: 40.1rem;
    }
}
@media only screen 
and (max-width: 960px) {
    .row-images__item :is(h3, p) {
        padding-inline: 2.7rem;
    }
}


/* Animations 
------------------------------------ */
:where(#wrapper) .row-images__header :is(i, h2, p),
:where(#wrapper) .row-images__grid  {
	opacity: 0;
	--duration: 1s;
}
:where(#wrapper) .row-images.animateActive .row-images__header :is(i, h2, p),
:where(#wrapper) .row-images.animateActive .row-images__grid  {
	animation: fade var(--duration) forwards;
	animation-delay: var(--delay, 0);
}
:where(#wrapper) .row-images.animateActive .row-images__header  i {
    --delay: 0.3s;
}
:where(#wrapper) .row-images.animateActive .row-images__header  h2 {
    --delay: 0.5s;
}
:where(#wrapper) .row-images.animateActive .row-images__header  p {
    --delay: 0.7s;
}
:where(#wrapper) .row-images.animateActive .row-images__grid {
    --delay: 0.9s;
}