.jwes-event-header {

    & img {
        width: 100%;
        aspect-ratio: 16/9;
        height: auto;
        object-fit: cover;
        border-radius: var(--radius-sm)
    }

}


.jwes-event-intro {
    margin: var(--space-md) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.jwes-info-boxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.jwes-info-box:nth-child(1) {
    background-color: var(--secondary-color);

    & .info-box-header {
        & .info-box-icon {
            color: var(--secondary-color);
        }
    }
}

.jwes-info-box {
    display: flex;
    flex-direction: column;
    padding: var(--space-sm);
    background-color: var(--primary-color);
    border-radius: var(--radius-sm);
    gap: var(--space-sm);

    & .jwes-info-box-header {
        display: flex;
        gap: var(--space-sm);
        align-items: center;
        color: white;

        & .jwes-info-box-icon {
            width: 27px;
            height: 27px;
            padding: 4px;
            background: white;
            color: var(--primary-color);
            aspect-ratio: 1;
            border-radius: 100px;
        }

    }


    & .jwes-info-box-description {

        display: flex;
        gap: var(--space-sm);

        & span {
            line-height: 1em;
            padding: .4em 1em;
            border-radius: 100px;
            font-weight: 900;
            background-color: var(--accent-background-color);
            width: fit-content;
        }

        & p {
            color: white;
        }
    }
}

@media screen and (max-width:980px) {

    .jwes-info-boxes {
        grid-template-columns: 1fr;
    }
}