@layer addon {
                
    .audioContent {
        display: flex;
        flex-direction: column;
        gap: var(--gutter);
        .header {
            gap: unset;
            .title {
                font-family: "Bungee", sans-serif;
                font-size: calc(var(--m-fontsize) + .25rem);
                color: var(--color-dark);
            }
            .subTitle {
                font-size: var(--xs-fontsize);
                font-weight: normal;
                color: var(--color-dark);
            }
        }
        .audio {
            display: flex;
            flex-direction: row-reverse;
            width: 100%;
            justify-content: center;
            align-items: center;
            gap: calc(var(--padding) / 2);
            div {
                width: 150px;
            }
            audio {
                margin-bottom: var(--gutter);
            }
            .controls {
                width: 50px;
                height: 50px;
                background-color: var(--color-dark);
                color: var(--color-light);
                border-radius: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                .pause {
                    display: none;
                }
                &.playing {
                    .pause {display: block}
                    .play {display: none}
                }
            }
        }
        .review .templateMedia & {
            flex-direction: row;
            .header {
                .title {
                    font-size: var(--fontsize);
                }
            }
            .audio {
                justify-content: flex-end;
                align-items: flex-end;
                width: fit-content;
            }
        }
    }
}