@use '../_variables';

section#profile{
    
    max-width: 65em;
    margin: 1em auto;
    padding:0.5em 1em;
    
    img{
        border-radius: 1em;
        border: 0.1em solid variables.$primary-brown;
        display: inline-block;
        vertical-align: top;
        position: relative;
    }
    
    div#top{
        display: block;
        
        img#img-1{
            float: left;
            margin: 0 2em 1em 1em;
            max-width: 18em;
            max-height: 22em;
            
            @media screen and (max-width: 800px){max-width: 30%;}
        }
    
        div#profile-text{
            position: relative;
            
            p{margin: 0.3em 0;}
            
            p:first-child{font-weight: bold;}
        }
    }
    
    div#profile-images{
        text-align: center;
        
        img{
            margin: 0.5em;
            max-width: 16em;
            max-height: 16em;
            
            @media screen and (max-width: 800px){max-width: 28%;}
        }
    }
}