@layer addon {
    .templateBlocks {
        &.image {
            .intro {
                @media (min-width: 56em) {
                    width: 70%;
                }
                @media (--min-fablet) {
                    width: 70%;
                }
            }
            .grid {
                position: relative;

                &:before, &:after {
                    display: block;
                    width: calc(100% + (var(--spacer) * 2));
                    left: calc(var(--spacer) * -1);
                    height: 1px;
                    background-color: var(--color-dark);
                    content: "";
                    position: absolute;
                    z-index: 999;
                }
                .themeColor3 & {
                    &:before, &:after {
                        background-color: var(--color-light);
                    }
                }
                &:before {
                    top: 0;
                }
                &:after {
                    bottom: 0;
                }
                .splide {
                    .splide__track {
                        height: 100%;
                        @media (min-width: 56em) {
                            width: calc(100% + 160px);
                            left: -80px;
                            right: -80px;
                        }
                        @media (--min-fablet) {
                            width: calc(100% + 160px);
                            left: -80px;
                            right: -80px;
                        }
                        .splide__list {
                            height: 100%;
                            .item {
                                height: 100%;
                                width: 100%;
                                @media (min-width: 56em) {
                                    .slides-1 & {
                                        width: 100%;
                                    }
                                    .slides-2 & {
                                        width: 50%;
                                    }
                                    .slides-3 & {
                                        width: 33.3333%;
                                    }
                                    .slides-4 & {
                                        width: 25%;
                                    }
                                }
                                @media (--min-fablet) {
                                    .slides-1 & {
                                        width: 100%;
                                    }
                                    .slides-2 & {
                                        width: 50%;
                                    }
                                    .slides-3 & {
                                        width: 33.3333%;
                                    }
                                    .slides-4 & {
                                        width: 25%;
                                    }
                                }
                            }
                        }
                        .item {
                            height: 100%;
                            margin-right: 0 !important;

                            &:last-child {
                                .block {
                                    border-right: unset;
                                }
                            }
                            .block {
                                min-height: 400px;
                                padding: var(--padding);
                                gap: var(--gutter);
                                background-color: inherit;
                                border-right: 1px solid var(--color-dark);
                                justify-content: flex-end;
                                transition: background 0.3s ease-in-out;
                                .themeColor3 & {
                                    border-color: var(--color-light);
                                }
                                @media (max-width: 56em) {
                                    border: 0;
                                }
                                @media (--max-fablet) {
                                    border: 0;
                                }
                                .media {
                                    height: 125px;
                                    img {
                                        width: 100%;
                                        height: 100%;
                                        object-fit: contain;
                                        object-position: left;
                                    }
                                }
                                .inner {
                                    gap: var(--gutter);
                                    padding: 0;
                                    justify-content: flex-end;
                                    flex-grow: initial;
                                    @media (min-width: 56em) {
                                        .intro {
                                            gap: 0;
                                            width: 100%;
                                        }
                                        .content {
                                            opacity: 0;
                                            max-height: 0;
                                        }
                                    }
                                    @media (--min-fablet) {
                                        .intro {
                                            gap: 0;
                                            width: 100%;
                                        }
                                        .content {
                                            opacity: 0;
                                            max-height: 0;
                                        }
                                    }
                                    .title {
                                        font-size: var(--m-fontsize);
                                        line-height: var(--m-lineheight);
                                        font-family: "Bungee", sans-serif;
                                    }
                                    .content {
                                        font-size: var(--xs-fontsize);
                                    }
                                    .title + .content {
                                        margin-top: 0;
                                    }
                                    .buttons {
                                        @media (max-width: 56em) {
                                            display: none;
                                        }
                                        @media (--max-fablet) {
                                            display: none;
                                        }
                                        .icon {
                                            .themeColor3 & {
                                                color: var(--color-light);
                                            }
                                        }
                                    }
                    
                                    .title, .content, .text {
                                        .themeColor3 & {
                                            color: var(--color-light);
                                        }
                                    }
                                }
                                
                                @media (min-width: 56em) {
                                    &:hover {
                                        @media (hover: hover) {
                                            gap: 0;
                                            background-color: var(--color2);
                                            color: var(--color-dark);
                                            transition: var(--transition);
                                            .title, .content {
                                                color: var(--color-dark);
                                                .themeColor3 & {
                                                    color: var(--color-dark);
                                                }
                                            }
                                            .inner {
                                                flex-grow: 1;
                                                gap: 0;
                                            }
                                            .intro {
                                                gap: var(--gutter);
                                                justify-content: space-between;
                                                height: 100%;
                                            }
                                            .content {
                                                opacity: 1;
                                                max-height: fit-content;
                                            }
                                            .media, .buttons {
                                                opacity: 0;
                                                max-height: 0;
                                            }
                                        }
                                    }
                                    .contact & {
                                        gap: var(--gutter);
                                        &:hover {
                                            @media (hover: hover) {
                                                background-color: var(--color-dark);
                                                .title, .content {
                                                    color: var(--color-light);
                                                }
                                                .media {
                                                    opacity: 1;
                                                    max-height: fit-content;
                                                }
                                            }
                                        }
                                        
                                        .inner {
                                            flex-grow: initial;
                                            gap: var(--gutter);
                                        }
                                        .intro {
                                            gap: var(--gutter);
                                            justify-content: space-between;
                                            height: 100%;
                                        }

                                        .content {
                                            opacity: 1;
                                            max-height: fit-content;
                                        }
                                    }
                                }
                                
                                @media (--min-fablet) {
                                    &:hover {
                                        @media (hover: hover) {
                                            gap: 0;
                                            background-color: var(--color2);
                                            color: var(--color-dark);
                                            transition: var(--transition);
                                            .title, .content {
                                                color: var(--color-dark);
                                                .themeColor3 & {
                                                    color: var(--color-dark);
                                                }
                                            }
                                            .inner {
                                                flex-grow: 1;
                                                gap: 0;
                                            }
                                            .intro {
                                                gap: var(--gutter);
                                                justify-content: space-between;
                                                height: 100%;
                                            }
                                            .content {
                                                opacity: 1;
                                                max-height: fit-content;
                                            }
                                            .media, .buttons {
                                                opacity: 0;
                                                max-height: 0;
                                            }
                                        }
                                    }
                                    .contact & {
                                        gap: var(--gutter);
                                        &:hover {
                                            @media (hover: hover) {
                                                background-color: var(--color-dark);
                                                .title, .content {
                                                    color: var(--color-light);
                                                }
                                                .media {
                                                    opacity: 1;
                                                    max-height: fit-content;
                                                }
                                            }
                                        }
                                        
                                        .inner {
                                            flex-grow: initial;
                                            gap: var(--gutter);
                                        }
                                        .intro {
                                            gap: var(--gutter);
                                            justify-content: space-between;
                                            height: 100%;
                                        }

                                        .content {
                                            opacity: 1;
                                            max-height: fit-content;
                                        }
                                    }
                                }
                                .contact & {
                                    justify-content: flex-start;
                                    min-height: fit-content;
                                    padding-top: calc(var(--padding) * 3);
                                }
                            }
                        }
                    }
                }
            }
        }
        &.content {
            .grid {
                .splide {
                    .splide__list {
                        flex-wrap: wrap;
                        row-gap: calc(var(--padding) * 1.5);
                        column-gap: var(--gutter);
                        .splide__slide {
                            margin-right: 0 !important;
                            .block {
                                background-color: transparent;
                                .inner {
                                    padding: 0;
                                    .intro {
                                        gap: 0;
                                        .title {
                                            font-family: var(--font-sub);
                                            font-size: var(--s-fontsize);
                                            font-weight: 400;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
                
        }
    }
    
}