.piece.content .item{display:flex;flex-direction:column}
.piece.content .items .item .kta{text-align:center;align-items:center}
.piece.content .items .item .kta *{text-align:inherit}

.piece.content .media .widget>div{width: 100% !important;height: inherit !important;aspect-ratio: 16/9}
.piece.content .media iframe{width: 100%;height: inherit !important;aspect-ratio: 16/9}
.piece.content .media .image a{position:relative;display:block}
.piece.content .media{position:relative}

.piece.content .kta .title{font-size:6em;font-weight: bolder;margin-bottom:0.3em}
.piece.content .kta .datetime{font-size: 1.4em}

.z33 .piece.content .kta{display:flex;flex-direction:column;gap:1.7em;background-color:var(--background-seventh-color);padding:calc(var(--margin-spacer) / 2);box-sizing: border-box}
.z33 .piece.content .item{gap:unset}

.z50 .piece.content .item.nomedia .kta,
.z100 .piece.content .kta{order:1;display:flex;flex-direction:column;gap:1.7em;margin:0 auto;max-width:90%}
.z50 .piece.content .item.nomedia .kta .kicker,
.z100 .piece.content .kta .kicker{order:1;font-size:2.5em;color:var(--body-font-color);text-transform:unset;font-weight:400}
.z50 .piece.content .item.nomedia .kta .title,
.z100 .piece.content .kta .title{order:2;font-size:4.5em;font-weight: bolder;margin-bottom:0.3em}
.z50 .piece.content .item.nomedia .kta .ds,
.z100 .piece.content .kta .ds{order:3;widths:100%;gap: inherit;display: flex;flex-direction: column;}
.z50 .piece.content .item.nomedia .kta .ds .datetime,
.z100 .piece.content .kta .ds .datetime{font-size:2em}
.z50 .piece.content .item.nomedia .kta .ds .summary,
.z100 .piece.content .kta .ds .summary{letter-spacing:normal;font-size:2em;display: inline-block;max-width: 768px;}
.z50 .piece.content .item.nomedia .kta .button,
.z100 .piece.content .kta .button{order:4;margin:1em 0;max-width: fit-content}
.z50 .piece.content .item.nomedia .media,
.z100 .piece.content .media{order:2}

/* Alineacion del texto */
.piece.content.textr .items .item .kta{text-align:right;align-items:flex-end;}
.piece.content.textl .items .item .kta{text-align:left;align-items:flex-start}


/* Foto a Derecha */
.piece.content.r40 .items{display: flex;flex-direction: column}
.piece.content.r40 .items .item{padding:0 15px;flex-direction: row;width: 100%;align-items: center;gap: calc(var(--margin-spacer) / 1.5);transforms:skew(-5deg, 0deg)}
.piece.content.r40 .items .item .media{width: calc(45% - calc(var(--margin-spacer) / 4));margin: 0;order: 2}
.piece.content.r40 .items .item .kta{width: calc(55% - calc(var(--margin-spacer) / 4));order: 1;display: block;}
.piece.content.r40 .items .item .kta .title{font-size: 1.9em}
.piece.content.r40 .items .item .kta .summary{font-size: 1.9em}
.z100 .piece.content.r40 .items .item .kta .kicker{font-size: 1.5em}
.z100 .piece.content.r40 .items .item .kta .title{font-size: 4.3em}
.z75 .piece.content.r40 .items .item .kta .title{font-size: 2.5em}
.z50 .piece.content.r40 .items .item .kta .title{font-size: 2.2em}
.zone .piece.content.r40 .items .item.nomedia{gap: 0}
.zone .piece.content.r40 .items .item.nomedia .kta{width: 100%}
.zone .piece.content.r40 .items .item img{border-radius: 5px}

/* Foto a Izquierda */
.piece.content.l40 .items{display: flex;flex-direction: column}
.piece.content.l40 .items .item{flex-direction:row;width:100%;align-items:center;gap: calc(var(--margin-spacer) / 1.5)}
.piece.content.l40 .items .item .media{width: calc(45% - calc(var(--margin-spacer) / 4));margin: 0;order: 1}
.piece.content.l40 .items .item .kta{width: calc(55% - calc(var(--margin-spacer) / 4));order: 2;display:flex;flex-direction:column;gap:calc(var(--margin-spacer) / 2)}
.piece.content.l40 .items .item .kta .title{font-size: 1.9em}
.piece.content.l40 .items .item .kta .summary{font-size: 1.8em}
.z100 .piece.content.l40 .items .item .kta .kicker{font-size: 2em}
.z100 .piece.content.l40 .items .item .kta .title{font-size: 4em}
.z75 .piece.content.l40 .items .item .kta .title{font-size: 2.5em}
.z50 .piece.content.l40 .items .item .kta .title{font-size: 2.2em}
.zone .piece.content.l40 .items .item.nomedia{gap: 0}
.zone .piece.content.l40 .items .item.nomedia .kta{width: 100%}
.zone .piece.content.l40 .items .item img{border-radius: 5px}


.piece.content .withwidget .media .image.widget:before{display: none}
.piece.content .withwidget .media .image.widget:after{display: none}

.piece.content .media .image video{width:100%;height:auto}
.piece.content.f16asr9 .media .image{aspect-ratio:16/9;overflow: hidden}
.piece.content.f4asr3 .media .image{aspect-ratio:4/3;overflow: hidden}


/* Formato de Imagen Flotando derecha */
.piece.imgfloatright{background: none;padding: 0;}
.piece.imgfloatright:before{content: "";position: absolute;top: 0;right: 30%;bottom: 0;left: 0;background-color: transparent;z-index: 0;}
.piece.imgfloatright .items .item{position: relative;flex-direction: row;width: 100%;max-width: 100%;align-items:center}
.piece.imgfloatright.padding .items .item{padding: 10em 0;}
.piece.imgfloatright .items .item .media{width: calc(45% - (var(--margin-spacer) / 4));z-index: 1;flex-shrink: 0;}
.piece.imgfloatright .items .item .kta{z-index: 1;}
.piece.imgfloatright.bgmaincolor:before{background-color: var(--background-main-color);}
.piece.imgfloatright.bgsecondcolor:before{background-color: var(--background-second-color);}
.piece.imgfloatright.bgthirdcolor:before{background-color: var(--background-third-color);}
.piece.imgfloatright.bgfourthcolor:before{background-color: var(--background-fourth-color);}
.piece.imgfloatright.bgfifthcolor:before{background-color: var(--background-fifth-color);}
.piece.imgfloatright.bgsixthcolor:before{background-color: var(--background-sixth-color);}
.piece.imgfloatright.bgseventhcolor:before{background-color: var(--background-seventh-color);}
.piece.imgfloatright.bgbluecolor:before{background-color: var(--background-blue-color);}
/* Formato de Imagen Flotando derecha - Grilla */
.piece.imgfloatright.grid:before{display: none;}
.piece.imgfloatright.grid .items .item:not(.withinterlayer){padding: 3em 0 3em 3em;margin:calc(var(--margin-spacer) * 2) 0}
.piece.imgfloatright.grid .items .item:not(.withinterlayer):before{content: "";position: absolute;top: 0;right: 30%;bottom: 0;left: 0;background-color: transparent;z-index: 0;}
.piece.imgfloatright.grid .items .item .kta .kicker{font-size:1.8em;color:inherit}
.piece.imgfloatright.grid .items .item .kta .title{font-size:2.8em;margin:0}
.piece.imgfloatright.grid .items .item .kta .datetime{font-size:1.4em}
.piece.imgfloatright.grid .items .item .kta .summary{font-size:1.8em}
.piece.imgfloatright.grid.bgmaincolor .items .item:not(.withinterlayer):before{background-color: var(--background-main-color);}
.piece.imgfloatright.grid.bgsecondcolor .items .item:not(.withinterlayer):before{background-color: var(--background-second-color);}
.piece.imgfloatright.grid.bgthirdcolor .items .item:not(.withinterlayer):before{background-color: var(--background-third-color);}
.piece.imgfloatright.grid.bgfourthcolor .items .item:not(.withinterlayer):before{background-color: var(--background-fourth-color);}
.piece.imgfloatright.grid.bgfifthcolor .items .item:not(.withinterlayer):before{background-color: var(--background-fifth-color);}
.piece.imgfloatright.grid.bgsixthcolor .items .item:not(.withinterlayer):before{background-color: var(--background-sixth-color);}
.piece.imgfloatright.grid.bgseventhcolor .items .item:not(.withinterlayer):before{background-color: var(--background-seventh-color);}
.piece.imgfloatright.grid.bgbluecolor .items .item:not(.withinterlayer):before{background-color: var(--background-blue-color);}

/* Formato de Imagen Flotando izquierda */
.piece.imgfloatleft{background: none;padding: 0;}
.piece.imgfloatleft:before{content: "";position: absolute;top: 0;left: 30%;bottom: 0;right: 0;background-color: transparent;z-index: 0;}
.piece.imgfloatleft .items .item{position: relative;flex-direction: row;width: 100%;max-width: 100%;align-items:center}
.piece.imgfloatleft.padding .items .item{padding: 10em 0;}
.piece.imgfloatleft .items .item .media{width: calc(45% - (var(--margin-spacer) / 4));z-index: 1;order:1;flex-shrink: 0;}
.piece.imgfloatleft .items .item .kta{z-index: 1;order:2}
.piece.imgfloatleft.bgmaincolor:before{background-color: var(--background-main-color);}
.piece.imgfloatleft.bgsecondcolor:before{background-color: var(--background-second-color);}
.piece.imgfloatleft.bgthirdcolor:before{background-color: var(--background-third-color);}
.piece.imgfloatleft.bgfourthcolor:before{background-color: var(--background-fourth-color);}
.piece.imgfloatleft.bgfifthcolor:before{background-color: var(--background-fifth-color);}
.piece.imgfloatleft.bgsixthcolor:before{background-color: var(--background-sixth-color);}
.piece.imgfloatleft.bgseventhcolor:before{background-color: var(--background-seventh-color);}
.piece.imgfloatleft.bgbluecolor:before{background-color: var(--background-blue-color);}
/* Formato de Imagen Flotando izquierda - Grilla */
.piece.imgfloatleft.grid:before{display: none;}
.piece.imgfloatleft.grid .items .item:not(.withinterlayer){padding: 3em 3em 3em 0;margin: calc(var(--margin-spacer) * 2) 0}
.piece.imgfloatleft.grid .items .item:not(.withinterlayer):before{content: "";position: absolute;top: 0;left: 30%;bottom: 0;right: 0;background-color: transparent;z-index: 0;}
.piece.imgfloatleft.grid .items .item .kta .kicker{font-size:1.8em;color:inherit}
.piece.imgfloatleft.grid .items .item .kta .title{font-size:2.8em;margin:0}
.piece.imgfloatleft.grid .items .item .kta .datetime{font-size:1.4em}
.piece.imgfloatleft.grid .items .item .kta .summary{font-size:1.8em}
.piece.imgfloatleft.grid.bgmaincolor .items .item:not(.withinterlayer):before{background-color: var(--background-main-color);}
.piece.imgfloatleft.grid.bgsecondcolor .items .item:not(.withinterlayer):before{background-color: var(--background-second-color);}
.piece.imgfloatleft.grid.bgthirdcolor .items .item:not(.withinterlayer):before{background-color: var(--background-third-color);}
.piece.imgfloatleft.grid.bgfourthcolor .items .item:not(.withinterlayer):before{background-color: var(--background-fourth-color);}
.piece.imgfloatleft.grid.bgfifthcolor .items .item:not(.withinterlayer):before{background-color: var(--background-fifth-color);}
.piece.imgfloatleft.grid.bgsixthcolor .items .item:not(.withinterlayer):before{background-color: var(--background-sixth-color);}
.piece.imgfloatleft.grid.bgseventhcolor .items .item:not(.withinterlayer):before{background-color: var(--background-seventh-color);}
.piece.imgfloatleft.grid.bgbluecolor .items .item:not(.withinterlayer):before{background-color: var(--background-blue-color);}

.piece.content .item .media img {
    overflow-clip-margin: content-box;
    overflow: clip;
}

.piece.content .item .media .image {
    view-timeline-name: --revealing-image;
    view-timeline-axis: block;
    animation: linear reveal both;
    animation-timeline: --revealing-image;
    animation-range: entry 25% cover 50%;
}

@keyframes reveal {
    0% {
        opacity: 0;
        clip-path: inset(45% 20% 45% 20%);
    }
    
    100% {
        opacity: 1;
        clip-path: inset(0% 0% 0% 0%);
    }
}
/*
.piece.content .items .item{
    overflow-clip-margin: content-box;
    overflow: clip;
}

.piece.content .items {
    view-timeline-name: --revealing-image;
    view-timeline-axis: block;
    animation: linear reveal both;
    animation-timeline: --revealing-image;
    animation-range: entry 25% cover 50%;
}

@keyframes reveal {
    0% {
        opacity: 0;
        clip-path: inset(80% 30% 80% 30%);
    }
    
    100% {
        opacity: 1;
        clip-path: inset(0% 0% 0% 0%);
    }
}
*/



@media (max-width: 1024px){
    .piece.grid.threecol .items{grid-template-columns:  100%}
    .z100 .piece.content.r40 .items .item .kta .title,
    .z100 .piece.content.l40 .items .item .kta .title{font-size: calc((((100vw - 768px) / (1024 - 768)) * (32 - 22)) + 22px)}

}

@media (max-width: 768px){
    .z100 .piece.content .items .item .kta .title{font-size: calc((((100vw - 320px) / (768 - 320)) * (32 - 25)) + 25px)}
    .z75 .piece.content .items .item .kta .title{font-size: calc((((100vw - 320px) / (768 - 320)) * (28 - 22)) + 22px)}
    .z25 .piece.content .items .item .kta .title{font-size: 2em}
    
    .piece.content.r40 .items .item .kta .title,
    .piece.content.l40 .items .item .kta .title{font-size: 2em}

    .zone .piece.content.r40 .items .item,
    .zone .piece.content.l40 .items .item{flex-wrap: wrap}
    .zone .piece.content.r40 .items .item .media,
    .zone .piece.content.l40 .items .item .media{width: 100%}
    .zone .piece.content.r40 .items .item .kta,
    .zone .piece.content.l40 .items .item .kta{width: 100%}
    .z100 .piece.content.r40 .items .item .kta .title,
    .z100 .piece.content.l40 .items .item .kta .title{font-size: 2.8em}

    .piece.imgfloatleft:before{left: 5%;right: 5%}
    .piece.imgfloatleft .items .item .media{width:100%}
    .piece.imgfloatleft .items .item{flex-direction:column;gap:var(--margin-spacer)}
}