body {
    margin: 0;
    background: #111;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
}

header,
footer {
    text-align: center;
    padding: 25px;
    background: #1f1e1e;
}


.grid {
    display: grid;
    grid-template-columns: repeat(4, 350px);
    justify-content: center;
    gap: 20px;
    padding: 30px;
}

.card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: #222;
}


.card img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    display: block;
    border-radius: 12px;
    transition: transform .3s ease;
}

.card:hover img {
    transform: scale(1.05);
}


.card span {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;

    background: rgba(0,0,0,.65);
    padding: 8px 10px;

    border-radius: 8px;

    font-size: 13px;
    line-height: 1.3;

    backdrop-filter: blur(4px);
}


.botoes {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 20px;
    flex-wrap: wrap;
}


.botoes a {
    display: inline-block;
    padding: 12px 24px;

    background: #222;
    color: #fff;

    text-decoration: none;

    border-radius: 8px;

    font-size: 15px;
    font-weight: bold;

    border: 1px solid #444;

    transition: .3s ease;
}

.botoes a:last-child {
    background: #25b120;
    color: #111;
}

.botoes a:hover {
    background: #fff;
    color: #111;
    transform: translateY(-2px);
}

@media(max-width:1500px){

    .grid {
        grid-template-columns: repeat(3, 350px);
    }

}


@media(max-width:1100px){

    .grid {
        grid-template-columns: repeat(2, 350px);
    }

}


@media(max-width:750px){

    .grid {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .card {
        max-width: 350px;
        width: 100%;
        margin: auto;
    }

}

@media(max-width:600px){

    .botoes {
        flex-direction: column;
        padding: 15px;
    }

    .botoes a {
        text-align: center;
        width: 100%;
        box-sizing: border-box;
    }

}

.lightbox{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.92);

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    visibility:hidden;

    transition:.25s;

    z-index:9999;

}

.lightbox.show{

    opacity:1;

    visibility:visible;

}

.lightbox img{

    max-width:92%;

    max-height:92%;

    border-radius:10px;

    box-shadow:0 0 40px rgba(0,0,0,.6);

}

.lightbox button{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    background:none;

    border:none;

    color:#fff;

    font-size:55px;

    cursor:pointer;

    user-select:none;

    padding:15px;

}

.prev{

    left:20px;

}

.next{

    right:20px;

}

.close{

    position:absolute;

    top:15px;

    right:25px;

    color:white;

    font-size:42px;

    cursor:pointer;

}

@media(max-width:700px){

    .lightbox button{

        font-size:42px;

    }

}

.lightbox img{

    max-width:92%;
    max-height:92%;
    border-radius:10px;
    box-shadow:0 0 40px rgba(0,0,0,.6);

    opacity:1;
    transform:scale(1);
    transition:opacity .25s ease, transform .25s ease;

}

.lightbox img.trocando{

    opacity:0;
    transform:scale(.98);

}