/* Styles for Event Listing page views grid*/
.utevent-listing-block {
  margin-bottom: 1.5rem;
}
.utevent-listing-block .views-row {
  padding-bottom: 2vw;
}

/* Items Per Row Styles */
.utevent-listing-block .views-view-grid > div {
  --ipr-grid-gap: 2.5vw;
  --ipr-grid-min-min-size: 300px;
  --ipr-grid-min-max-size: 325px;

  display: grid;
  grid-gap: var(--ipr-grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(max(var(--ipr-grid-min-min-size), var(--ipr-grid-min-max-size)), 1fr));
}

.utexas-onecol .utevent-listing-block .views-view-grid > div,
.utexas-twocol .utevent-listing-block .views-view-grid > div,
.utexas-threecol .utevent-listing-block .views-view-grid > div,
.utexas-fourcol .utevent-listing-block .views-view-grid > div {
  /* Maximum total width of all grid gaps (gutters) possible at --ipr-grid-num-columns. */
  --ipr-grid-gap-total: calc((var(--ipr-grid-num-columns) - 1) * var(--ipr-grid-gap));
  /* Total width of the container minus the width of maximum total possible grid gaps. */
  --ipr-grid-available-space: calc(100% - var(--ipr-grid-gap-total));
  /* Total available space divided by the maximum number of columns. */
  /* Subract 1px from total to prevent odd rounding behavior in Firefox. */
  --ipr-grid-min-max-size: calc(var(--ipr-grid-available-space) / var(--ipr-grid-num-columns) - 1px);
}

.utexas-onecol .utevent-listing-block .views-view-grid > div {
  --ipr-grid-num-columns: 1;
}
.utexas-twocol .utevent-listing-block .views-view-grid > div {
  --ipr-grid-num-columns: 2;
}
.utexas-threecol .utevent-listing-block .views-view-grid > div {
  --ipr-grid-num-columns: 3;
}
.utexas-fourcol .utevent-listing-block .views-view-grid > div {
  --ipr-grid-num-columns: 4;
}

/* Grid styles to align icons and content */
.utevent-listing-block .views-field-field-utevent-datetime .field-content,
.utevent-listing-block .views-field-field-utevent-location .field-content {
  display: grid;
  grid-template-columns: [col-start] 30px [col-end] auto;
}
.utevent-listing-block .views-field-field-utevent-location .field-content {
  align-items: center;
}
.utevent-listing-block .views-field-field-utevent-datetime .recurring-output--wrapper {
  grid-column: col-end;
}

/* ****************************** */