/*
 * Original Design Specifications
 * Target: > 1800px
 * Test Resolution: 1920 x 1080
 */
:root {
  --participating-universities-grid-columns: 4;
  --participating-universities-list-item-width: calc(
    (
        100% -
          (
            (var(--participating-universities-grid-columns) - 1) *
              var(--participating-universities-gap)
          )
      ) /
      var(--participating-universities-grid-columns)
  );
  --participating-universities-row-offset: calc(
    var(--participating-universities-list-item-width)
  );
  --participating-universities-list-margin: 0.5rem 0;
  --participating-universities-gap: 3rem;
  --participating-universities-border-radius: 1.2rem;
  --participating-universities-card-padding-x: 20%;
  --participating-universities-card-padding-y: calc(
    var(--participating-universities-card-padding-x) * 0.3
  );
  --participating-universities-card-aspect-ratio: calc(34 / 12);
}

/*
 * 2XL Media Query (1536px)
 * Target: 1799px > 1536px
 * Test Resolution: 1536 x 864
 */
@media screen and (max-width: 1799px) {
  :root {
    --participating-universities-gap: 2rem;
  }
}

/*
 * XL Media Query (1280px)
 * Target: 1535px > 1280px
 * Test Resolution: 1280 x 720
 */
@media screen and (max-width: 1535px) {
  :root {
    --participating-universities-gap: 1.5rem;
  }
}

/*
 * L Media Query (1024px)
 * Target: 1279px > 1024px
 * Test Resolution: 1024 x 768
 */
@media screen and (max-width: 1279px) {
  :root {
    --participating-universities-gap: 1rem;
  }
}

.participating-universities-list-rows.with-effect {
  --participating-universities-grid-columns: 5;
  --participating-universities-gap: 2rem;
}

/*
 * 2XL Media Query (1536px)
 * Target: 1799px > 1536px
 * Test Resolution: 1536 x 864
 */
@media screen and (max-width: 1799px) {
  .participating-universities-list-rows.with-effect {
    --participating-universities-gap: 1.5rem;
  }
}

/*
 * XL Media Query (1280px)
 * Target: 1535px > 1280px
 * Test Resolution: 1280 x 720
 */
@media screen and (max-width: 1535px) {
  .participating-universities-list-rows.with-effect {
    --participating-universities-gap: 1rem;
  }
}

/*
 * S Media Query (640px)
 * Target: < 767px
 * Test Resolution: 390 x 844
 */
@media screen and (max-width: 767px) {
  .participating-universities-list-rows.with-effect {
    --participating-universities-gap: 0.5rem;
  }

  .participating-universities-list.two-columns {
    --participating-universities-grid-columns: 2;
    --participating-universities-list-item-width: 100%;
  }
}

.participating-universities-list-rows {
  overflow: hidden;
  position: relative;
  margin: var(--participating-universities-list-margin);
}

.participating-universities-list {
  display: grid;
  grid-template-columns: repeat(
    var(--participating-universities-grid-columns),
    minmax(0, var(--participating-universities-list-item-width))
  );
  gap: var(--participating-universities-gap);
  width: 100%;
  padding: 0;
  margin: var(--participating-universities-gap) 0;
  list-style: none;
}

.participating-universities-list-item {
  background-color: rgba(255, 255, 255, 0.34);
  border-radius: var(--participating-universities-border-radius);
  padding: var(--participating-universities-card-padding-y)
    var(--participating-universities-card-padding-x);
  width: 100%;
  aspect-ratio: var(--participating-universities-card-aspect-ratio);
  display: flex;
  justify-content: center;
  align-items: center;
}

.participating-universities-list-item-placeholder {
  pointer-events: none;
}

.participating-universities-list-item-link {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.participating-universities-list-item-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.participating-universities-list-rows.with-effect::after {
  content: "";
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    var(--theme-color-secondary) 0%,
    transparent 25%,
    transparent 75%,
    var(--theme-color-secondary) 100%
  );
}

.participating-universities-list-rows.with-effect
  .participating-universities-list-item:nth-child(-n + 5) {
  transform: translateX(var(--participating-universities-row-offset));
}

.participating-universities-list-rows.with-effect
  .participating-universities-list-item:nth-child(n + 6):nth-child(-n + 10) {
  transform: translateX(
    calc(-1 * var(--participating-universities-row-offset))
  );
}