@layer addon {
    .templateCollection.collectionPerson, .templateFilter.filterPerson {
        .inner {
            .footer {
                .button {
                    &[data-email], &[data-telephone], &[data-whatsapp] {
                        &:hover {
                            @media (hover: hover) {
                                color: var(--color-dark);
                            }
                        }
                    }
                }
            }
        }
        &.themeColor1 {
            .inner {
                .footer {
                    .button {
                        &[data-email], &[data-telephone], &[data-whatsapp] {
                            &:hover {
                                @media (hover: hover) {
                                    color: var(--color2);
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .collectionPerson, .templateContent.process {
        .block {
            border-radius: 0;
            padding: 0;
            .media {
                width: 100%;
            }
            .inner {
                gap: var(--gutter);
                padding: 0;
                .header {
                    gap: calc(var(--padding) / 4);
                    .title {
                        font-size: var(--m-fontsize);
                        line-height: var(--m-lineheight);
                    }
                    .subTitle {
                        font-size: var(--xs-fontsize);
                        line-height: 1.3;
                    }
                }
                .footer {
                    flex-direction: column;
                    gap: var(--gutter);
                    .button {
                        padding: 0;
                        width: fit-content;
                        &:hover {
                            @media (hover: hover) {
                                background-color: transparent;
                            }
                        }
                        .icon {
                            width: 24px;
                            height: 24px;
                            margin-right: 10px;
                            opacity: 1;
                        }
                    }
                }
            }
            .single & {
                @media (min-width: 56em) {
                    gap: calc(var(--padding) * 2);
                    padding: 0 calc(var(--padding) * 2);
                    .media {
                        max-width: 370px;
                    }
                }
                @media (--min-fablet) {
                    gap: calc(var(--padding) * 2);
                    padding: 0 calc(var(--padding) * 2);
                    .media {
                        max-width: 370px;
                    }
                }
            }
            @media (min-width: 56em) {
                flex-direction: row;
                margin-right: 0;
                align-items: center;
            }
            @media (--min-fablet) {
                flex-direction: row;
                margin-right: 0;
                align-items: center;
            }
            @media (max-width: 56em) {
                .inner {
                    .footer {
                        .button {
                            width: 100%;
                        }
                    }
                }
            }
            @media (--max-fablet) {
                .inner {
                    .footer {
                        .button {
                            width: 100%;
                        }
                    }
                }
            }
        }
    }

    .templateContent.process {
        .block {
            .media {
                max-width: 200px;
            }
        }
        .inner {
            .footer {
                .button {
                    color: var(--color-light);
                }
            }
        }
    }

    .collectionPerson {
        .block {
            .media {
                max-width: 320px;
                @media (max-width: 56em) {
                    max-width: 164px;
                }
                @media (--max-fablet) {
                    max-width: 164px;
                }
            }
        }
        .block {
            .inner {
                width: 100%;
                @media (max-width: 56em) {
                    text-align: center;
                }
                @media (--max-fablet) {
                    text-align: center;
                }
            }
        }
        &.themeColor1 {
            .button {
                color: #fff;
            }
        }
    }
}