@import “../variables/initial-variables.sass”

.s-card-grid

display: flex
flex-direction: row
justify-content: center
flex-wrap: wrap

.s-card

    display: flex
    flex-direction: column
    max-width: 100%
    width: 48vh
    background-color: white
    box-shadow: 2px 2px 20px $grey-light
    border-radius: 3px
    padding: 0
    margin: 0.5rem
    -webkit-transition: 0.3s ease-in-out !important
transition: 0.2s ease-in-out !important

.s-blog-card

    display: flex
    flex-direction: column
    max-width: 100%
    width: 700px
    background-color: white
    border-radius: 1px
    padding: 0
    margin: 0.5rem
    -webkit-transition: 0.3s ease-in-out !important
transition: 0.2s ease-in-out !important

.s-card:hover

box-shadow: 4px 4px 20px $grey

.s-card-content

padding: 20px

img

max-width: 100%
width: 48vh
height: 30vh
border-radius: 3px 3px 0 0
margin: 0

.s-card-title

font-family: 'Noto Sans'
font-size: 1.3rem !important
margin: 0

.s-card-text

margin: 0
font-family: 'Noto Sans'
font-size: 12px

.s-profile-card

    width: 48vh
    min-height: 45vh
    display: flex
    flex-direction: column
    border-radius: 10px
    margin: 15px
    padding: 0
    box-shadow: 2px 2px 20px $grey-light
    -webkit-transition: 0.3s ease-in-out !important
transition: 0.2s ease-in-out !important

.s-profile-card:hover

box-shadow: 4px 4px 20px $grey

.s-profile-card-container

display: flex
justify-content: center
width: 48vh
flex-direction: column

.s-profile-background

width: 48vh;
min-height: 22vh;
background-size: cover;
border-radius: 10px 10px 0 0;

.s-profile-picture

margin-top: -70px
display: flex
justify-content: center

.s-profile-image

width: 20vh
height: 20vh
border-radius: 100%
background-color: white
border: 3px solid white

.s-profile-media

background-color: white
border-radius: 10px

.s-profile-content

display: flex
flex-direction: column
padding: 20px
font-family: 'Montserrat'
justify-content: center
text-align: center
margin-top: -10px
background-color: white
z-index: -1
border-radius: 0 0 10px 10px
font-family: 'Montserrat'

.s-profile-title

padding: 0
margin: 0
font-weight: 300
font-size: 1.5rem

.s-profile-text

padding: 0
font-size: 0.75rem
margin: 0.5em

.s-profile-links

letter-spacing: 3px

.fa-instagram

color: #E44D55

.fa-linkedin

color: #0076B4

.fa-twitter

color: #1DA1F4