@layer addon {

    .collectionPerson {
        grid-column: 1 / span 4;
        padding: 0;
        height: fit-content;
        display: flex;
        flex-direction: column;
        gap: var(--padding);
    }
    .intro {
        grid-column: span 8;
    }

    .collectionJobPosting {
        grid-column: 6 / span 7;
        padding: 0;
        .grid {
            order: unset!important;
        }
        article {
            grid-column: span 6;
        }
    }
    .collectionPerson,
    .collectionJobPosting {
        .container {
            grid-column: full-start / full-end;
        }
    }

    .templateCollection {
        @media (max-width: 56em) {
            grid-column: span 12;
        }
        @media (--max-fablet) {
            grid-column: span 12;
        }
    }

    .templatePersonDetail {
        padding: calc(var(--section) / 2) 0 var(--section);
        
        .container {
            align-items: flex-start;
            .goBack {
                grid-column: span 12;
                button {
                    display: flex;
                    align-items: center;
                    height: fit-content;
                    gap: calc(var(--gutter) / 2);
                    cursor: pointer;
                    color: var(--font-color);
                    .icon {
                        .transparent {
                            opacity: 0.2;
                        }
                    }
                    &:hover {
                        @media (hover: hover) {
                            .icon:last-of-type {
                                path {
                                    fill: var(--color-light);
                                    transition: var(--transition);
                                    &.transparent {
                                        fill: var(--color2);
                                        opacity: 1;
                                    }
                                }
                            }
                        }
                    }
                }
            }

            .intro {
                padding-bottom: var(--gutter);
            }
        }
        .collectionPerson {
            @media (max-width: 56em) {
                grid-column: span 12;
            }
            @media (--max-fablet) {
                grid-column: span 12;
            }
            .block {
                justify-content: center;
                align-items: center;
                @media (min-width: 56em) {
                    aspect-ratio: 3 / 4;
                }
                @media (--min-fablet) {
                    aspect-ratio: 3 / 4;
                }
            }
            .inner {
                width: 100%;
                .header {
                    .title {
                        font-size: var(--m-fontsize);
                        line-height: var(--m-lineheight);
                    }
                    .subTitle {
                        font-size: var(--fontsize);
                        line-height: var(--lineheight);
                        margin-top: 0;
                    }
                }
                .description {
                    font-size: var(--xs-fontsize);
                }
        
                .footer {
                    .contactPoints {
                        display: flex;
                        flex-wrap: wrap;
                        flex-direction: column;
                        max-width: fit-content;
                        gap: calc(var(--padding) / 4);
                        .button {
                            font-size: var(--xs-fontsize);
                            padding: 0;
                            &:after {
                                display: none;
                            }
                            .icon {
                                display: none;
                            }
                            .text {
                                padding-left: 0;
                            }
                            &:hover {
                                @media (hover: hover) {
                                    background-color: transparent;
                                    color: var(--color-light);
                                }
                            }
                        }
                    }
                    .button {
                        width: fit-content;
                    }
                }
                .playButton {
                    position: absolute;
                    bottom: calc(var(--padding) /2 );
                    right: calc(var(--padding) /2 );
                }
            }
        }
        .videoPlaying {
            .playButton {
                .icon {
                    &.play {opacity: 0;}
                    &.pause {opacity: 1;}
                }
                &:hover {
                    @media (hover: hover) {
                        opacity: 1;
                    }
                }
                &:after {
                    opacity: 0;
                }
            }
            video {
                position: absolute;
                top: 0;
                object-position: top;
            }
        }
    }

}