/**
 * Split from numart_main.css for maintainability.
 */

.main-categories .views-view-responsive-grid__item img {
  max-height: 70vh !important;
}


.views-view-responsive-grid__item-inner {
  position: relative;
  /* each grid item becomes its own positioning context */
  overflow: hidden;
  /* keeps overlay inside image box */
}

.views-field-category-image {
  display: block;
}

.views-field-category-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Main categories - overlay labels container at bottom */
.view-main-categories-view .views-view-responsive-grid__item-inner {
  position: relative;
}

/* Create overlay container for name and action using pseudo element positioning */
.view-main-categories-view .views-view-responsive-grid__item-inner .views-field-category-image {
  position: relative;
}

/* Wrapper for labels - positioned at bottom of image */
.view-main-categories-view .views-view-responsive-grid__item-inner .views-field-name,
.view-main-categories-view .views-view-responsive-grid__item-inner .views-field-term-action {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 2;
}

/* Name above action */
.view-main-categories-view .views-view-responsive-grid__item-inner .views-field-name {
  bottom: 55px;
}

/* Action at bottom */
.view-main-categories-view .views-view-responsive-grid__item-inner .views-field-term-action {
  bottom: 17px;
}

.view-main-categories-view .views-view-responsive-grid__item-inner .views-field-name a,
.view-main-categories-view .views-view-responsive-grid__item-inner .views-field-term-action a {
  background-color: rgba(0, 0, 0, 0.4) !important;
  color: var(--nm-white) !important;
  width: fit-content !important;
  border-radius: 4px;
  padding: 5px 12px;
  display: inline-block;
}

.view-main-categories-view .views-view-responsive-grid__item-inner .views-field-term-action a {
  font-size: 10px !important;
}

.view-main-categories-view .views-view-responsive-grid__item-inner .views-field-name a {
  font-size: 24px !important;
}