/* Frontend Styles for Two Images Block */
.wp-block-storeink-two-images {
  margin: 2rem 0;
}

.wp-block-storeink-two-images .two-images-container {
  display: flex;
  gap: 1.5rem;
}

/* SP (Mobile) - Stack vertically, aspect ratio 315/175 */
@media (max-width: 767px) {
  .wp-block-storeink-two-images .two-images-container {
    flex-direction: column;
  }
}

/* PC (Desktop) - Side by side, aspect ratio 600/335 */
@media (min-width: 768px) {
  .wp-block-storeink-two-images .two-images-container {
    flex-direction: row;
  }

  .wp-block-storeink-two-images .image-item {
    flex: 1;
  }
}

.wp-block-storeink-two-images .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #f5f5f5;
  border-radius: min(32px, 2vw);
}

.wp-block-storeink-two-images .image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wp-block-storeink-two-images .image-caption {
  font-size: clamp(0.875rem, 0.775rem + 0.5vw, 1.375rem) !important;
  color: #666;
  line-height: 1.6;
}

.wp-block-storeink-two-images .image-caption:empty {
  display: none;
}