@layer addon {

    .templateCollection.collectionCase,
    .templateFilter.filterCase {
        .block {
            background-color: var(--color1);
            .inner {
                .title {
                    font-size: calc(var(--m-fontsize) + .25rem);
                    font-family: "Bungee", sans-serif;
                }
                .header {
                    flex: 1;
                }
                .footer {
                    justify-content: space-between;
                    gap: 0;
                    flex-direction: row;
                    align-items: flex-end;
                    .button {
                        width: fit-content;
                        height: fit-content;
                        &.outline {
                            box-shadow: inset 0 0 0 1px var(--color-dark);
                            &:hover {
                                @media (hover: hover) {
                                    box-shadow: inset 0 0 0 1px var(--color-dark);
                                }
                            }
                        }
                    }
                    img {
                        max-width: 100px;
                    }
                }
            }
        }
    }
}