@layer addon {
    .templateCollection.collectionPerson, .templateFilter.filterPerson {
        .media {
            border-radius: 0;
        }
        .inner {
            .footer {
                display: flex;
                gap: calc(var(--gutter) / 2);
                align-items: flex-start;
                flex-wrap: wrap;
                flex-direction: column;
                .button {
                    justify-content: flex-start;
                    background-color: transparent;
                    padding: 0;
                    color: var(--font-color);
                    .text {order: 3;}
                    .icon {
                        color: var(--color2);
                        width: 20px;
                    }
                }
            }
        }
        .block {
            .themeColor1 & {
                background-color: #fff;
                box-shadow: var(--boxshadow);
            }
            @media (min-width: 56em) {
                flex-direction: row;
            }
            @media (--min-fablet) {
                flex-direction: row;
            }
            .inner {
                flex: 1;
                position: relative;
                
                .header {
                    gap: 0;
                }
            }
        }
    }

    .templateCollection.collectionPerson {
        article {
            grid-column: span 12;
            .block {
                @media (min-width: 56em) {
                    border-radius: 0;
                }
                @media (--min-fablet) {
                    border-radius: 0;
                }
                @media (max-width: 56em) {
                    border-top-left-radius: var(--section-radius);
                    border-top-right-radius: var(--section-radius);
                    border-bottom-left-radius: 0;
                    border-bottom-right-radius: 0;
                }
                @media (--max-fablet) {
                    border-top-left-radius: var(--section-radius);
                    border-top-right-radius: var(--section-radius);
                    border-bottom-left-radius: 0;
                    border-bottom-right-radius: 0;
                }
                height: 100%;
            }
            &:first-child {
                .block {
                    @media (min-width: 56em) {
                        border-top-left-radius: var(--section-radius);
                        border-top-right-radius: var(--section-radius);
                        border-bottom-left-radius: 0;
                        border-bottom-right-radius: 0;
                    }
                    @media (--min-fablet) {
                        border-top-left-radius: var(--section-radius);
                        border-top-right-radius: var(--section-radius);
                        border-bottom-left-radius: 0;
                        border-bottom-right-radius: 0;
                    }
                }
            }
            &:last-child {
                .block {
                    @media (min-width: 56em) {
                        border-top-left-radius: 0;
                        border-top-right-radius: 0;
                        border-bottom-left-radius: var(--section-radius);
                        border-bottom-right-radius: var(--section-radius);
                    }
                    @media (--min-fablet) {
                        border-top-left-radius: 0;
                        border-top-right-radius: 0;
                        border-bottom-left-radius: var(--section-radius);
                        border-bottom-right-radius: var(--section-radius);
                    }
                }
            }
        }
        .inner {
            .header {
                .title {
                    font-size: var(--m-fontsize);
                    line-height: var(--m-lineheight);
                    color: var(--font-color);
                }
                .subTitle {
                    margin-top: 0;
                    font-size: var(--s-fontsize);
                    line-height: var(--s-lineheight);
                    color: var(--color2);
                    font-weight: bold;
                }
            }
        }
        &.single {
            .media {
                order: 2;
                width: 100%;
                height: 100%;
                @media (min-width: 56em) {
                    grid-column: 9 / span 4;
                }
                @media (--min-fablet) {
                    grid-column: 9 / span 4;
                }
            }
            .inner {
                padding: var(--section) var(--gutter);
                @media (min-width: 56em) {
                    padding: var(--section) 0;
                    grid-column: 2 / span 6;
                }
                @media (--min-fablet) {
                    padding: var(--section) 0;
                    grid-column: 2 / span 6;
                }
            }
        }
    }
}