@layer addon { .collectionPerson, .filterPerson { .media { &:before { background: var(--gradient-image); } } .block { transition: var(--transition); @media (min-width: 56em) { min-height: 550px; } @media (--min-fablet) { min-height: 550px; } .inner { gap: var(--padding); padding-top: var(--section); justify-content: flex-end; .header { gap: 8px; .title { font-size: var(--m-fontsize); line-height: var(--m-lineheight); -webkit-hyphens: none; hyphens: none; } .subTitle { font-size: var(--fontsize); line-height: var(--lineheight); margin-top: 0; color: var(--color-light); } } .footer { flex-direction: row; align-items: flex-end; justify-content: space-between; .button { width: fit-content; &:after { display: none; } } .contactPoints { display: flex; gap: calc(var(--padding) / 4); flex-wrap: wrap; flex-direction: column; .button { padding: 0; font-size: var(--xs-fontsize); line-height: var(--xs-lineheight); &:hover { @media (hover: hover) { background-color: transparent; text-decoration: underline; color: var(--color-light); } } } } .button.textLink { position: absolute; right: var(--gutter); bottom: var(--gutter); } } } } &.single { .header { position: absolute; left: var(--padding); bottom: var(--padding); z-index: 99; .title { font-size: var(--m-fontsize); line-height: var(--m-lineheight); color: var(--color-light); } .subTitle { font-size: var(--fontsize); line-height: var(--lineheight); color: var(--color-light); margin-top: calc(var(--gutter) / 3); } } .media { img { aspect-ratio: 1; } &:before { content: ""; position: absolute; z-index: 9; width: 100%; height: 100%; } @media (max-width: 56em) { order: 2; } @media (--max-fablet) { order: 2; } } .inner { .footer { gap: var(--gutter); .button { gap: var(--gutter); &[data-email], &[data-telephone] { text-decoration: none; } &:hover { @media (hover: hover) { .icon { width: 24px; margin-left: 0; margin-right: 0; opacity: 1; } } } .icon { height: 24px; margin-left: unset; } } } } } } .collectionPerson.single, .collectionPerson, .filterPerson { .block img, .media picture { &:last-of-type { position: absolute; top: 0; transition: all 250ms linear 250ms; opacity: 0; } } .block, .media { &:hover { @media (hover: hover) { picture, img { &:last-of-type { opacity: 1; } } } } } } }