OwlCyberSecurity - MANAGER

Edit File: _teammember.scss

.team-member {
    .separator {
         @include rem(margin-bottom, $half-spacing-unit/2);
    }
}

.team-member__image__link{
    display: block;
    position: relative;

@include media(small hand) {
        float: left;
        width: 30%;
        @include rem(margin-right, $base-spacing-unit);
    }

&:hover > .team-member__profile{
        @include opacity(1);
    }

img{
        width: 100%;
        height: auto;
    }
}

.team-member__profile{
    @include rem(margin, $half-spacing-unit 0);

@include media(from lap) {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        background-color: rgba($accent-color, 0.8);
        @include opacity(0);
        @include transition-property(opacity);
        @include transition-duration(0.3s);    
    }
}

.team-member__profile__table{
    display: table;
    height: 100%;
    width: 100%;
}

.team-member__profile__cell{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    @include font-size(36px);

@include media(to lap) {
        text-decoration: underline;        
    }    
}

.team-member__image{
    img{
        vertical-align: top;
    }
}

.team-member__name{
    @include rem(margin, $base-spacing-unit 0 $half-spacing-unit/2);
}

.team-member__position{
    @include rem(margin, 0 0 $half-spacing-unit/2);
}

.team-member__description{
    @include rem(margin-bottom, $base-spacing-unit);
    @include font-size(16px);
}

.team-member__name, .team-member__position,
.team-member__description p{
    text-align: center;
    
    @include media(small hand) {
        text-align: left;
    }

@include media(from lap) {
        text-align: left;
    }
}

.team-member__social-links-list{
    text-align: center;

@include media(small hand) {
        text-align: right;
    }
    
    @include media(from lap) {
        text-align: left;
    }    
}

.team-member__social-link{
    display: inline-block !important;
}

.team-member__social-link__link{
    @include font-size(18px);
    @include rem(padding, $half-spacing-unit/2);
}