.arcik-image-collage {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1158 / 1244;
    container-type: inline-size;
    background-color: var(--arcik-collage-background, #f7f6f6);
}

.arcik-image-collage--lines::before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 46%;
    height: 34%;
    content: "";
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 533 423' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%232d2a27' stroke-opacity='.07' stroke-width='2'%3E%3Cpath d='M-24 3C134 127 388 212 524 426'/%3E%3Cpath d='M-26 66C142 171 340 235 450 426'/%3E%3Cpath d='M-25 134C111 198 281 272 370 426'/%3E%3Cpath d='M-22 219C87 256 202 321 273 426'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.arcik-image-collage--mirrored::before {
    right: 0;
    left: auto;
    transform: scaleX(-1);
}

.arcik-image-collage__image {
    position: absolute;
}

.arcik-image-collage__image--back {
    top: 4.9%;
    left: 7.6%;
    width: 57.2%;
    height: 75.1%;
}

.arcik-image-collage__image--front {
    z-index: 1;
    top: 20.4%;
    right: 5.5%;
    width: 41.2%;
    height: 72.7%;
    box-shadow: 0 0 0 4px var(--arcik-collage-frame, #fff);
    box-shadow: 0 0 0 clamp(2px, 0.85cqw, 10px) var(--arcik-collage-frame, #fff);
}

.arcik-image-collage--mirrored .arcik-image-collage__image--back {
    right: 7.6%;
    left: auto;
}

.arcik-image-collage--mirrored .arcik-image-collage__image--front {
    right: auto;
    left: 5.5%;
}

.arcik-image-collage .arcik-image-collage__image > img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
}

.arcik-image-collage--single {
    aspect-ratio: auto;
}

.arcik-image-collage--single .arcik-image-collage__image {
    position: relative;
    inset: auto;
    width: 85%;
    height: auto;
    margin: 5% auto;
}

.arcik-image-collage--single .arcik-image-collage__image > img {
    height: auto;
}

.arcik-image-collage-arched > img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 556 / 613;
    border-radius: 48% 14% 0 35% / 56% 9% 0 44%;
    object-fit: cover;
    object-position: center;
}