.container

{

    margin-top: 10em;

    display: flex;

    justify-content: center;

    flex-direction: column;

}



.picturebox .title

{

    padding: 10px;

    text-align: center;

    color: #ffff;

    font-weight: bold;

    font-size: 1rem;

    background-color: #007bff;

    width: 100%;

    height: 100%;

}



.picture

{

    width: 458px;

    height: 250px;

}



.columns

{

    padding: 6em;

}

.columns li

{

    list-style: none;

    font-weight: 500;

    font-size: 1.1em;

}



.columns li::before

{

    content: '|';

    font-size: 2em;

    color: #00adef;

    padding-right: 5px;

}

.content

{

    display: flex;

    justify-content: center;

}



.picturebox-template

{

    background-color: rgba(0,0,0,0.2);

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    height: 200px;

    width: 200px;

}



.picturebox

{

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);

    transition: transform 0.3s ease;

    background-color: #fff;

    border: 3px solid #007bff;

    border-radius: 8px;

}



.picturebox .picture img

{

    object-fit: cover;

    width: 100%;

    height: 100%;

}



.gallery

{

    display: flex;

    gap: 10em;

    flex-wrap: wrap;

    justify-content: center;

}



.leftbox

{

    display: flex;

    flex-direction: column;

    gap: 5em;

    align-items: center;

}



.leftbox h1

{

    font-size: 3em;

}



@media (max-width: 1110px)

{

    .content

    {

        flex-direction: column;

        margin: 0 auto;

    }



}



@media (max-width: 900px)

{

    .gallery

    {

        gap: 3em;

        flex-direction: column;

    }



}



@media (max-width: 470px) {



    

}