.cwc {
    padding-inline: 2rem;
}

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

.cwc__intro h2 {
    margin-bottom: 3rem;
}

.cwc__intro p {
    font-size: 2rem;
}

/* .cwc__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%)
====================================== */

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

/* Featured layout switches the container to a true 2-column
   grid (left stack + right featured card). Keyed off has-featured,
   not has-image, so a plain image grid (no featured card) still
   uses the standard 12-col multi-column system below. */
.cwc__container.cwc__container--has-featured {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: dense; /* lets the other cards fill gaps automatically */
    gap: 2.4rem;
}

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

.cwc__item-content {
    padding: 4rem;
    border-radius: 2.5rem;
    background: var(--c-grey);
    height: 100%;
}

.cwc__container--has-image .cwc__item-content {
    margin-top: 0;
}

.cwc.columns-four-col .cwc__item-content {
    padding: 3rem;
}

.cwc__item-title {
    border-bottom: 2px solid var(--c-light);
    padding-bottom: 2rem;
    margin-bottom: 2rem;
}

.cwc__container--has-featured .cwc__item.cwc__item--has-image {
    margin-top: 3rem;
}

.cwc__item.cwc__item--has-image {
    margin-top: 3rem;
}

.cwc__container--featured-Left.cwc__container--has-featured .cwc__item--featured {
    grid-column: 1;
}

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

.cwc__item-label {
    margin-bottom: 2rem;
}

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

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

.cwc__item-img-wrap {
    /* overflow: hidden; */
    margin-bottom: 1rem;
    border-radius: 3rem;
    position: relative;
    margin-top: -7rem;
}

.cwc__item-img-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-clip-path: url(#cardShape);
    clip-path: url(#cardShape);
    aspect-ratio: 545 / 252;
    object-fit: cover;
    object-position: center;
}

/* .cwc__item:hover img {
    transform: scale(1.1);
} */

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

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

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

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



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

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

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

.cwc.bg-Grey .cwc__item-content {
    background: var(--c-platform-white);
}

/* ============================================================
   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) {

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

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

    /* Featured layout: within the 2-col grid set above, every card
       takes 1 of the 2 explicit columns; the featured card sits in
       column 2 and spans both rows. */
    .cwc__container--has-featured .cwc__item {
        grid-column: span 1;
    }

    .cwc__container--has-featured .cwc__item--featured {
        grid-column: 2;
        grid-row: span 2;
    }
}

/* Make the featured card's content stretch to fill that taller cell */
.cwc__item--featured .cwc__item-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.cwc__item--featured .cwc__item-img-wrap {
    flex: 0 0 auto;
}

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

@media (min-width: 992px) {

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

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

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

    /* orphan: 2 leftover in a row of 3 -> 50:50 */
    .columns-three-col .cwc__item:nth-last-child(2):nth-child(3n+1),
    .columns-three-col .cwc__item:last-child:nth-child(3n+2),
    .columns-four-col .cwc__item:nth-last-child(2):nth-child(3n+1),
    .columns-four-col .cwc__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 .cwc__item {
        grid-column: span 3;
    }

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

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

    /* orphan: 2 leftover in a row of 4 -> 50:50 */
    .columns-four-col .cwc__item:nth-last-child(2):nth-child(4n+1),
    .columns-four-col .cwc__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 .cwc__item:nth-last-child(3):nth-child(4n+1),
    .columns-four-col .cwc__item:nth-last-child(2):nth-child(4n+2),
    .columns-four-col .cwc__item:last-child:nth-child(4n+3) {
        grid-column: span 4;
    }
}

/* ======================================
   Mobile spacing tweaks
====================================== */
@media (max-width:1199px) {
.cwc__item-img-wrap {
    margin-top: -6rem;
    margin-bottom: 3rem;
}

.cwc__container--has-image .cwc__item-content {
    margin-top: 2rem;
}
}
@media (max-width:767px) {

    .cwc {
        padding-inline: 1.5rem;
    }

    .cwc__item-img-wrap {
        margin-bottom: 3rem;
    }

    .cwc-btns {
         margin-top: 2rem;
    }
	
	.cwc__btn-group {
		padding-top: 5rem;
	}

    .cwc__intro {
        margin-bottom: 4rem;
    }

    .cwc__container {
        display: flex;
        flex-direction: column;
    }

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

    .cwc__item-img-wrap a {
        border-radius: 20px;
    }

    .cwc__item-label {
        margin-bottom: 1.5rem;
    }

    .cwc__item-content,
    .cwc.columns-four-col .cwc__item-content {
        padding: 2.5rem;
        border-radius: 2rem;
    }

	.cwc__container--has-image .cwc__item-content {
        margin-top: 0rem;
    }

    .cwc__container--has-image .cwc__item.cwc__item--has-image {
        margin-top: 4rem;
    }

}

@media (max-width:500px) {
.cwc__item-img-wrap {
    margin-top: -5rem;
}

    .cwc__container--has-image .cwc__item.cwc__item--has-image {
        margin-top: 3rem;
    }
    


}