/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* IMAGES */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ 

.images-container,
.iso-container           { height: 100%; }

section.iso-container { position: relative; }
section.iso-container .images-container  { margin: 0 20px; max-width: 2560px; }
section.iso-container .images-canvas     { margin: 0 -20px; }

section.iso-container article               { margin: 0; }
section.iso-container article:before        { content: ""; display: block; padding-top: 80%; width: 20px;  }
section.iso-container .has_three_column article.w--2,
section.iso-container .has_three_column article.w2--h1,
section.iso-container .has_three_column article.w2--h2        { width: 66.66%; }
section.iso-container article.w--2::before,
section.iso-container article.w2--h1:before { padding-top: 40%; }
section.iso-container article.w--1.h--2:before { padding-top: 160%; }

section.iso-container article .video-content video { object-fit: cover; width: 100%; height: 100%; }

section.iso-container .has_two_column article { width: 50%; }
section.iso-container .has_three_column article { width: 33.33%; }
section.iso-container .has_four_column article { width: 25%; }

section.iso-container .has_two_column article.w2--h2  { width: 100%; }
section.iso-container .has_three_column article.w2--h2  { width: 66.66%; }
section.iso-container .has_four_column article.w2--h2,
section.iso-container .has_four_column article.w--2  { width: 50%; }

/* section.iso-container article figure        { position: absolute; left: 10px; right: 10px; top: 0; bottom: 20px; overflow: hidden; }
section.iso-container article figure:after  { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
section.iso-container article figure img,
section.iso-container article figure video  { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } */

section.iso-container article figure         { position: absolute; left: var(--masonry-grid-gap); right: var(--masonry-grid-gap); top: var(--masonry-grid-gap); bottom: 0px; overflow: hidden; }
section.iso-container.posts-grid article figure { position: absolute; left: 20px; right: 20px; top: 0; bottom: 80px; overflow: hidden; }
section.iso-container article figure:after   { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: var(--image-hover-color); opacity: 0; pointer-events: none; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition:all 0.3s ease; }
section.iso-container article figure img,
section.iso-container article figure video   { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transform: scale(1.03); transition: transform .4s cubic-bezier(.61,1,.88,1); will-change: transform; }

section.iso-container article figure.vertical-top img { object-position: 0 0; }
section.iso-container article figure.vertical-bottom img { object-position: 0 100%; }

section.iso-container article.hoverd:hover figure:after {opacity: 1; }
section.iso-container article.hoverd:hover figure img { transform: scale(1.01) translateZ(0); }

section.iso-container article figure figcaption { opacity: 0; transform: translateY(17px) rotate(7deg); transition: transform .4s cubic-bezier(.35,.18,.07,1.04),opacity .3s ease-out; }
section.iso-container article.hoverd:hover figure figcaption { position: absolute; top: 50%; width: 100%; text-align: center; font-size: 1.25rem; color: var(--image-hover-txt-col); opacity: 1; transform: translateY(0) rotate(0); will-change: transform; z-index: 1; }

section.iso-container article .post-caption                            { position: absolute; left: 0; bottom: 20px; right: 0; display: flex; padding: 0.8rem 20px 0 20px; height: 63px; }
section.iso-container article .post-caption .cap-nr                 { width: 50px; height: 100%; }
section.iso-container article .post-caption .cap-nr img             { width: 40px; height: auto; }
section.iso-container article .post-caption .hb_cap_wrapp              { flex-grow: 1; padding-top: 7px; }
section.iso-container article .post-caption .hb_cap_wrapp .cap-cat  { font-size: 0.75rem; line-height: 100%; }

section.iso-container .cap-cat,
section.iso-container .cap-title          { padding-left: 10px; }

section.iso-container .cap-title          { font-weight: 700; }

section.iso-container .cap-cat a::after,
section.iso-container .cap-cat span::after { content: " // "; color: var(--para); }
section.iso-container .cap-cat a:last-child:after,
section.iso-container .cap-cat span:last-child:after { content: ""; }

section.iso-container .cap-is-style-apartment    { background: url(/wp-content/themes/heimatbuero/blocks/masonry/assets/style-apartment.svg) no-repeat; background-size: 44px; background-position: top center; }
section.iso-container .cap-is-feinerdesigner     { background: url(/wp-content/themes/heimatbuero/blocks/masonry/assets/feinerdesigner.svg) no-repeat; background-size: 44px; background-position: top center; }
section.iso-container .cap-is-heimatbuero        { background: url(/wp-content/themes/heimatbuero/blocks/masonry/assets/heimatbuero.svg) no-repeat; background-size: 44px; background-position: top center; }

/*//////////////////////////////////////////////////////////////////// 
//  Lightbox
////////////////////////////////////////////////////////////////////*/

.sl-wrapper .sl-close                           { height: 60px; width: 60px; line-height: 60px; right: 50px; top: 50px; margin-top: 0; margin-right: 0; border: var(--image-hover-txt-col) 2px solid; border-radius: 100%; color: var(--image-hover-txt-col); }
.sl-close, .sl-prev, .sl-next                   { font-size: 4rem; }
.lightbox-caption                               { text-align: center; background: rgba(0, 0, 0, 0.3)!important; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }

/*//////////////////////////////////////////////////////////////////// 
//  Media Queries
////////////////////////////////////////////////////////////////////*/

@media only screen and (min-width: 767px) and (max-width: 1023px) {

    section.iso-container article                { width:50%; }
    section.iso-container article.w--1,
    section.iso-container article.w--2,
    section.iso-container article.w2--h1           { width:50%; }
    section.iso-container article.w2--h1:before    { padding-top: 80%; }

}

@media only screen and (min-width: 300px) and (max-width: 480px)  {

    section.iso-container article                { width:100%!important; }
    section.iso-container article.w--2,
    section.iso-container article.w2--h1           { width:100%!important; }
    section.iso-container article.w--2::before,
    section.iso-container article.w2--h1::before    { padding-top: 80%!important; }

    .sl-wrapper .sl-close { height: 40px; width: 40px; line-height: 40px; right: 40px; top: 20px; }

}


/* Placeholder styling */
.hb-masonry-img.placeholder{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;opacity:.4;outline:1px dashed currentColor;outline-offset:-4px}