.image-loading-container {
position: relative;
overflow: hidden;
border-radius: 12px;
background: #1a1a1a;
width: 100%;
height: auto;
}

.image-skeleton {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 12px;
z-index: 1;
}

.image-loading-container img {
position: relative;
z-index: 2;
opacity: 0;
transition: opacity 0.3s ease;
width: 100%;
height: auto;
display: block;
border-radius: 12px;
object-fit: contain;
}

.image-loading-container.loaded img {
opacity: 1;
}

.image-loading-container.loaded .image-skeleton {
opacity: 0;
}

@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}

.media-preview .image-loading-container {
height: 200px;
}

.post-media .image-loading-container {
width: 100%;
height: auto;
}

.media-previews {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 8px;
}

.media-preview {
position: relative;
overflow: hidden;
border-radius: 8px;
}

.media-preview .image-skeleton {
border-radius: 8px;
}

.media-preview img {
border-radius: 8px;
object-fit: contain;
width: 100%;
height: 100%;
}