#c25 .programs {
  display: grid;
  place-items: center;
}

#c25 .programs :where(.error, .loading) {
  display: grid;
  grid-template-columns: min-content 1fr;
  align-items: end;
  gap: .6rem;
  margin-top: 1rem;
}

#c25 .programs :where(.error, .loading) h3 {
  margin: 0;
}

#c25 .programs .loading .dots,
#c25 .programs .loading .dots:before,
#c25 .programs .loading .dots:after {
  margin-bottom: .15rem;
  width: 4px; /* update this to control the size */
  aspect-ratio: .5;
  display: grid;
  background: radial-gradient(var(--color-evergreen) 68%,var(--color-evergreen) 72%) center/100% 50% no-repeat;
  animation: dotsLoad 1.2s infinite linear calc(var(--_s, 0) * .4s);
  transform: translate(calc(var(--_s, 0) * 150%));
}
#c25 .programs .loading .dots:before,
#c25 .programs .loading .dots:after {
  content: "";
  grid-area: 1/1;
}
#c25 .programs .loading .dots:before {--_s: -1}
#c25 .programs .loading .dots:after  {--_s:  1}

@keyframes dotsLoad {
  20% {background-position: top   }
  40% {background-position: bottom}
  60% {background-position: center}
}

#c25 .programs .programs-inner {
  /* User input values */
  --grid-layout-gap: 1.25rem;
  --grid-column-count: 4;
  --grid-column-min-width: 290px;

  /* Calculated values */
  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--min-width: calc(min(100%, var(--grid-column-min-width)));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  grid-gap: var(--grid-layout-gap);

  /* Animation */
  animation: loadIn .3s ease-out forwards;
}

#c25 .programs .programs-inner a {
  text-decoration: none;
  background-color: #f5f7f6;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  display: flex;
  flex-flow: column nowrap;
  -webkit-transition: all 200ms cubic-bezier(.25, .46, .45, .94);
  transition: transform 200ms cubic-bezier(.25, .46, .45, .94), box-shadow 200ms cubic-bezier(.25, .46, .45, .94);
}

#c25 .programs .programs-inner a:is(:hover, :focus) {
  transform: scale(1.025);
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}

#c25 .programs .programs-inner a:is(:hover, :focus) .content .icon i,
#c25 .programs .programs-inner a:is(:hover, :focus) .content .icon svg {
  color: var(--color-evergreen);
}

#c25 .programs .programs-inner a .content {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.875rem;
  gap: 2px;
  flex: 1;
}

#c25 .programs .programs-inner a .content .details {
  display: flex;
  flex-flow: column nowrap;
  gap: .625rem;
}

#c25 .programs .programs-inner a .content .details p {
  font-size: 1rem;
  line-height: 1rem;
  color: var(--color-text);
  margin: 0;
  font-weight: 300;
  text-transform: capitalize;
}

#c25 .programs .programs-inner a .content .details p.name {
  font-weight: 700;
  color: var(--color-evergreen);
}

#c25 .programs .programs-inner a .content .icon i,
#c25 .programs .programs-inner a .content .icon svg {
  color: var(--color-text);
}

@keyframes loadIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}