@layer addon {
    .templateMedia {
        &.themeColor3, &.themeColor4 {
            padding: 0;
            .container {
                border-radius: var(--border-radius);
                padding: var(--padding) calc(var(--padding) / 2);
            }
        }

        &:has(fieldset) {
            padding-bottom: calc(var(--section) / 2);
            .title {
                font-size: var(--xl-fontsize);
                line-height: var(--xl-lineheight);
            }
        }
        
        .media:has(.playing) {
            border-radius: var(--border-radius);
            &:before {display: none;}
        }

        .inner {
            padding: 0;

            fieldset {
                label {
                    border-radius: var(--circle-radius);
                    border: 2px solid var(--color-light);
                    padding: 8px 10px;
                }
                input {
                    flex: 1;
                    background: none;
                    border: 0;
                    outline: none;
                    color: var(--color-light);
                }
                button {
                    position: relative;
                    top: auto;
                    right: auto;
                    transform: none;

                    width: 56px;
                    height: 56px;
                    border-radius: 100%;
                    background: var(--color2);
                    color: var(--color-dark);

                    justify-content: center;
                    align-items: center;
                    display: flex;
                    svg {width: 20px;}
                }
            }
        }
        @media (max-width: 56em) {
            /* padding: var(--padding) calc(var(--padding) / 2); uitgezet ivm jobfilter */
            .media {
                max-width: 256px;
                margin: 0 auto;
            }
            .inner {
                text-align: center;
            }
        }
        @media (--max-fablet) {
            /* padding: var(--padding) calc(var(--padding) / 2); uitgezet ivm jobfilter */
            .media {
                max-width: 256px;
                margin: 0 auto;
            }
            .inner {
                text-align: center;
            }
        }
        &.mediaLeft {
            @media (min-width: 56em) {
                .media {
                    grid-column: span 4;
                }
                .inner {
                    grid-column: 5 / span 8;
                }
            }
            @media (--min-fablet) {
                .media {
                    grid-column: span 4;
                }
                .inner {
                    grid-column: 5 / span 8;
                }
            }
        }
        &.mediaRight {
            @media (min-width: 56em) {
                .media {
                    grid-column: 9 / span 4;
                }
                .inner {
                    grid-column: span 8;
                }
                
            }
            @media (--min-fablet) {
                .media {
                    grid-column: 9 / span 4;
                }
                .inner {
                    grid-column: span 8;
                }
                
            }
        }
    }
}