/*GENERAL*/
@media screen and (max-width: 860px) {
    /*workshops*/
    #note { 
        margin: 0em;
        padding: 0em;
    }
    #home {
        display: none;
    }
    .dates { display: flex; flex-flow: column wrap; align-content: center; }
    .container { width: 60%; }
}

/*landscape*/
@media screen and (max-width: 768px) {
}

@media screen and (max-width: 668px) {
    h3.title,
    .date { font-size: 1.1em; }
    .workshop-body a { font-size: 1em;}

    .container.container-round { width: 75%; } 
}

@media screen and (max-width: 435px) {
    h3.title,
    .date { font-size: 1em; }
    .workshop-body a { font-size: 0.9em; }

    .workshop-pop { width: 1.5em; }
    .container.container-round { width: 80%; }
}

@media screen and (max-width: 310px) {
    h3.title,
    .date { font-size: 0.9em; }
    .workshop-pop { width: 1.3em; }

    /*new grid layout*/
    .workshop-header {
        grid-template-columns: 1fr 2fr 0.5fr;
        grid-template-rows: 0.5fr 0.25fr 0.25fr;
    }

    .date {
        grid-column: 1;
        grid-row: 1;
    }

    .title {
        grid-column: 1 / span 3;
        grid-row: 2;
        margin-top: 0em;
        margin-bottom: 0.5em;
    }
    .leader {
        grid-column: 1 / span 2;
        grid-row: 3;
        margin-bottom: 0.2em;
    }
    .workshop-pop {
        grid-column: 3;
        grid-row: 3;

    }
}