.portfolio-masthead
background-image: linear-gradient(to bottom right, $pink , $vivid-pink)
.portfolio-wraper
background-color: $pure-white margin: 0
.portfolio-panel
padding: 5vh 0
.portfolio-item
display: flex flex-direction: column margin: 10vh auto max-width: 600px min-height: 35vh overflow: hidden
.portfolio-image
background-position: top background-size: cover height: 40vh transition: transform 2s cubic-bezier(.2 , .3, 0, 1)
.portfolio-card-wrapper
background-color: $white padding: 0 10px 10px z-index: 1
.portfolio-card
background-color: $pure-white border-radius: 5px box-shadow: 0 6px 16px $box-shadow-shade display: flex flex-direction: column margin-top: -5vh padding: 2rem 1rem transition: transform 2s cubic-bezier(.2, .3, 0, 1)
.portfolio-title
color: $vivid-blue margin: 0 0 5px 10px padding: 0
.portfolio-strap
display: none margin: 0 0 10px padding: 0
.portfolio-description
color: $soft-black font-size: 1rem margin-bottom: auto margin-top: auto min-height: 100%
.portfolio-technologies
display: flex justify-content: flex-end position: relative li color: $light-blue list-style: none padding-left: 1rem
@media screen and ( min-width: 576px )
.portfolio-strap color: $vivid-blue display: block
// dont hover on phones @media screen and ( min-width: 768px )
.portfolio-item flex-direction: row max-width: 700px &:hover .portfolio-image transform: scale(1.2) .portfolio-card transform: translateX(-10px) .portfolio-card margin-left: -5vh margin-top: 0 padding: 2rem .portfolio-image border: 0 border-radius: 0 height: auto min-width: 50% .portfolio-card-wrapper padding: 5vh 5vh 5vh 0 width: 50% .portfolio-title color: $black .portfolio-description font-weight: $heavy-font
@media screen and ( min-width: 1024px )
.portfolio-item max-width: 900px
@media screen and ( min-width: 1220px )
.portfolio-item max-width: 1100px