/* 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 "
                         " .           studieren-intro  studieren-intro  studieren-intro  studieren-intro  studieren-intro  studieren-intro  studieren-intro  studieren-intro  studieren-intro  studieren-intro  studieren-intro  studieren-intro  . "
                         " .           bachelor-list  bachelor-list  bachelor-list  bachelor-list  bachelor-list  bachelor-list  bachelor-list  bachelor-list  bachelor-list  bachelor-list  bachelor-list  bachelor-list  . "
                         ".            master-list    master-list    master-list    master-list    master-list    master-list    master-list    master-list    master-list    master-list    master-list    master-list    . "
    ;
}

@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 "
    " .           studieren-intro  studieren-intro  studieren-intro  studieren-intro  studieren-intro  studieren-intro  studieren-intro  studieren-intro  studieren-intro  studieren-intro  studieren-intro  studieren-intro  . "
    " .           bachelor-list  bachelor-list  bachelor-list  bachelor-list  bachelor-list  bachelor-list  bachelor-list  bachelor-list  bachelor-list  bachelor-list  bachelor-list  bachelor-list  . "
    ".            master-list    master-list    master-list    master-list    master-list    master-list    master-list    master-list    master-list    master-list    master-list    master-list    . "
    ;
    }    
    #master-list 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 "
    " .           studieren-intro  studieren-intro  studieren-intro  studieren-intro  studieren-intro  studieren-intro  studieren-intro  studieren-intro  studieren-intro  studieren-intro  studieren-intro  studieren-intro  . "
    " .           bachelor-list  bachelor-list  bachelor-list  bachelor-list  bachelor-list  bachelor-list  bachelor-list  bachelor-list  bachelor-list  bachelor-list  bachelor-list  bachelor-list  . "
    ".            master-list    master-list    master-list    master-list    master-list    master-list    master-list    master-list    master-list    master-list    master-list    master-list    . "
    ;
    }    
    #bachelor-list ul {
        grid: ". . ."
             / 1fr 1fr 1fr;
    }
}


@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 "
    " .           studieren-intro  studieren-intro studieren-intro  studieren-intro   studieren-intro  studieren-intro    studieren-intro  studieren-intro   studieren-intro     studieren-intro     studieren-intro     studieren-intro   . "
    ;

    }    
}

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

#studieren-intro {
    grid-area: studieren-intro;
}

#bachelor-list {
    grid-area: bachelor-list;
}

#master-list {
    grid-area: master-list;
}