@layer addon {

    .templateCollection.collectionCase, .templateFilter.filterCase {
        .block {
            transition: var(--transition);
            transform-origin: center center;
            rotate: 0deg;
            .media {
                height: 100%;
                aspect-ratio: 23 / 28;
                    &:before {
                        content: "";
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background: linear-gradient(180deg, rgba(102, 102, 102, 0.00) 46.4%, rgba(0, 0, 0, 0.60) 81.2%);
                    }
            }
            .inner {
                position: absolute;
                width: 100%;
                height: 100%;
                align-items: flex-end;
                justify-content: space-between;
                flex-direction: row;
                .tags {
                    position: absolute;
                    top: var(--padding);
                    left: var(--padding);
                    gap: 0;
                    transform: rotate(-90deg) translateX(-100%);
                    transform-origin: left top;
                    flex-direction: column-reverse;
                    align-items: flex-end;
                    .tag {
                        white-space: nowrap;
                        background-color: var(--color3);
                        color: var(--color4);
                        text-transform: uppercase;
                        font-size: var(--s-fontsize);
                        line-height: 1;
                        font-weight: 600;
                        letter-spacing: 0.07em;
                        width: fit-content;

                        &:nth-child(1) {
                            background-color: var(--color1);
                            color: var(--color-light);
                        }

                        &:nth-child(2) {
                            background-color: var(--color4);
                            color: var(--color2);
                        }

                        &:nth-child(3) {
                            background-color: #35112B;
                            color: var(--color3);
                        }
                        
                    }
                }
                .title {
                    font-size: calc(var(--m-fontsize) * 2.5);
                    line-height: 1;
                    font-weight: 700;
                }
                .title, .subTitle {
                    color: var(--color-light);
                }
                .subTitle {
                    font-weight: 300;
                    font-size: var(--m-fontsize);
                    font-family: var(--font-extra);
                    line-height: 1.3;
                }
                .footer {
                    color: var(--color-light);
                    svg.icon {
                        width: 66px;
                    }
                }
            }

            &:hover {
                @media (hover: hover) {
                    rotate: -7deg;
                    cursor: url("/images/cursor-bekijk.svg") 55 32, pointer;
                }
            }
        }
    }
}