.ejw-body {
    display: grid;
    grid-template-columns: max-content 4fr minmax(max(150px, 300px), 1fr);
    grid-gap: 1rem;
}


.ejw-sidebar__content {
    position: sticky;
    top: calc(4rem + 30px);
    padding: 1rem;
}

.ejw-page__nav__list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ejw-page__nav__list li {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 0.5rem;
    padding: 0.5rem 1.5rem;

}

.menu-items {
    display: inline-flex;
    width: 100%;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    color: var(--bulma-body-color);
    text-decoration: none;
}

.menu-items:hover, .menu-items.active {
    font-weight: bold;
}

.menu-items::after {
    content: attr(data-text);
    height: 0;
    visibility: hidden;
    overflow: hidden;
    user-select: none;
    pointer-events: none;
    font-weight: bold;
}

.ejw-page {
    padding: 2rem 6rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;

    --ejw-yellow: rgba(251, 236, 143);
    --ejw-yellow-complement: #F9E45E;
    --ejw-green: rgba(153, 204, 161);
    --ejw-green-complement: #77BB82;
    --ejw-blue: rgba(121, 168, 223);
    --ejw-blue-complement: #508DD5;
    --ejw-red: rgba(235, 145, 145);
    --ejw-red-complement: #E36666;
    --ejw-orange: rgba(255, 204, 153);
    --ejw-orange-complement: #FFB366;

    container-type: inline-size;
    container-name: ejw-page;
    color: hsl(0, 0%, 21%);
}

.ejw-page:last-of-type {
    margin-bottom: 0;
}

.ejw-page p, .ejw-page ul, .ejw-page ol {
    max-width: 75ch;

}

.ejw-images-desktop {
    display: none;
}

.ejw-images-mobile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0;
    height: max(30vw, 150px);
}


.ejw-page__content {
    display: flex;
    flex-direction: column;
}

.ejw-page a {
    color: #1f54a6;
}


@media screen and (max-width: 1023px) {
    .ejw-body {
        grid-template-columns: 1fr;
    }
}

@media screen and (min-width: 1023px) and ( max-width: 1215px) {
    .ejw-body {
        grid-template-columns: 1fr 3fr;
    }
}

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

    .ejw-page {
        padding: min(2rem, 5%);
        margin-bottom: 0;
    }

    .ejw-page__content {
        grid-template-columns: 1fr;
    }
}


.ejw-image {
    background-position: center;
    background-size: cover;
}

.ejw-page__intro__content {
    display: grid;
    flex-direction: row;
    justify-content: space-between;
    grid-gap: 1rem;
    grid-auto-flow: column;
}

@media screen and (min-width: 1216px) {

    .ejw-images-desktop {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;

        margin: 0;
    }

    .ejw-image {
        height: 100%;
        max-height: 200px;
    }

    .ejw-images-mobile {
        display: none;
    }

}

.ejw-page:nth-of-type(5n + 1) {
    background: linear-gradient(45deg, var(--ejw-yellow-complement), var(--ejw-yellow));
}

.ejw-page:nth-of-type(5n + 2) {
    background: linear-gradient(45deg, var(--ejw-green-complement), var(--ejw-green));
}

.ejw-page:nth-of-type(5n + 3) {
    background: linear-gradient(45deg, var(--ejw-blue-complement), var(--ejw-blue));
}

.ejw-page:nth-of-type(5n + 4) {
    background: linear-gradient(45deg, var(--ejw-red-complement), var(--ejw-red));
}

.ejw-page:nth-of-type(5n + 5) {
    background: linear-gradient(45deg, var(--ejw-orange-complement), var(--ejw-orange));
}

a.anchor {
    display: block;
    position: relative;
    top: calc(-74px - 1rem);
    visibility: hidden;
}