/**
 * @file
 * Styles for Sunrise CKEditor media size classes.
 */

/* Thumbnail 180x180 media size */
.media-size-180x180,
.media-size-180x180 .field__item,
.media-size-180x180 img,
.media-size-180x180 picture,
.media-size-180x180 video {
  max-width: 180px;
  max-height: 180px;
  width: 180px;
  height: 180px;
  object-fit: cover;
}

/* Small 300px media size */
.media-size-300px,
.media-size-300px .field__item,
.media-size-300px img,
.media-size-300px picture,
.media-size-300px video {
  max-width: 300px;
  width: 100%;
  height: auto;
}

/* Medium 600px media size */
.media-size-600px,
.media-size-600px .field__item,
.media-size-600px img,
.media-size-600px picture,
.media-size-600px video {
  max-width: 600px;
  width: 100%;
  height: auto;
}

/* Large 900px media size */
.media-size-900px,
.media-size-900px .field__item,
.media-size-900px img,
.media-size-900px picture,
.media-size-900px video {
  max-width: 900px;
  width: 100%;
  height: auto;
}

/* Full width media size */
.media-size-full-width,
.media-size-full-width .field__item,
.media-size-full-width img,
.media-size-full-width picture,
.media-size-full-width video {
  max-width: 100%;
  width: 100%;
  height: auto;
}

/* Ensure media wrapper respects size constraints */
[class*="media-size-"] {
  display: block;
  margin: 1em 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  /* На мобільних пристроях 180x180 займає всю ширину, висота авто */
  .media-size-180x180,
  .media-size-180x180 .field__item,
  .media-size-180x180 img,
  .media-size-180x180 picture,
  .media-size-180x180 video {
    max-width: 100%;
    width: 100%;
    max-height: none;
    height: auto;
  }
  
  .media-size-300px,
  .media-size-300px .field__item,
  .media-size-300px img,
  .media-size-300px picture,
  .media-size-300px video {
    max-width: 100%;
  }
  
  .media-size-600px,
  .media-size-600px .field__item,
  .media-size-600px img,
  .media-size-600px picture,
  .media-size-600px video {
    max-width: 100%;
  }
  
  .media-size-900px,
  .media-size-900px .field__item,
  .media-size-900px img,
  .media-size-900px picture,
  .media-size-900px video {
    max-width: 100%;
  }
}