:root {
   --mavi: #2096da;
   --tboz: #1a1a1a
}
.container {
    max-width: 960px;
    margin: auto;
}
header {
    background: var(--tboz);
    border-bottom: 5px solid var(--mavi);
}
nav {
    display: grid;
    grid-template-rows: auto auto auto;
    text-align: center;
}
#logo { background: var(--mavi);}
menu li a {
    display: inline-block;
    font: 1.1em 'Caviar Dreams';
    text-transform: uppercase;
    color: #fff;
    padding: 7px 12px;
}
#phone {
    font: .8em 'Museo Sans';
    color: #7f7c7c;
    padding: 8px 12px;}
#sicon { padding: 2px;}
#sicon a {
    display: inline-grid;
    justify-content: center;
    align-content: center;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    background: #2c2c2c;
    color: #7c7c7c;
}
main {
    background: url('../img/mainbg.jpg');
}
#articles {
    display: grid;
    gap: 1em;
    grid-template-rows: 50vh 50vh 100vh 50vh 50vh 
                        50vh 50vh 50vh 50vh 50vh 
                        100vh 50vh 50vh 50vh 50vh 50vh ;
}
#art1 { background: url('../img/art01.jpg') center/cover; }
#art2 { background: url('../img/art02.jpg') center/cover; }
#art3 { background: url('../img/art03.jpg') center/cover; }
#art4 { background: url('../img/art04.jpg') center/cover; }
#art5 { background: url('../img/art05.jpg') center/cover; }
#art6 { background: url('../img/art06.jpg') center/cover; }
#art7 { background: url('../img/art07.jpg') center/cover; }
#art8 { background: url('../img/art08.jpg') center/cover; }
#art9 { background: url('../img/art09.jpg') center/cover; }
#art10 { background: url('../img/art10.jpg') center/cover; }
#art11 { background: url('../img/art11.jpg') center/cover; }
#art12 { background: url('../img/art12.jpg') center/cover; }
#art13 { background: url('../img/art13.jpg') center/cover; }
#art14 { background: url('../img/art14.jpg') center/cover; }
#art15 { background: url('../img/art15.jpg') center/cover; }
#art16 { background: url('../img/art16.jpg') center/cover; }
#bottom  {
    height: 320px;
    background: var(--tboz);
}

footer {
    height: 26px;
    background: var(--mavi);
}

@media only screen and (min-width: 768px) {
    nav {
        grid-template-columns: 130px auto;
        grid-template-rows: 65px 30px;
    }
    #logo { 
        grid-area: 1 / 1 / span 2 / span 1;
        display: grid;
        justify-content: center;
        align-content: center;
    }
    menu { 
        grid-area: 2 / 2 / 3 / 3; 
        display: grid;
        grid-template-columns: auto auto auto auto auto;
        justify-content: end;
    }
    menu li { padding: 0 12px; }  
    menu li a.active, menu li a:hover { background: var(--mavi) }  
    #contact {  
        grid-area: 1 / 2 / 2 / 3;
        display: grid;
        grid-template-columns: auto auto;
        justify-content: end;
    }
    #articles {
        grid-template-columns: auto auto auto auto ;
        grid-template-rows: 212px 212px 212px 212px 212px ;
    }
    #articles div { opacity: .5; }
    #articles div:hover { opacity: 1; }
    #art3 { grid-area: 1 / 3 / span 2 / span 1; }
    #art10 { grid-area: 3 / 3 / span 1 / span 2; }
    #art11 { grid-area: 4 / 1 / span 2 / span 1; }
    #art16 { grid-area: 5 / 3 / span 1 / span 2; }
}