*{
    margin: 0;
    padding: 0;
}

body,
html {
    background-color: #f4f4f4;
    margin: 0;
    font-family: 'Work Sans', sans-serif ,Arial, Helvetica;
}


#showcase {

    /*Photo by <a href="https://unsplash.com/@seleaphotography?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Ioana Ye</a> on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
    Photo by <a href="https://unsplash.com/es/@rogerdvig?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Roger Erdvig</a> on <a href="https://unsplash.com/s/photos/photography?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
  
    */
    background-image: url('img/wall.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0.90;
    text-align: center;
}

#showcase .prmtitle {
    font-size: 6em;
    padding-top:220px;
    text-transform: uppercase;
    line-height: 1;
    font-weight: 800;
}

#showcase .subtitle{
    font-size: 1.424em;
    padding : 20px 20px;
}

.btn{
    display: inline-block;
    text-decoration: none;
    color: #fff;
    background-color: #111;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.525rem;
    margin-top: 1em;
    padding: .7em 1.125em;
    border-radius: 0.25em;
    transition: transform 250ms ease-in-out;
}

.btn:hover,.btn:focus{
    transform: scale(1.1);
    background-color: #fff;
    color: #111;
    text-decoration: none;
}

.btn::after{

}

.container {
    margin-top: 5px;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    grid-gap: 5px;

}




.container-box {
    margin: 10px;
    padding: 10px;
    
}


.gallery-item {
    width: 100%;
    height: 100%;
    position: relative;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.5);

}

.gallery-item .image {
    height: 100%;
    width: 100%;
    overflow: hidden;

}

.gallery-item .image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    cursor: pointer;
    transition: 0.5s ease-in-out;
}

.gallery-item:hover img {

    transform: scale(1.2);

}


.text a{
    text-decoration: none;
    color: #111;
}

.text a:hover , a:focus{
    color: #266eb5;
    text-decoration: underline;
    transition: 0.2 s ease;
}


.gallery-item .text {
    font-size: 1em;
    color :#8b8c88;
    opacity: 1;
    padding: 10px;
    text-align: center;
    
}

.gallery-item:hover .text{
    opacity: 1;
}

footer{
    text-align: center;
    background-color: #f4f4f4;
    font-size: 0.8em;
    margin-top: 2em;
    padding: 1em;
}


@media screen and (max-width:648px){


    #showcase .prmtitle {
        font-size: 4em;
        padding-top:200px;
        text-transform: uppercase;
        line-height: 1;
    }
    
    #showcase .subtitle{
        font-size: 1.524em;
        padding : 10px 4px;
    }
    
    .btn{
        
        font-size: 1.825rem;
        margin-top: 0.54em;

    }
    
    .btn:hover,.btn:focus{
        transform: scale(1.1);
    }

    .gallery-item .image img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        object-position: 50% 50%;

    }
    
    .gallery-item:hover img {
    
        transform:none
    
    }
    
    

}
    

@media screen and (min-width:1400px){


    #showcase .prmtitle {
        font-size: 9em;
        padding-top:300px;
        text-transform: uppercase;
        line-height: 2;
    }
    
    #showcase .subtitle{
        font-size: 2.524em;
        padding : 15px 25px;
    }
    
    .btn{
        
        font-size: 2.825rem;
        margin-top: 1em;

    }
    
    .btn:hover,.btn:focus{
        transform: scale(1.3);
    }


}

@media (-webkit-device-pixel-ratio: 1.25) {
    *{
        zoom: 0.8;
        
    }

    #showcase .prmtitle {
        font-size: 5em;
        padding-top:100px;

    }
    
    #showcase {
        height: 100vh;
    }
  }