.bios {
    padding: $block-padding;
    background-size: cover;


    .title-with-line {
    	display: flex;
    	align-items: center;
    	margin-bottom: 2rem;

    	h3 {
    		margin: 0 1em 0 0;
    		line-height: 1em;
    	}

	    .title-line {
			flex: 1;
			height: 5px;
			background-color: fade-out($grey, .8);
	    }
	}

    .items {
    	display: flex;
    	flex-wrap: wrap;
    	justify-content: flex-start;
    	padding: 1em 0;

        &.x2 {
            .item {
                @include break(from-desktop) {
                    width: 50%;    
                    padding: 0 3rem 2rem 0;     

                    .image {
                        height: 500px;                        
                    }       
                }
            }
        }

        &.x3 {
            .item {
                @include break(from-desktop) {
                    width: 33%;    
                    padding: 0 2rem 2rem 0;  

                    .image {
                        height: 400px;                    
                    }        
                }
            }
        }

        &.x4 {
            .item {
                @include break(from-desktop) {
                    width: 25%;    
                    padding: 0 2rem 2rem 0;            
                }
            }
        }
    }

    .item {
    	text-align: center;
        padding: 0 0 2rem 0;
        width: 100%;

        @include break(from-phablet) {
            width: 50%;   
            padding: 0 3rem 2rem 0;      
        }

        @include break(from-desktop) {
            width: 25%;
            padding: 0 2rem 2rem 0;                
        }   

        @include break(from-desktop-lrg) {
            width: 20%;
            padding: 0 2rem 2rem 0;                
        }	

    	.image {
    		width: 100%;
    		height: 400px;
    		background-size: cover;
    		background-position: top;
    		margin: 0 auto 1em;

            @include break(from-phablet) {
            height: 300px;                
            }
    	}

    	.name {
    		color: $blue;
    		@include font-size(20);
    		line-height: 1em;
    		margin: 0;

            @include break(from-desktop) {
                @include font-size(22);                
            }
    	}

    	.title {
    		@include font-size(16);
    		line-height: 1em;
    		font-weight: 500;
    		color: $aqua;
    		margin: 0;

            @include break(from-desktop) {
                @include font-size(18);                
            }
    	}

    	.description {
    		padding: 1em 0;
    		text-align: left;
    		color: $grey;
    		@include font-size(12);

            @include break(from-desktop) {
                @include font-size(14);                
            }

    		p {
    			margin-top: 0;
    			line-height: 1.5em;
    		}    		
    	}
    }
}
