/* Constantes: */

:root {

    --cor-principal: #FF8C00;
    --cor-fundo: #FFFFFF;
    --cor-texto-menu: #FFFFFF;
    --cor-texto-pagina: #000000;

}

/* Estilos: */

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;

}

body {

    height: 100vh;
    width: 100vw;
    background-color: var(--cor-fundo);
    overflow-x: hidden;

}

#container {

    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

}

header {

    height: 75px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--cor-principal);
    color: var(--cor-texto-menu);
    padding: 10px 2.5% 10px 2.5%;

}

header h1 {

    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;

}

header nav a {

    text-decoration: none;
    color: var(--cor-texto);
    font-weight: 1000;
    margin-right: 10px;
    transition: 0.5s linear;
    cursor: pointer;

}

header nav a:hover {

    color: var(--cor-texto-pagina);

}

main {

    height: 90%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, auto);
    grid-gap: 10px;
    margin-top: 5px;
    padding: 10px;

}

main figure {

    position: relative;
    border: 1px solid var(--cor-texto-pagina);
    overflow: hidden;

}

main figure img {

    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;

}

.name {

    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1));
    transform: translateY(100%);
    transition: 1s;

}

.name a {

    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--cor-principal);
    text-decoration: none;

}

main figure:hover .name {

    transform: translateY(0%);

}

/* Responsividade: */

@media (width < 1200px) {

    main {

        grid-template-columns: repeat(4, auto);

    }

}

@media (width < 900px) {

    main {

        height: auto;
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(10, 200px);
        padding: 30px;

    }

}

@media (width < 600px) {

    main {

        width: 70%;
        grid-template-columns: auto;
        grid-template-rows: repeat(20, 200px);

    }

}

@media (width <= 450px) {

    header {

        justify-content: center;

    }

    header h1 {

        font-size: 20px;

    }

    header nav {

        display: none;
        /*flex-direction: column;
        align-items: center;
        justify-content: space-evenly;*/

    }

}