#block__person-showcase
{
    position: relative;
    overflow:hidden;
}
#block__person-showcase .wrapper
{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 200px 150px;
    background-color: #395173;
    gap: 150px;
}
#block__person-showcase .wrapper p
{
    color: white;
}
#block__person-showcase .wrapper p.title
{
    font-family: 'Source Serif 4', sans-serif;
    font-style: italic;
    margin-bottom: 30px;
    font-size: 40px;
}
#block__person-showcase .wrapper p.content
{
    font-family: 'Barlow', sans-serif;
    font-size: 19px;
}
#block__person-showcase .top,
#block__person-showcase .bottom
{
    display: flex;
    width: 100%;
    gap: 100px;
    justify-content: center;
    max-width: 1600px;
}

#block__person-showcase .top div.content,
#block__person-showcase .bottom div.content
{
    width: 37%;
    padding-top: 50px;
}
#block__person-showcase .top div.images,
#block__person-showcase .bottom div.images
{
    justify-content: flex-start;
    align-items: center;
    gap: 50px;
}
#block__person-showcase .top div.images,
#block__person-showcase .bottom div.images
{
    width: 45%;
    align-items: center;
    display: flex;
}
#block__person-showcase .top .images img,
#block__person-showcase .bottom .images img
{
    max-width: 50%;
}
#block__person-showcase .top .images .left,
#block__person-showcase .bottom .images .right
{
    margin-top: 10%;

}

#block__person-showcase .top .images .right,
#block__person-showcase .bottom .images .left
{
     margin-bottom: 10%;
}

#block__person-showcase .shape
{
    position: absolute;
    bottom: -6%;
    right: 8vw;
    transform: rotate(270deg);
}


@media only screen and (max-width: 768px)
{
    #block__person-showcase .wrapper
    {
        padding: 100px 30px;
        gap: 0;
    }
    #block__person-showcase .top
    {
        flex-direction: column;
        gap: 0;
    }
    #block__person-showcase .bottom
    {
        flex-direction: column-reverse;
        gap: 0;
        padding-top: 25px;
    }
    #block__person-showcase .top div.content,
    #block__person-showcase .bottom div.content
    {
        width: 100%;
        padding-top: 0;
        text-align: center;
    }
    #block__person-showcase .top div.images,
    #block__person-showcase .bottom div.images
    {
        flex-direction: column;
        width: 100%;
        gap: 0;
        padding-top: 50px;
    }
    #block__person-showcase .top .images img,
    #block__person-showcase .bottom .images img
    {
        max-width: 80%;
    }
    #block__person-showcase .bottom .images .right
    {
        margin-top: 0;
    }
    #block__person-showcase .top .images .left
    {
        margin-bottom: 15%;
        margin-top: 0;
    }
    #block__person-showcase .shape
    {
        display: none;
    }
}