@layer addon {
    .templateCollection.collectionPerson, .templateFilter.filterPerson {
        .inner {
            .content {
                .title {
                    font-size: var(--m-fontsize);
                    line-height: var(--m-lineheight);
                }
                .subTitle {
                    font-size: var(--s-fontsize);
                    line-height: var(--s-lineheight);
                }
            }
            .footer {
                display: flex;
                gap: calc(var(--gutter) / 2);
                .button {
                    text-transform: unset;
                }
            }
        }
        &.single {
            .container {
                display: grid;
                .media {
                    width: 100%;
                    grid-column: span 4;
                }
                .inner {
                    grid-column: 6 / span 7;
                    .footer {
                        .textLink {
                            .icon {
                                order: 1;
                            }
                            .text {
                                order: 2;
                            }
                        }
                    }
                    .header + .content {
                        margin-top: var(--gutter)
                    }
                }
                @media (max-width: 56em) {
                    .media, .inner {
                        grid-column: span 12;
                    }
                }
                @media (--max-fablet) {
                    .media, .inner {
                        grid-column: span 12;
                    }
                }
            }

        }
    }
}