Untitled

<sly data-sly-use.templates="core/wcm/components/commons/v1/templates.html" />
<sly data-sly-call="${templates.placeholder @ isEmpty = !properties.type}"></sly>

<div class="margin">
    <div class="margin mobile"
        data-sly-test="${properties.marginMobileTop || properties.marginMobileRight || properties.marginMobileLeft || properties.marginMobileBottom}"
        style="padding-top: ${properties.marginMobileTop || '0' @context='styleToken'}px;
               padding-right: ${properties.marginMobileRight || '0' @context='styleToken'}px;
               padding-left: ${properties.marginMobileLeft || '0' @context='styleToken'}px;
               padding-bottom: ${properties.marginMobileBottom || '0' @context='styleToken'}px;">
    </div>

    <div class="margin tablet"
        data-sly-test="${properties.marginTabletTop || properties.marginTabletRight || properties.marginTabletLeft || properties.marginTabletBottom}"
        style="padding-top: ${properties.marginTabletTop || '0' @context='styleToken'}px;
               padding-right: ${properties.marginTabletRight || '0' @context='styleToken'}px;
               padding-left: ${properties.marginTabletLeft || '0' @context='styleToken'}px;
               padding-bottom: ${properties.marginTabletBottom || '0' @context='styleToken'}px;">
    </div>

    <div class="margin desktop"
        data-sly-test="${properties.marginDesktopTop || properties.marginDesktopRight || properties.marginDesktopLeft || properties.marginDesktopBottom}"
        style="padding-top: ${properties.marginDesktopTop || '0' @context='styleToken'}px;
               padding-right: ${properties.marginDesktopRight || '0' @context='styleToken'}px;
               padding-left: ${properties.marginDesktopLeft || '0' @context='styleToken'}px;
               padding-bottom: ${properties.marginDesktopBottom || '0' @context='styleToken'}px;">
    </div>

    <div class="margin large-desktop"
        data-sly-test="${properties.marginLargeDesktopTop || properties.marginLargeDesktopRight || properties.marginLargeDesktopLeft || properties.marginLargeDesktopBottom}"
        style="padding-top: ${properties.marginLargeDesktopTop || '0' @context='styleToken'}px;
               padding-right: ${properties.marginLargeDesktopRight || '0' @context='styleToken'}px;
               padding-left: ${properties.marginLargeDesktopLeft || '0' @context='styleToken'}px;
               padding-bottom: ${properties.marginLargeDesktopBottom || '0' @context='styleToken'}px;">
    </div>

    <div class="margin extra-large-desktop"
        data-sly-test="${properties.marginExtraLargeDesktopTop || properties.marginExtraLargeDesktopRight || properties.marginExtraLargeDesktopLeft || properties.marginExtraLargeDesktopBottom}"
        style="padding-top: ${properties.marginExtraLargeDesktopTop || '0' @context='styleToken'}px;
               padding-right: ${properties.marginExtraLargeDesktopRight || '0' @context='styleToken'}px;
               padding-left: ${properties.marginExtraLargeDesktopLeft || '0' @context='styleToken'}px;
               padding-bottom: ${properties.marginExtraLargeDesktopBottom || '0' @context='styleToken'}px;">
    </div>

    <div class="margin tablet-portrait"
        data-sly-test="${properties.marginTabletPortraitTop || properties.marginTabletPortraitRight || properties.marginTabletPortraitLeft || properties.marginTabletPortraitBottom}"
        style="padding-top: ${properties.marginTabletPortraitTop || '0' @context='styleToken'}px;
               padding-right: ${properties.marginTabletPortraitRight || '0' @context='styleToken'}px;
               padding-left: ${properties.marginTabletPortraitLeft || '0' @context='styleToken'}px;
               padding-bottom: ${properties.marginTabletPortraitBottom || '0' @context='styleToken'}px;">
    </div>

    <div class="margin tablet-landscape"
        data-sly-test="${properties.marginTabletLandscapeTop || properties.marginTabletLandscapeRight || properties.marginTabletLandscapeLeft || properties.marginTabletLandscapeBottom}"
        style="padding-top: ${properties.marginTabletLandscapeTop || '0' @context='styleToken'}px;
               padding-right: ${properties.marginTabletLandscapeRight || '0' @context='styleToken'}px;
               padding-left: ${properties.marginTabletLandscapeLeft || '0' @context='styleToken'}px;
               padding-bottom: ${properties.marginTabletLandscapeBottom || '0' @context='styleToken'}px;">
    </div>
</div>