.jet-team-member { &__inner { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; } &__image { position: relative; img.jet-team-member__img-tag { width: 100%; height: 100%; object-fit: cover; } } &__image { width: 100%; } &__figure { width: 100%; height: 100%; overflow: hidden; line-height: 0; } &__cover { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; position: absolute; width: 100%; height: 100%; top: 0; left: 0; &:empty { display: none; } > * { z-index: 1; } &:before { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 0; content: ''; } &:after { display: block; position: absolute; width: 0; height: 0; border-style: solid; border-width: 10px 10px 0 10px; bottom: -10px; content: none; } } &__content { position: relative; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; width: 100%; &:empty { display: none; } } &__name { align-self: stretch; text-align: center; max-width: 100%; } &__position { max-width: 100%; } &__desc { max-width: 100%; } &__button-container { display: flex; justify-content: center; width: 100%; } &__button { } &__socials { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; } &__socials-item { .inner { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; } } &.jet-team-member--cover-hint { .jet-team-member__image { } .jet-team-member__cover { top: auto; height: auto; bottom: 100%; padding-bottom: 12px; &:before { height: calc( 100% - 12px ); } &:after { bottom: 2px; } } } &.jet-team-member--hint-corner { .jet-team-member__cover { &:after { content: ''; } } } &.jet-team-member--cover-hover { .jet-team-member__cover { opacity: 0; pointer-events: none; transition: opacity 0.3s cubic-bezier(.69,.1,.33,.9); transition-delay: .2s; } .jet-team-member__image { &:hover { .jet-team-member__cover { opacity: 1; pointer-events: auto; transition-delay: 0s; } } } } }