.kmg.featured {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    & .item {
        margin: 0 25px;
        background: white;  
        position: relative; 
        & .image-wrapper {
            aspect-ratio: 320/280;
            position: relative;
            background: gray;
            margin: 0 -25px 0 -25px;
            min-width: 100%;
            & img {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        } 
        &.event {
            margin: 0;
            & .image-wrapper {
                margin: 0;
            }
        }
        & .content-wrapper {
            position: relative;
            z-index: 10;
            background :white;
            margin-top: -110px;
            padding: 0 25px;
            min-height: 150px;
            & .details {
                padding: 20px 0px 80px 0px;
                color: black;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                flex-grow: 1;
                &:has(.date) {
                    padding-bottom: 60px;
                }
                & > * {
                    margin: 0 0 20px 0;
                    text-align: center;
                }
            }
            & h3 {
                color: black;       
            }   
            &:has(.date) {
                & h3 {
                    margin-bottom: 0;
                }
            }
            & .date {
                color: #3C9989;
                text-transform: capitalize;
                font-weight: 500;
                font-size: 0.875rem;
            }
            
        }
        &.event {
            & .content-wrapper {
                margin-top: 0;
            }
        }
    }
}

.kmg.featured .actions {
    position: absolute;
    bottom: 30px;
    display: grid;
    width: 100%;
}

.kmg.featured a.button {
    justify-self: center;
    align-self: center;
    z-index: 10;
    font-style: normal;
    font-size: 1rem;
    line-height: 1.3;
    text-transform: uppercase;
    border-radius: 50px;
    text-decoration: none;
}

.kmg.featured a.button:not(.is-style-call-to-action) {
    padding: 12px 30px 12px 30px;
    background: var(--global-palette-btn-bg);
    color: var(--global-palette-btn);
}

.kmg.featured a.button.is-style-call-to-action {
    background: transparent !important;
    color: #3C9989;
    padding: 0;
    text-transform: none;
    border: 0px solid transparent;
}

.kmg.featured a.button:not(.is-style-call-to-action):hover {
    color: var(--global-palette-btn-hover);
    background: var(--global-palette-btn-bg-hover);
}

.kmg.featured a.button.is-style-call-to-action:hover {
    text-decoration: underline;
    color: black;
}

@media (min-width: 767px) {
    .kmg.featured {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
}

@media (min-width: 1024px) {
    .kmg.featured {
        grid-template-columns: repeat(3, 1fr);
        gap: 48px;
    }
}

@media (min-width: 767px) and (max-width: 1024px) {
    .kmg.featured .item:nth-child(3n+3) {
        grid-column-start: 1;
        grid-column-end: 3;
    }
}


.acf-block-preview .kmg.featured {
    float: none;
}

.acf-block-preview .kmg.featured a {
    pointer-events: none;
}