/*!
* Neon template
* Content element - Textmedia
*/

/* common styles */
@media all {    

    .neon_textmedia .item {
        grid-column: col-1 / col-12;
        grid-column: 3 / -3;
    }

    .neon_textmedia .header + .bodytext {
        margin-top: var(--gap-header-bodytext);
    }

    .neon_textmedia .header ,
    .neon_textmedia .bodytext {
        padding-left: var(--padding-element-x-left);
        padding-right: var(--padding-element-x-right);
    }

    .container .neon_textmedia .item {
        grid-column: 1 / -1;
    }
    
}

/* textmedia-above */
@media all {    

    .above .media + .text {
        margin-top: var(--gap-media-text);
    }
    
    .above .media .text {
        max-width: var(--max-width-text);
    }

    .fullwidth.above .text {
        /*! margin-bottom: var(--gap-page-y); */
    }

    .fullwidth.above .media {
        grid-column: full / full;
        grid-column: 1 / -1;
    }

}

/* textmedia-behind */
@media all {

    .behind .media {
        grid-column: col-1 / col-12;
        grid-column: 3 / -3;
        grid-row: 1 / -1;
    }

    .behind .media * {
        height: 100%;
    }

    .behind .media img {
        object-fit: cover;
    }

    .behind .text { 
        grid-column: col-1 / col-12;
        grid-column: 3 / -3;
        grid-row: 1 / -1;
        padding-top: var(--padding-element-y);
        padding-bottom: var(--padding-element-y);
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width: var(--max-width-text);
        justify-self: left;
    }

    .fullwidth.behind .media {
        grid-column: full / full;
        grid-column: 1 / -1;
    }

}

/* textmedia-beside */
@media all {    

    [class*="beside-"] .item {
        max-width: var(--max-width-text);
    }

    .beside-left .media ,
    .beside-center-left .media {
        grid-column: col-1 / col-5;/* fixed definition */
        grid-column: 3 / calc(2 + (var(--def-cols-media) * 2)); /* variable definition */
        grid-row: 1 / -1;
    }

    .beside-left .text ,
    .beside-center-left .text {
        grid-column: col-6 / col-12;/* fixed definition */
        grid-column: calc(3 + (var(--def-cols-media) * 2)) / -3; /* variable definition */
        grid-row: 1 / -1;
        justify-self: left;
    }

    .beside-right .media ,
    .beside-center-right .media {
        grid-column: col-8 / col-12; /* fixed definition */
        grid-column: calc((var(--page-grid-columns) * 2 + 3) - (var(--def-cols-media) * 2)) / -3; /* variable definition */
        grid-row: 1 / -1;
    }

    .beside-right .text ,
    .beside-center-right .text {
        grid-column: col-1 / col-7;/* fixed definition */
        grid-column: 3 / calc((var(--page-grid-columns) * 2 + 2) - (var(--def-cols-media) * 2)); /* variable definition */
        grid-row: 1 / -1;
        justify-self: right;
    }

    [class*="beside-center-"] .item {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .fullwidth[class*="beside-"] .media ,
    .fullwidth[class*="beside-"] .media * {
        display: grid;
    }

    .fullwidth[class*="beside-"] .media img {
        object-fit: cover;
        height: 100%;
    }

    .fullwidth[class*="beside-"] .text {
        /*! margin-top: var(--gap-page-y); */
        /*! margin-bottom: var(--gap-page-y); */
    }

    .fullwidth.beside-left .media ,
    .fullwidth.beside-center-left .media {
        grid-column-start: full;
        grid-column-start: 1;
    }

    .fullwidth.beside-right .media ,
    .fullwidth.beside-center-right .media {
        grid-column-end: full;
        grid-column-end: -1;
    }

}

/* textmedia-inside */
@media all {    
    
    [class*="inside-"] .item {
        max-width: var(--max-width-text);
    } 
    
    .inside-left .item {
        justify-self: left;
    }
    .inside-right .item {
        justify-self: right;
    }

    [class*="inside-"] .media {
        --val-float-media-width: calc(var(--val-width-col) * var(--def-cols-media) + var(--gap-page-x) * (var(--def-cols-media) - 1));
        max-width: var(--val-float-media-width); /* variable definition */
        margin-bottom: var(--gap-media-text);
    }

    .inside-left .media {
        float: left;
        margin-right: calc(var(--gap-page-x) + var(--padding-element-x-left));
    }

    .inside-right .media {
        float: right;
        margin-left: calc(var(--gap-page-x) + var(--padding-element-x-left));
    }

    .fullwidth[class*="inside-"] .media {
        max-width: calc(var(--val-width-page-diff-left) + var(--val-float-media-width));
    }    

    .fullwidth[class*="inside-"] .media + .header ,
    .fullwidth[class*="inside-"] .media + .bodytext {
        /*! margin-top: var(--gap-page-y); */
    }    

    .fullwidth.inside-left .media {
        margin-left: calc(var(--val-width-page-diff-left) * -1);
    }
    
    .fullwidth.inside-right .media {
        margin-right: calc(var(--val-width-page-diff-right) * -1);
    }

    .container [class*="inside-"] .media {
        margin-left: 0;
        margin-right: 0;
    }

}