.screenshot-stack {
    container-type: inline-size;
    position: relative;
    isolation: isolate;
    width: 100%;
    aspect-ratio: 5 / 4;
    /* Reserve space for the frame bars and rotated corners at small sizes. */
    padding-bottom: 40px;
    box-sizing: content-box;
}

.screenshot-card {
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    border: 2px solid #fff;
    border-radius: clamp(4px, 1cqw, 9px);
    background: #fff;
    box-shadow: 0 8px 24px rgb(24 36 67 / 14%), 0 2px 6px rgb(24 36 67 / 8%);
    transform: rotate(var(--screenshot-rotation, 0deg));
    transform-origin: center;
}

/* Percentage positions keep the same composition as the figure changes size. */
.screenshot-card:nth-child(1) {
    top: 4%;
    left: 8%;
    width: 88%;
    z-index: 1;
}

.screenshot-card:nth-child(2) {
    top: 32%;
    left: 3%;
    width: 76%;
    z-index: 2;
}

.screenshot-card:nth-child(3) {
    top: 59%;
    right: 4%;
    width: 62%;
    z-index: 3;
}

.screenshot-card-bar {
    display: flex;
    align-items: center;
    gap: clamp(2px, .6cqw, 5px);
    height: clamp(12px, 3cqw, 24px);
    padding-inline: clamp(5px, 1.4cqw, 12px);
    border-bottom: 1px solid #e6eaf0;
    background: #f8fafc;
}

.screenshot-card-bar i {
    width: clamp(3px, .7cqw, 6px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #bbc4d1;
}

.screenshot-card img {
    display: block;
    width: 100%;
    height: auto;
}

/* Use spare height beside longer case study copy, without shrinking the stack. */
@media (min-width: 992px) {
    .project-feature-figure:has(> .screenshot-stack) {
        align-self: stretch;
        display: grid;
        container-type: inline-size;
    }

    .project-feature-figure>.screenshot-stack {
        aspect-ratio: auto;
        /* min-height: calc(80cqw + 40px); */
        height: 100%;
        max-height: 120cqw;
        align-self: center;
        padding-bottom: 0;
        box-sizing: border-box;
    }

    .project-feature-figure>.screenshot-stack .screenshot-card:nth-child(2) {
        top: 50%;
        transform: translateY(-50%) rotate(var(--screenshot-rotation, 0deg));
    }

    .project-feature-figure>.screenshot-stack .screenshot-card:nth-child(3) {
        top: auto;
        bottom: 4%;
    }
}