/* file-specific layout. Should only be grid-template-areas with media queries! */
/* $Id: layout.css 82 2019-07-26 07:56:45Z fuchsm $ */

main {
    grid-template-areas: " hero-banner hero-banner    hero-banner    hero-banner    hero-banner    hero-banner    hero-banner    hero-banner    hero-banner    hero-banner    hero-banner    hero-banner    hero-banner    hero-banner "
                         ".            speaker    speaker    speaker    speaker    speaker    speaker    speaker    speaker    speaker    speaker    speaker    speaker    . "
    ;
}

@media (min-width: 768px) {
    main {
    grid-template-areas: " hero-banner hero-banner    hero-banner    hero-banner    hero-banner    hero-banner    hero-banner    hero-banner    hero-banner    hero-banner    hero-banner    hero-banner    hero-banner    hero-banner "
    ".            speaker    speaker    speaker    speaker    speaker    speaker    speaker    speaker    speaker    speaker    speaker    speaker    . "
    ;
    }    
    #speaker ul {
        grid: ". ."
             / 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    main {
    grid-template-areas: " hero-banner hero-banner    hero-banner    hero-banner    hero-banner    hero-banner    hero-banner    hero-banner    hero-banner    hero-banner    hero-banner    hero-banner    hero-banner    hero-banner "
    ".            speaker    speaker    speaker    speaker    speaker    speaker    speaker    speaker    speaker    speaker    speaker    speaker    . "
    ;
    }    
}


@media (min-width: 1600px) {
    main {
    grid-template-areas: " hero-banner hero-banner    hero-banner    hero-banner    hero-banner    hero-banner    hero-banner    hero-banner    hero-banner    hero-banner    hero-banner    hero-banner    hero-banner     hero-banner "
    ".            speaker    speaker    speaker    speaker    speaker    speaker    speaker    speaker    speaker    speaker    speaker    speaker    . "
    ;

    }    
}

#hero-banner {
    grid-area: hero-banner; 
}

#speaker {
    grid-area: speaker;
}