/* ********** images styles ********** */
/*
we put this general initial max-width: 100%; here so that apply it on all images in the site (pages, posts, ...) to ensure no image will be wider that its div container,
to ensure no image will cause horizental overflow & scrollbar on a page.

then in other css files (which are loaded after this images.css file), for each image, we assign two exact widths (one width for mobile screens & another width for medium to xxl, then maximum widths will be control using below max-width: 100%;
*/

img {
  max-width: 100%;
  height: auto;
  max-height: 100%;
}

/* instead of .img-fluid class
مهم : به دلیل وجود کد بالا،
اصلا نوشتن و استفاده کردن از این دو کلاس
.max-h-w-100, .max-w-h-100
نیازی نیست
.max-h-w-100, .max-w-h-100 {
  max-width: 100%;
  max-height: 100%;
}
*/

/* ************************************************************************** */
/*
برای تصاویر مربوط به داخل هر یک از مقالات
از کلاس های زیر استفاده نمی کنیم
بلکه آن تصاویر را فقط توسط یک رول که در فایل
styles-posts.css
نوشته ایم مدیریت میکنیم:
@media (min-width: 768px) {
  .post-content-image-container img {
    max-width: 600px;
    height: auto;
  }
}

بنابراین کلاس های زیر را فقط برای برخی تصاویر خاص
که در برخی برگه ها وجود دارند استفاده خواهیم کرد
*/

/*
in small screens such as mobile, we usually need images (some pages)(not posts) be 100% width, because if get smaller it will be too small
so usually we dont need widths smaller than 80%
*/
/* images in mobile موبایل */
  @media (max-width: 767px) {
    .img-mob-w-80 {
     width:80% !important;
   }
  }

  @media (max-width: 767px) {
    .img-mob-w-90 {
     width:90% !important;
   }
  }

  @media (max-width: 767px) {
    .img-mob-w-100 {
     width:100% !important;
   }
  }

/* ************************************************************************** */
/* ********** images in md screen to xxl ********** */
/*
in md screen to xxl, we usually need to decrease the width of some wide images
so that they be not fill width which is undesirable. so we need below classes:
*/

@media (min-width: 768px) {
  .img-md-w-30 {
    width:30% !important;
  }
}

@media (min-width: 768px) {
  .img-md-w-40 {
    width:40% !important;
  }
}

@media (min-width: 768px) {
  .img-md-w-50 {
    width:50% !important;
  }
}

@media (min-width: 768px) {
  .img-md-w-60 {
    width:60% !important;
  }
}

@media (min-width: 768px) {
  .img-md-w-70 {
    width:70% !important;
  }
}

@media (min-width: 768px) {
  .img-md-w-80 {
    width:80% !important;
  }
}

@media (min-width: 768px) {
  .img-md-w-90 {
    width:90% !important;
  }
}