/*GENERAL*/
.dates {
    display: block;
}

.container {
    display: flex;
    flex-flow: column wrap;
    align-items: flex-start;
    width: 35em;
}

#note {
    align-content: center;
    text-align: center;
    font-style: italic;
    Font-size: 0.8em;
    color: var(--orange);
    background-color: var(--green);
    max-width: none;
    width: 100%;
    margin-right: 0em;
    padding-bottom: 0em;
}

#note.container {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
}

/*HEADER*/
/*grid layout*/
.workshop-header {
    display: grid;
    grid-template-columns: 1fr 2fr 0.5fr;
    grid-template-rows: 0.5fr 0.5fr;
    gap: 0em 0.5em;
    width: 100%;
}

.date {
    grid-column: 1;
    grid-row: 1;
    margin-top: 1em;
}

.title {
    grid-column: 2 / span 2;
    grid-row: 1;
    margin-top: 1em;
    margin-bottom: 0em;
}

.time {
    grid-column: 1;
    grid-row: 2;
    font-size: 0.8em;
    font-weight: normal;
}
.leader {
    grid-column: 2;
    grid-row: 2;

    margin-top: 0em;
}
.workshop-pop {
    grid-column: 3;
    grid-row: 2;
}

.workshop-pop {
    width: 1.7em;
    align-self: flex-end;
    justify-self: flex-end;
    cursor: pointer;
    transition: transform 0.1s;
    user-select: none;
}

.workshop-pop.open {
    transform: rotate(-45deg);
}

/*BODY*/
.workshop-body { width: 100%;}

.workshop-body a { font-size: 1.1rem; }
.workshop-body p { margin-bottom: 3em; }

.workshop-body.hidden { display: none; }
.workshop-body.visible { display: block; }

#past-workshops {
    text-align: center;
    color: var(--orange);
    margin-top: 2em;
}