.content-columns {
    padding-inline: 2rem;
}

.content-columns__intro {
    max-width: var(--width-narrow);
    margin: 0 auto 6rem;
    text-align: center;
}

.content-columns__intro h2 {
    margin-bottom: 3rem;
}

.content-columns__intro p {
    font-size: 2rem;
}

/* .content-columns__intro h2::after {
    content: "";
    display: block;
    width: 130px;
    height: 20px;
    margin: 2rem auto 0;
    background: radial-gradient(circle, #ff5a00 8px, transparent 9px) 0 50% / 26px 20px repeat-x;
} */

/* ======================================
   Grid - Base / Mobile (default = 100%)
====================================== */

.content-columns__container {
    display: grid;
    gap: 4rem;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.content-columns__item {
    grid-column: span 12; /* mobile: 1 column */
}

/* ======================================
   Common
====================================== */

.content-columns__item-label {
    margin-bottom: 2rem;
}

.content-columns__item-content .content-columns__item-label a {
    color: inherit;
    text-decoration: none;
}

.content-columns__item-content .content-columns__item-label a:hover {
    text-decoration: underline;
    color: var(--c-second);
}

.content-columns__item-img-wrap {
    overflow: hidden;
    margin-bottom: 3rem;
    border-radius: 3rem;
}

.content-columns__item-img-wrap img {
    display: block;
    width: 100%;
    object-fit: cover;
    aspect-ratio: 40 / 25;
    border-radius: 30px;
    transition: 0.3s;
}

.content-columns__item:hover img {
    transform: scale(1.1);
}

.content-columns__item-img-wrap a {
    border-radius: 30px;
    display: block;
}

.content-columns-desc p:last-of-type {
    margin-bottom: 0;
}

.content-columns__btn-group {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 8rem;
}

.content-columns-btns {
    display: flex;
    align-items: center;
	margin-top: 2.4rem;
}


/* Black */
.bg-Black .content-columns__intro, 
.bg-Black .content-columns__intro *,
.bg-Black .content-columns__container.btn--tertiary,
.bg-Brown .content-columns__intro, 
.bg-Brown .content-columns__intro *,
.bg-Brown .content-columns__container .btn--tertiary{
    color: var(--c-white);
}

.bg-Black .content-columns__item-label,
.bg-Black .content-columns-desc, 
.bg-Black .content-columns-desc *,
.bg-Brown .content-columns__item-label,
.bg-Brown .content-columns-desc, 
.bg-Brown .content-columns-desc *{
    color: var(--c-platform-white);
}

.bg-Black .content-columns__container .btn--tertiary:hover, 
.bg-Black .content-columns__container .btn--tertiary:focus,
.bg-Brown .content-columns__container .btn--tertiary:hover, 
.bg-Brown .content-columns__container .btn--tertiary:focus {
    border: none;
    color: var(--c-second);
    background: transparent;
}


/* ============================================================
   IMAGE-ALIGN-TOP (default) COLUMN LOGIC
   ============================================================ */

/* ======================================
   Tablet — min-width 768px
   2-col -> 50:50 (final state)
   3-col -> 50:50 (interim state)
   4-col -> 50:50 (interim state)
====================================== */

@media (min-width: 768px) {

    .content-columns__container {
        gap: 6rem 4rem;
    }

    .columns-two-col .content-columns__item,
    .columns-three-col .content-columns__item,
    .columns-four-col .content-columns__item{
        grid-column: span 6;
    }

    /* orphan: 1 leftover in a row of 2 -> full width */
    /* .columns-two-col .content-columns__item:last-child:nth-child(2n+1),
    .columns-three-col .content-columns__item:last-child:nth-child(2n+1),
    .columns-four-col .content-columns__item:last-child:nth-child(2n+1) {
        grid-column: 1 / -1;
    } */
}

/* ======================================
   Desktop Small — min-width 992px
   3-col -> 33:33:33 (final state)
   4-col -> 33:33:33 (interim state)
====================================== */

@media (min-width: 992px) {

     .content-columns__container {
        gap: 8rem 4rem;
    }

    .columns-three-col .content-columns__item,
    .columns-four-col .content-columns__item{
        grid-column: span 4;
    }

    /* reset the "group of 2" orphan rule inherited from tablet */
    .columns-three-col .content-columns__item:last-child:nth-child(2n+1),
    .columns-four-col .content-columns__item:last-child:nth-child(2n+1){
        grid-column: span 4;
    }

    /* orphan: 1 leftover in a row of 3 -> full width */
    /* .columns-three-col .content-columns__item:last-child:nth-child(3n+1),
    .columns-four-col .content-columns__item:last-child:nth-child(3n+1) {
        grid-column: 1 / -1;
    } */

    /* orphan: 2 leftover in a row of 3 -> 50:50 */
    .columns-three-col .content-columns__item:nth-last-child(2):nth-child(3n+1),
    .columns-three-col .content-columns__item:last-child:nth-child(3n+2),
    .columns-four-col .content-columns__item:nth-last-child(2):nth-child(3n+1),
    .columns-four-col .content-columns__item:last-child:nth-child(3n+2){
        grid-column: span 6;
    }
}

/* ======================================
   Desktop — min-width 1200px
   4-col -> 25:25:25:25 (final state)
====================================== */

@media (min-width: 1200px) {

    .columns-four-col .content-columns__item {
        grid-column: span 3;
    }

    /* reset the "group of 3" orphan rules inherited from desktop-small */
    .columns-four-col .content-columns__item:last-child:nth-child(3n+1),
    .columns-four-col .content-columns__item:nth-last-child(2):nth-child(3n+1),
    .columns-four-col .content-columns__item:last-child:nth-child(3n+2) {
        grid-column: span 3;
    }

    /* orphan: 1 leftover in a row of 4 -> full width */
    /* .columns-four-col .content-columns__item:last-child:nth-child(4n+1) {
        grid-column: 1 / -1;
    } */

    /* orphan: 2 leftover in a row of 4 -> 50:50 */
    .columns-four-col .content-columns__item:nth-last-child(2):nth-child(4n+1),
    .columns-four-col .content-columns__item:last-child:nth-child(4n+2) {
        grid-column: span 6;
    }

    /* orphan: 3 leftover in a row of 4 -> 33:33:33 */
    .columns-four-col .content-columns__item:nth-last-child(3):nth-child(4n+1),
    .columns-four-col .content-columns__item:nth-last-child(2):nth-child(4n+2),
    .columns-four-col .content-columns__item:last-child:nth-child(4n+3) {
        grid-column: span 4;
    }
}

/* ======================================
   Mobile spacing tweaks
====================================== */
@media (max-width:991px) {

}
@media (max-width:767px) {

    .content-columns {
        padding-inline: 1.5rem;
    }

    .content-columns__container {
        gap: 4rem;
    }

    .content-columns__item-img-wrap {
        margin-bottom: 2rem;
        border-radius: 2rem;
    }

    .content-columns__btn-group {
        padding-top: 5rem;
    }

    .content-columns-btns {
        margin-top: 2rem;
    }

    .content-columns__intro {
        margin-bottom: 4rem;
    }

    .content-columns__container {
        display: flex;
        flex-direction: column;
    }

    .content-columns__item-img-wrap img {
        aspect-ratio: auto;
        border-radius: 20px;
    }

    .content-columns__item-img-wrap a {
        border-radius: 2rem;
    }

    .content-columns__item-label {
        margin-bottom: 1.5rem;
    }
}