.almas-single-image,
.almas-double-image,
.almas-image-item,
.almas-single-video,
.almas-double-video,
.almas-video-item {
    display: flex;
    flex-direction: column;
    border-radius: var(--almas-radius-image, 12px);
    background: var(--almas-glass-surface);
    backdrop-filter: blur(var(--almas-glass-blur));
    -webkit-backdrop-filter: blur(var(--almas-glass-blur));
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    box-sizing: border-box;
    contain: paint;
}

@media (hover: hover) {
    .almas-single-image:hover,
    .almas-double-image:hover,
    .almas-image-item:hover,
    .almas-single-video:hover,
    .almas-double-video:hover,
    .almas-video-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    }
}

body.dark-mode .almas-single-image,
body.dark-mode .almas-double-image,
body.dark-mode .almas-image-item,
body.dark-mode .almas-single-video,
body.dark-mode .almas-double-video,
body.dark-mode .almas-video-item {
    background: var(--almas-glass-surface);
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
    .almas-image-container .almas-image-header,
    .almas-video-container .almas-video-header,
    .almas-audio-container .almas-audio-header {
        font-size: 14px;
        padding: 6px 16px;
    }

    .almas-image-container .almas-image-grid,
    .almas-video-container .almas-video-row {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .almas-image-container .almas-single-image,
    .almas-image-container .almas-double-image,
    .almas-image-container .almas-image-item,
    .almas-video-container .almas-single-video,
    .almas-video-container .almas-double-video,
    .almas-video-container .almas-video-item {
        flex: 0 1 100%;
        max-width: 100%;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .almas-single-image,
    .almas-double-image,
    .almas-image-item,
    .almas-single-video,
    .almas-double-video,
    .almas-video-item {
        transition: none;
    }

    .almas-spinner,
    .almas-spinner-path {
        animation: none;
    }
}