.hwtb-image-host { position: relative; }
.hwtb-screenshot-frame { display: block; flex: 0 0 auto; width: calc(300px * var(--hwtb-image-ratio, .6667)); height: 300px; border-radius: 8px; overflow: hidden; }
.screenshots .hwtb-screenshot-frame img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
@media (max-width: 768px) { .hwtb-screenshot-frame { width: calc(200px * var(--hwtb-image-ratio, .6667)); height: 200px; } }
img[data-hwtb-src], .hwtb-deferred-image { opacity: 0; transition: opacity .18s ease; }
.hwtb-deferred-image[data-hwtb-loaded="true"] { opacity: 1; }
.hwtb-image-indicator { display: none; }
.hwtb-image-pending > .hwtb-image-indicator,
.hwtb-image-error > .hwtb-image-indicator {
    display: block; position: absolute; width: 18px; height: 18px;
    box-sizing: border-box; top: 50%; left: 50%; margin: -9px 0 0 -9px;
    border: 2px solid rgba(128,128,128,.22); border-top-color: #4385d3;
    border-radius: 50%; animation: hwtb-image-spin .85s linear infinite;
    z-index: 1;
}
.hwtb-image-pending { background-color: rgba(128,128,128,.06); }
.hwtb-image-error > .hwtb-image-indicator {
    animation: none; border-color: #8a939e; border-right-color: transparent;
    cursor: pointer;
}
.hwtb-image-error > .hwtb-image-indicator:focus-visible { outline: 2px solid #4385d3; outline-offset: 5px; }
@keyframes hwtb-image-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .hwtb-deferred-image { transition: none; }
    .hwtb-image-indicator { animation: none; }
}