* {
    font-family: 'Barlow Condensed', Helvetica, Arial, sans-serif;
}

body {
    box-sizing: border-box;
}

header, footer {
    margin: auto;
    max-width: 80%;
}

section {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 30px;
    grid-template-areas: 
        'ex1'
        'ex2'
        'ex3'
        'ex4'
        'ex5'
        'ex6';
    max-width: 80%;
    margin: auto;
}


@media (min-width: 600px) and (max-width:960px){
    section {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-gap: 20px;
        grid-template-areas: 
            'ex1 ex2'
            'ex3 ex4'
            'ex5 ex6';
    }   
}

@media (min-width: 961px){
    header, footer {
        max-width: 960px;
    }
    
    section {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        grid-gap: 20px;
        grid-template-areas: 
            'ex1 ex2 ex3'
            'ex4 ex5 ex6';
        max-width: 960px;
    }
}

.ex1 {
    grid-area: ex1;
}

.ex2 {
    grid-area: ex2;
}

.ex3 {
    grid-area: ex3;
}

.ex4 {
    grid-area: ex4;
}

.ex5 {
    grid-area: ex5;
}

.ex6 {
    grid-area: ex6;
}

figure {
    margin: 0;
}

figure:hover {
    opacity: 0.3;
}

img {
    width: 100%;
}

h2 {
    font-size: 19px;
}

p {
    text-align: justify;
    font-weight: 200;
}

.cat {
    font-size: 12px;
    font-weight: 600;
}