@layer addon {

    .templateCover {
        .inner {
            .buttons {
                gap: 16px;
                flex-wrap: nowrap;
                .button {
                    width: max-content;
                }
            }
        }
    }

    .banner {
        background-color: var(--color3);
        padding: var(--padding) 0;
        .inner {
            flex-direction: row;
            gap: var(--gutter);
            @media (max-width: 56em) {
                flex-direction: column;
                align-items: flex-start;
            }
            @media (--max-fablet) {
                flex-direction: column;
                align-items: flex-start;
            }
            .title {
                font-size: var(--m-fontsize);
                -webkit-hyphens: unset;
                        hyphens: unset;
            }
            .button {
                &:hover {
                    @media (hover: hover) {
                        color: var(--color-dark);
                    }
                }
            }
        }
    }

    .templateContent.columns {
        .inner {
            grid-column: span 6;
            .block {
                background-color: unset;
                .inner {
                    padding: 0;
                    .content {
                        margin: 0;
                    }
                }
            }
            &.column-2 {
                background-color: unset;
                .content {
                    background-color: var(--color1);
                    padding: var(--padding);
                }
            }
        }
    }
    .templateBlocks.image {
        &.themeColor3 {
            .grid {
                .splide {
                    .splide__track {
                        .item {
                            .block {
                                gap: var(--gutter) !important;
                                justify-content: flex-start;

                                .intro {
                                    gap: var(--gutter) !important;
                                }
                                .content {
                                    align-items: flex-end !important;
                                    display: flex !important;
                                    opacity: 1 !important;
                                    max-height: fit-content !important;
                                }
                                .media, .buttons {
                                    opacity: 1 !important;
                                    max-height:none !important;
                                }
                                .inner {
                                    flex-grow: 0 !important;
                                }
                                &:hover {
                                    @media (hover: hover) {
                                        background-color: var(--color-dark);
                                        .title, .content {
                                            color: var(--color-light);
                                        }
                                        .media {
                                            opacity: 1;
                                            max-height: fit-content;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        &.themeColor1 {
            .grid {
                .splide {
                    .splide__track {
                        .item {
                            .block {
                                .media {
                                    height: 125px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .templateMedia.form {
        .media {
            &.employee {
                &:before, &:after {
                    display: none;
                }
                .media img {
                    aspect-ratio: 1/1;
                }
            }
            overflow: visible;
            .inner {
                background-color: var(--color-dark);
                padding: var(--padding);
                gap: var(--gutter);
                
                @media (min-width: 56em) {
                    position: absolute;
                    top: calc(100% - 115px);
                    left: 50%;
                    transform: translateX(-50%);
    
                    min-width: 230px;
                    min-height: 230px;
                }
                
                @media (--min-fablet) {
                    position: absolute;
                    top: calc(100% - 115px);
                    left: 50%;
                    transform: translateX(-50%);
    
                    min-width: 230px;
                    min-height: 230px;
                }
                .title {
                    font-size: var(--fontsize);
                    line-height: var(--lineheight);
                    font-family: "Bungee", sans-serif;
                    text-align: center;
                }
                .title, .button {
                    color: var(--color-light);
                }
                .footer {
                    display: flex;
                    flex-direction: column;
                    flex-wrap: wrap;
                    gap: calc(var(--gutter) / 2);
                    .button {
                        .icon {
                            display: none;
                        }
                    }
                }
            }
        }
        .frmHtml {
            display: flex;
            flex-direction: column;
            gap: var(--gutter);
            fieldset {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                gap: var(--gutter);
    
                padding: 0;
                legend {
                    all: unset;
                }
                legend, .form-label {
                    font-weight: bold;
                }
                .field {
                    width: 100%;
                    &:not(.checkbox) {
                        padding: var(--form-input-size);
                        box-shadow: 0 0 0 1px var(--color-dark);
                    }

                    @media (min-width: 56em) {
                        &.col-6 {
                            width: calc(50% - calc(var(--gutter) / 2));
                        }
                    }

                    @media (--min-fablet) {
                        &.col-6 {
                            width: calc(50% - calc(var(--gutter) / 2));
                        }
                    }
                    .form-control {
                        display: flex;
                        width: 100%;
                        .symbol { order: 2; }
                        input, select, textarea {
                            background-color: transparent;
                            border: unset;
                            padding: 0;
                            &[type="checkbox"] {
                                box-shadow: 0 0 0 1px var(--color-dark);
                            }
                        }
    
                        &.upload {
    
                            .uploadControl {
                                width: 100%;
                                display: flex;
                                align-items: center;
                            }
    
                            input::file-selector-button {
                                display: none;
                            }
                            &.selected {
                                .button:not(.clearButton) {
                                    display: none;
                                }
    
                            }
    
                        }
                    }
                }
            }
        }
    }

    
}