.utexas-promo-unit {
  align-content: flex-start;
  background-color: #f9fafb;
  border: 1px solid #f2f1ed;
  display: flex;
  flex-wrap: wrap;
  padding: 0.75rem;
}

/* Image Wrapper (Section 1) Styles */
.utexas-promo-unit .image-wrapper {
  flex-shrink: 1;
  flex-grow: 1;
  margin: 0 auto 2%;
}
.utexas-promo-unit .landscape-image {
  flex-basis: 40%;
  max-width: 190px;
}
.utexas-promo-unit .portrait-image {
  flex-basis: 50%;
  max-width: 130px;
}
.utexas-promo-unit .square-image {
  flex-basis: 50%;
  max-width: 140px;
}
/* Setting the flex-basis to 100% effectively forces a flex-wrap. */
.stacked-display .utexas-promo-unit .landscape-image,
.stacked-display .utexas-promo-unit .portrait-image,
.stacked-display .utexas-promo-unit .square-image {
  flex: 0 0 100%;
  max-width: initial;
}
.stacked-display .utexas-promo-unit .data-wrapper {
  margin-left: 0;
}
/* This width needed in case image derivative width is smaller in pixels than
  its container's width. */
.utexas-promo-unit .image-wrapper img {
  width: 100%;
}
/* ******************************** */

/* Data Wrapper (Section 2) Styles */
.utexas-promo-unit .data-wrapper {
  flex: 1 1 0;
  margin: 0 0 0 1.25rem;
  min-width: 175px;
}
.utexas-promo-unit .data-wrapper > :last-child,
.utexas-promo-unit .data-wrapper > :last-child :last-child {
  margin-bottom: 0;
}
/* ****************************** */

/* Items Per Row Styles */
.utexas-promo-unit-items {
  --ipr-grid-gap: 1vw;
  --ipr-grid-min-min-size: 275px;
  --ipr-grid-min-max-size: 300px;

  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 .utexas-promo-unit-items {
  --ipr-grid-min-max-size: 100%;
}
.utexas-twocol .utexas-promo-unit-items {
  --ipr-grid-min-max-size: calc(50% - var(--ipr-grid-gap));
}
.utexas-threecol .utexas-promo-unit-items {
  --ipr-grid-min-max-size: calc(33.333% - (2 * var(--ipr-grid-gap)));
}
.utexas-fourcol .utexas-promo-unit-items {
  --ipr-grid-min-max-size: calc(25% - (3 * var(--ipr-grid-gap)));
}
/* ****************************** */

@media all and (min-width: 900px) {
  .utexas-promo-unit {
    padding: 1rem;
  }
}

@media all and (min-width: 1200px) {
  .utexas-promo-unit {
    padding: 1.25rem;
  }
  .utexas-promo-unit .landscape-image {
    max-width: 220px;
  }
  .utexas-promo-unit .portrait-image {
    max-width: 150px;
  }
  .utexas-promo-unit .square-image {
    max-width: 140px;
  }
}