@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;
                        }
                    }
                }
            }
        }

    }
}