.programs-grid{
    margin: 0px auto 20px;
    width:100%;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-row: auto auto;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}
.block-explore-programs.whitebg {
    background-color:var(--white);
}
.block-explore-programs.graybg {
    background-color:var(--light-gray);

}
.block-explore-programs.dark {
    background-image: url(/wp-content/uploads/2025/07/WLU_Topographic_BG-scaled.png);
}
.block-explore-programs.grayanglebg {
    background: linear-gradient(288deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 20%, rgba(242, 242, 242, 1) 20%, rgba(242, 242, 242, 1) 100%);
}
.program {
    color:#fff;
    display:flex;
    justify-content:flex-start;
    font-size:40px;
    font-family:sans-serif;
    flex-direction:column;
    line-height:1;
}
.program h4 {
    font-size:1.375rem;
    text-transform:uppercase;
    font-weight:500;
    text-align: left;
    margin-top:20px;
    letter-spacing: 1.21px;
}
.program h4.yellow {
    color:var(--black)!important;
}
.dark .program h4.yellow {
    color:var(--yellow)!important;
}
.program p {
    font-family: "Montserrat", sans-serif;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.5;
    margin-top: 10px;
    
} 
.programimage {
    width: 100%;
    height: 360px;
    overflow: hidden;
}
.covimage {
    width: 100%;
    height: 360px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s linear;
}
.covimagenl {
    width: 100%;
    height: 360px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s linear;
}
.page-id-1946 .covimagenl {
	background-position: top center;
}
.proghold { text-decoration: none!important; }
.proghold:hover .programimage .covimage {
    transform: scale(1.1);
    transition: all .3s linear;
}
/* Items without an image: a yellow accent bar keeps the grid rhythm where
   the image would start, and linked items get a hover cue in place of the
   image zoom. */
.program-noimage .programcontent {
    border-top: 5px solid var(--yellow);
}
.proghold:hover .program-noimage h4 {
    text-decoration: underline;
}
.padsquiggle { padding: 0px 0px 30px; }

/* Medium screens: 2x2 */
@media (max-width: 1024px) {
    .programs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* @media (max-width: 921.96px) {
    .programimage {
        height: 250px;
    } 
} */

@media (max-width: 767.96px) {
    .padsquiggle {
        padding-bottom: 0px;
    }
}

/* Small screens: 1x4 (stacked) */
@media (max-width: 600px) {
    .programs-grid {
        grid-template-columns: 1fr;
    }
}