@layer addon {
    .templateCollection.collectionPage, .templateFilter.filterPage {
        .block {
            box-shadow: var(--boxshadow);
            background: #fff;
            @media (min-width: 56em) {
                flex-direction: row;
            }
            @media (--min-fablet) {
                flex-direction: row;
            }
            .inner {
                flex: 1;
                @media (min-width: 56em) {
                    justify-content: center;
                }
                @media (--min-fablet) {
                    justify-content: center;
                }
                position: relative;
                padding-right: calc(var(--padding) * 2);
                transition: var(--transition);
                &:before {
                    transition: var(--transition);
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    content: "";
                    background: var(--gradient);
                    opacity: 0;
                }
                .title {
                    z-index: 2;
                    transition: var(--transition);
                }
                .content {
                    z-index: 2;
                    flex-grow: 0;
                }
                .footer {
                    @media (min-width: 56em) {
                        z-index: 2;
                        position: absolute;
                        right: var(--padding);
                        top: 50%;
                        transform: translateY(-50%);
                        .text {
                            display: none;
                        }
                        .button.textLink {
                            .icon {
                                font-size: var(--m-fontsize);
                            }
                        }
                    }
                    @media (--min-fablet) {
                        z-index: 2;
                        position: absolute;
                        right: var(--padding);
                        top: 50%;
                        transform: translateY(-50%);
                        .text {
                            display: none;
                        }
                        .button.textLink {
                            .icon {
                                font-size: var(--m-fontsize);
                            }
                        }
                    }
                }
            }

            &:hover {
                @media (hover: hover) {
                    .inner {
                        color: #fff;
                        &:before {
                            opacity: 1;
                        }
                    }
                    .title {color: #fff;}
                    .footer {
                        .button {
                            &.textLink {
                                .icon {
                                    color: #fff;
                                    transform: translateX(0);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .templateCollection.collectionPage {
        ul.splide__list {
            @media (min-width: 56em) {
                display: flex;
                flex-direction: column;
            }
            @media (--min-fablet) {
                display: flex;
                flex-direction: column;
            }
            gap: var(--gutter);
            li {
                .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);
                        }
                    }
                }
            }
        }
    }
}