/* ==================================================
    AUTO GRID SYSTEM

    Использование:
    1. Добавить класс .auto-grid контейнеру
    2. Добавить модификатор .auto-grid--X
      где X — количество элементов в ряду
    3. Никаких width / flex / calc не использовать

    Пример:
    <div class="auto-grid auto-grid--4">

    Поддержка:
    - CSS Grid (основной)
    - Flex fallback (через @supports)


    классы для вставки:
    auto-grid
    auto-grid--4
    auto-grid--3
    auto-grid--2
   ================================================== */



/* ==================================================
    AUTO GRID — CORE
   ================================================== */

/* .auto-grid */
.view-content,
.view-content .views-row .node .field--type-image.field__items,

.node .field--type-image.field__items {
  /* значения по умолчанию — на случай если забыли модификатор */
  --cols: 1;
  --gap: 20px;

  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--gap);
  column-gap: var(--column-gap);
  row-gap: var(--row-gap);
}

.view-content .views-row {
    width: 100%;
}
.view-content .views-row .node {width: 100%;}
.view-content .views-row .node .field--type-image {width: 100%;}
.view-content .views-row .node .field--type-image img,
.view-content .views-row img,
.node .field--type-image.field__items img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==================================================
    AUTO GRID — MODIFIERS
   ================================================== */

/* .auto-grid--4 / special-offers / services / doctors / diagnostics / popular-services */
/* views */
.view.view-special-offers.view-id-special_offers .view-content,
.view.view-services.view-id-services .view-content,
/* .view.view-photogallery.view-id-photogallery .view-content .views-row .node.node--type-photogallery.node--view-mode-teaser .field.field--name-field-photo-gallery-set.field--type-image.field--label-hidden.field__items, */
.view.view-doctors.view-id-doctors .view-content,
.view.view-diagnostics.view-id-diagnostics .view-content,
.view.view-taxonomy-term.view-id-taxonomy_term .view-content,
.view.view-popular-services.view-id-popular_services .view-content,
/* fields */
.view.view-about.view-id-about .view-content .views-row .node.node--type-about.node--view-mode-default .field.field--name-field-about-photo-set.field--type-image.field--label-hidden.field__items,
.node.node--type-services.node--view-mode-full .field.field--name-field-service-photo-set.field--type-image.field--label-hidden.field__items,
.node.node--type-doctors.node--view-mode-full .field.field--name-field-doctors-education-document.field--type-image.field--label-hidden.field__items {
    --cols: 4;
    /* --gap: 30px; */
    --column-gap: 30px;
    --row-gap: 30px;
}

/* .auto-grid--3 / photogallery */
.view.view-photogallery.view-id-photogallery .view-content .views-row .node.node--type-photogallery.node--view-mode-teaser .field.field--name-field-photo-gallery-set.field--type-image.field--label-hidden.field__items {
    --cols: 4;
    /* --gap: 30px; */
    --column-gap: 30px;
    --row-gap: 30px;
}

/* .auto-grid--2 / inner page - about / services / doctors / diagnostics / popular-services */
.view.view-about.view-id-about .view-content .views-row .node.node--type-about.node--view-mode-default .field.field--name-field-about-photo-set.field--type-image.field--label-hidden.field__items,
.node.node--type-services.node--view-mode-full .field.field--name-field-service-photo-set.field--type-image.field--label-hidden.field__items,
.node.node--type-doctors.node--view-mode-full .field.field--name-field-doctors-education-document.field--type-image.field--label-hidden.field__items,
.node.node--type-diagnostic-cards.node--view-mode-full .field.field--name-field-diagnostic-photo-set.field--type-image.field--label-hidden.field__items,
.node.node--type-popular-services-cards.node--view-mode-full .field.field--name-field-photo-serv-photo-set.field--type-image.field--label-hidden.field__items {
    --cols: 4;
    /* --gap: 30px; */
    --column-gap: 30px;
    --row-gap: 30px;
}


/* ==================================================
    AUTO GRID — RESPONSIVE
   ================================================== */

@media (max-width: 1199px) {
    /* .auto-grid--4 */
        .view.view-special-offers.view-id-special_offers .view-content,
        .view.view-services.view-id-services .view-content,
        /* .view.view-photogallery.view-id-photogallery .view-content .views-row .node.node--type-photogallery.node--view-mode-teaser .field.field--name-field-photo-gallery-set.field--type-image.field--label-hidden.field__items, */
        .view.view-doctors.view-id-doctors .view-content,
        .view.view-diagnostics.view-id-diagnostics .view-content,
        .view.view-taxonomy-term.view-id-taxonomy_term .view-content,
        .view.view-popular-services.view-id-popular_services .view-content
        
        /* .view.view-about.view-id-about .view-content .views-row .node.node--type-about.node--view-mode-default .field.field--name-field-about-photo-set.field--type-image.field--label-hidden.field__items, */
        /* .node.node--type-services.node--view-mode-full .field.field--name-field-service-photo-set.field--type-image.field--label-hidden.field__items, */
        /* .node.node--type-doctors.node--view-mode-full .field.field--name-field-doctors-education-document.field--type-image.field--label-hidden.field__items */
        {--cols: 4; --column-gap: 30px; --row-gap: 30px; }

    /* .auto-grid--3 */
        .view.view-photogallery.view-id-photogallery .view-content .views-row .node.node--type-photogallery.node--view-mode-teaser .field.field--name-field-photo-gallery-set.field--type-image.field--label-hidden.field__items
        {--cols: 4; --column-gap: 30px; --row-gap: 30px; }
        
    /* .auto-grid--2 */
        .view.view-about.view-id-about .view-content .views-row .node.node--type-about.node--view-mode-default .field.field--name-field-about-photo-set.field--type-image.field--label-hidden.field__items,
        .node.node--type-services.node--view-mode-full .field.field--name-field-service-photo-set.field--type-image.field--label-hidden.field__items,
        .node.node--type-doctors.node--view-mode-full .field.field--name-field-doctors-education-document.field--type-image.field--label-hidden.field__items,
        .node.node--type-diagnostic-cards.node--view-mode-full .field.field--name-field-diagnostic-photo-set.field--type-image.field--label-hidden.field__items,
        .node.node--type-popular-services-cards.node--view-mode-full .field.field--name-field-photo-serv-photo-set.field--type-image.field--label-hidden.field__items
        {--cols: 4; --column-gap: 25px; --row-gap: 25px; }
}

@media (max-width: 991px) {
    /* .auto-grid--4 */
        .view.view-special-offers.view-id-special_offers .view-content,
        .view.view-services.view-id-services .view-content,
        /* .view.view-photogallery.view-id-photogallery .view-content .views-row .node.node--type-photogallery.node--view-mode-teaser .field.field--name-field-photo-gallery-set.field--type-image.field--label-hidden.field__items, */
        .view.view-doctors.view-id-doctors .view-content,
        .view.view-diagnostics.view-id-diagnostics .view-content,
        .view.view-taxonomy-term.view-id-taxonomy_term .view-content,
        .view.view-popular-services.view-id-popular_services .view-content
        
        /* .view.view-about.view-id-about .view-content .views-row .node.node--type-about.node--view-mode-default .field.field--name-field-about-photo-set.field--type-image.field--label-hidden.field__items, */
        /* .node.node--type-services.node--view-mode-full .field.field--name-field-service-photo-set.field--type-image.field--label-hidden.field__items, */
        /* .node.node--type-doctors.node--view-mode-full .field.field--name-field-doctors-education-document.field--type-image.field--label-hidden.field__items  */
        {--cols: 2; --column-gap: 25px; --row-gap: 25px; }

    
    /* .auto-grid--3 */
        .view.view-photogallery.view-id-photogallery .view-content .views-row .node.node--type-photogallery.node--view-mode-teaser .field.field--name-field-photo-gallery-set.field--type-image.field--label-hidden.field__items
        {--cols: 2; --column-gap: 25px; --row-gap: 25px; }
        
    /* .auto-grid--2 */        
        .view.view-about.view-id-about .view-content .views-row .node.node--type-about.node--view-mode-default .field.field--name-field-about-photo-set.field--type-image.field--label-hidden.field__items,
        .node.node--type-services.node--view-mode-full .field.field--name-field-service-photo-set.field--type-image.field--label-hidden.field__items,
        .node.node--type-doctors.node--view-mode-full .field.field--name-field-doctors-education-document.field--type-image.field--label-hidden.field__items,
        .node.node--type-diagnostic-cards.node--view-mode-full .field.field--name-field-diagnostic-photo-set.field--type-image.field--label-hidden.field__items,
        .node.node--type-popular-services-cards.node--view-mode-full .field.field--name-field-photo-serv-photo-set.field--type-image.field--label-hidden.field__items
        {--cols: 4; --column-gap: 20px; --row-gap: 20px; }
}

@media (max-width: 767px) {
    /* .auto-grid--4 */
        .view.view-special-offers.view-id-special_offers .view-content,
        .view.view-services.view-id-services .view-content,
        /* .view.view-photogallery.view-id-photogallery .view-content .views-row .node.node--type-photogallery.node--view-mode-teaser .field.field--name-field-photo-gallery-set.field--type-image.field--label-hidden.field__items, */
        .view.view-doctors.view-id-doctors .view-content,
        .view.view-diagnostics.view-id-diagnostics .view-content,
        .view.view-taxonomy-term.view-id-taxonomy_term .view-content,
        .view.view-popular-services.view-id-popular_services .view-content
        
        /* .view.view-about.view-id-about .view-content .views-row .node.node--type-about.node--view-mode-default .field.field--name-field-about-photo-set.field--type-image.field--label-hidden.field__items, */
        /* .node.node--type-services.node--view-mode-full .field.field--name-field-service-photo-set.field--type-image.field--label-hidden.field__items, */
        /* .node.node--type-doctors.node--view-mode-full .field.field--name-field-doctors-education-document.field--type-image.field--label-hidden.field__items */
        {--cols: 2; --column-gap: 25px; --row-gap: 25px; }

    
    /* .auto-grid--3 */
        .view.view-photogallery.view-id-photogallery .view-content .views-row .node.node--type-photogallery.node--view-mode-teaser .field.field--name-field-photo-gallery-set.field--type-image.field--label-hidden.field__items
        {--cols: 2; --column-gap: 25px; --row-gap: 25px; }
        
    /* .auto-grid--2 */
        .view.view-about.view-id-about .view-content .views-row .node.node--type-about.node--view-mode-default .field.field--name-field-about-photo-set.field--type-image.field--label-hidden.field__items,
        .node.node--type-services.node--view-mode-full .field.field--name-field-service-photo-set.field--type-image.field--label-hidden.field__items,
        .node.node--type-doctors.node--view-mode-full .field.field--name-field-doctors-education-document.field--type-image.field--label-hidden.field__items,
        .node.node--type-diagnostic-cards.node--view-mode-full .field.field--name-field-diagnostic-photo-set.field--type-image.field--label-hidden.field__items,
        .node.node--type-popular-services-cards.node--view-mode-full .field.field--name-field-photo-serv-photo-set.field--type-image.field--label-hidden.field__items
        {--cols: 3; --column-gap: 15px; --row-gap: 15px; }
}

@media (max-width: 575px) {
    /* .auto-grid--4 */
        .view.view-special-offers.view-id-special_offers .view-content,
        .view.view-services.view-id-services .view-content,
        /* .view.view-photogallery.view-id-photogallery .view-content .views-row .node.node--type-photogallery.node--view-mode-teaser .field.field--name-field-photo-gallery-set.field--type-image.field--label-hidden.field__items, */
        .view.view-doctors.view-id-doctors .view-content,
        .view.view-diagnostics.view-id-diagnostics .view-content,
        .view.view-taxonomy-term.view-id-taxonomy_term .view-content,
        .view.view-popular-services.view-id-popular_services .view-content
        
        /* .view.view-about.view-id-about .view-content .views-row .node.node--type-about.node--view-mode-default .field.field--name-field-about-photo-set.field--type-image.field--label-hidden.field__items, */
        /* .node.node--type-services.node--view-mode-full .field.field--name-field-service-photo-set.field--type-image.field--label-hidden.field__items, */
        /* .node.node--type-doctors.node--view-mode-full .field.field--name-field-doctors-education-document.field--type-image.field--label-hidden.field__items */
        {--cols: 2; --column-gap: 20px; --row-gap: 20px; }

    
    /* .auto-grid--3 */
        .view.view-photogallery.view-id-photogallery .view-content .views-row .node.node--type-photogallery.node--view-mode-teaser .field.field--name-field-photo-gallery-set.field--type-image.field--label-hidden.field__items
        {--cols: 2; --column-gap: 20px; --row-gap: 20px; }
        
    /* .auto-grid--2 */
        .view.view-about.view-id-about .view-content .views-row .node.node--type-about.node--view-mode-default .field.field--name-field-about-photo-set.field--type-image.field--label-hidden.field__items,
        .node.node--type-services.node--view-mode-full .field.field--name-field-service-photo-set.field--type-image.field--label-hidden.field__items,
        .node.node--type-doctors.node--view-mode-full .field.field--name-field-doctors-education-document.field--type-image.field--label-hidden.field__items,
        .node.node--type-diagnostic-cards.node--view-mode-full .field.field--name-field-diagnostic-photo-set.field--type-image.field--label-hidden.field__items,
        .node.node--type-popular-services-cards.node--view-mode-full .field.field--name-field-photo-serv-photo-set.field--type-image.field--label-hidden.field__items
        {--cols: 3; --column-gap: 15px; --row-gap: 15px; }
}

@media (max-width: 460px) {
    /* .auto-grid--4 */
        .view.view-special-offers.view-id-special_offers .view-content,
        .view.view-services.view-id-services .view-content,
        /* .view.view-photogallery.view-id-photogallery .view-content .views-row .node.node--type-photogallery.node--view-mode-teaser .field.field--name-field-photo-gallery-set.field--type-image.field--label-hidden.field__items, */
        .view.view-doctors.view-id-doctors .view-content,
        .view.view-diagnostics.view-id-diagnostics .view-content,
        .view.view-taxonomy-term.view-id-taxonomy_term .view-content,
        .view.view-popular-services.view-id-popular_services .view-content
        
        /* .view.view-about.view-id-about .view-content .views-row .node.node--type-about.node--view-mode-default .field.field--name-field-about-photo-set.field--type-image.field--label-hidden.field__items, */
        /* .node.node--type-services.node--view-mode-full .field.field--name-field-service-photo-set.field--type-image.field--label-hidden.field__items, */
        /* .node.node--type-doctors.node--view-mode-full .field.field--name-field-doctors-education-document.field--type-image.field--label-hidden.field__items */
        {--cols: 1; --column-gap: 15px; --row-gap: 20px; }

    
    /* .auto-grid--3 */
        .view.view-photogallery.view-id-photogallery .view-content .views-row .node.node--type-photogallery.node--view-mode-teaser .field.field--name-field-photo-gallery-set.field--type-image.field--label-hidden.field__items
        {--cols: 2; --column-gap: 15px; --row-gap: 15px; }
        
    /* .auto-grid--2 */
        .view.view-about.view-id-about .view-content .views-row .node.node--type-about.node--view-mode-default .field.field--name-field-about-photo-set.field--type-image.field--label-hidden.field__items,
        .node.node--type-services.node--view-mode-full .field.field--name-field-service-photo-set.field--type-image.field--label-hidden.field__items,
        .node.node--type-doctors.node--view-mode-full .field.field--name-field-doctors-education-document.field--type-image.field--label-hidden.field__items,
        .node.node--type-diagnostic-cards.node--view-mode-full .field.field--name-field-diagnostic-photo-set.field--type-image.field--label-hidden.field__items,
        .node.node--type-popular-services-cards.node--view-mode-full .field.field--name-field-photo-serv-photo-set.field--type-image.field--label-hidden.field__items
        {--cols: 2; --column-gap: 10px; --row-gap: 10px; }
}

@media (max-width: 350px) {
    /* .auto-grid--4 */
        .view.view-special-offers.view-id-special_offers .view-content,
        .view.view-services.view-id-services .view-content,
        /* .view.view-photogallery.view-id-photogallery .view-content .views-row .node.node--type-photogallery.node--view-mode-teaser .field.field--name-field-photo-gallery-set.field--type-image.field--label-hidden.field__items, */
        .view.view-doctors.view-id-doctors .view-content,
        .view.view-diagnostics.view-id-diagnostics .view-content,
        .view.view-taxonomy-term.view-id-taxonomy_term .view-content,
        .view.view-popular-services.view-id-popular_services .view-content
        
        /* .view.view-about.view-id-about .view-content .views-row .node.node--type-about.node--view-mode-default .field.field--name-field-about-photo-set.field--type-image.field--label-hidden.field__items, */
        /* .node.node--type-services.node--view-mode-full .field.field--name-field-service-photo-set.field--type-image.field--label-hidden.field__items, */
        /* .node.node--type-doctors.node--view-mode-full .field.field--name-field-doctors-education-document.field--type-image.field--label-hidden.field__items */
        {--cols: 1; --column-gap: 10px; --row-gap: 15px; }

    
    /* .auto-grid--3 */
        .view.view-photogallery.view-id-photogallery .view-content .views-row .node.node--type-photogallery.node--view-mode-teaser .field.field--name-field-photo-gallery-set.field--type-image.field--label-hidden.field__items
        {--cols: 1; --column-gap: 10px; --row-gap: 10px; }
        
    /* .auto-grid--2 */
        .view.view-about.view-id-about .view-content .views-row .node.node--type-about.node--view-mode-default .field.field--name-field-about-photo-set.field--type-image.field--label-hidden.field__items,
        .node.node--type-services.node--view-mode-full .field.field--name-field-service-photo-set.field--type-image.field--label-hidden.field__items,
        .node.node--type-doctors.node--view-mode-full .field.field--name-field-doctors-education-document.field--type-image.field--label-hidden.field__items,
        .node.node--type-diagnostic-cards.node--view-mode-full .field.field--name-field-diagnostic-photo-set.field--type-image.field--label-hidden.field__items,
        .node.node--type-popular-services-cards.node--view-mode-full .field.field--name-field-photo-serv-photo-set.field--type-image.field--label-hidden.field__items
        {--cols: 1; --column-gap: 10px; --row-gap: 10px; }
}




/* ==================================================
    AUTO GRID — FALLBACK (NO GRID SUPPORT)
   ================================================== */
@supports not (display: grid) {
    .view-content,
    .auto-grid {
        display: flex;
        flex-wrap: wrap;
        gap: var(--gap);
    }

    .view-content > *,
    .view-content .views-row .node .field.field--type-image.field__items > *,
    .auto-grid > * {
        flex: 0 0 calc(100% / var(--cols));
    }
}