#games-listing-container {
  list-style: none;
  display: grid;
  gap: 20px;
  /* adjust spacing between games */
  padding: 0 0 32px;
  /* no padding so items are flush with sides */
  margin: 0;
  width: 100%;
  grid-template-columns: repeat(2, 1fr);
  /* 768px and up: 3 across */
  /* 980px and up: 4 across */
  /* 1440px and up: 5 across */ }
  @media (min-width: 768px) {
    #games-listing-container {
      grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 980px) {
    #games-listing-container {
      grid-template-columns: repeat(4, 1fr); } }
  @media (min-width: 1440px) {
    #games-listing-container {
      grid-template-columns: repeat(5, 1fr); } }
  #games-listing-container .games-item {
    border: 1px solid #CCC;
    flex-direction: column;
    justify-content: space-between;
    /* helps distribute .game-details and any other elements */
    height: 100%; }
    #games-listing-container .games-item:hover, #games-listing-container .games-item:focus {
      background-color: #EEE; }
    #games-listing-container .games-item img {
      padding-bottom: 15px; }
    #games-listing-container .games-item .game-title {
      font-size: calc(17px + 4 * ((100vw - 100px) / 1900));
      letter-spacing: -.025em;
      font-family: "america", sans-serif;
      line-height: 1.6;
      margin: 0 10px;
      color: black;
      font-weight: 700;
      padding-bottom: 10px; }

#games-listing-container {
  border-radius: 15px; }
  @media screen and (max-width: 767.98px) {
    #games-listing-container {
      border-radius: 5px; } }

#bcHeaderId {
  padding-top: 30px; }

@media screen and (min-width: 768px) {
  #capstone-game-header {
    padding-top: 24px !important;
    padding-bottom: 24px !important; } }

#capstone-game-header .component-overline {
  color: black;
  font-size: calc(16px + (14 - 12)*(100vw - 100px)/(2000 - 100)) !important; }

img.img-right {
  margin: 0 0 48px 48px !important; }
  @media screen and (max-width: 767.98px) {
    img.img-right {
      margin: 0 0 16px !important; } }

#slide-show-gallery {
  background-color: rgba(0, 0, 0, 0.4) !important;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: overlay; }
  #slide-show-gallery h2 {
    color: white; }
  #slide-show-gallery .carousel-slide-show .splide__arrows .is-control {
    color: rgba(255, 255, 255, 0.7); }

#cohort-box {
  clear: both;
  padding: 0 0 36px; }
  #cohort-box .cohort-details p:last-of-type {
    margin-bottom: 0; }
  @media screen and (min-width: 768px) {
    #cohort-box {
      padding: 0 0 48px; } }

#cohort-box:has(.cohort-image) .cohort-details p:last-of-type {
  margin-bottom: 24px; }

@media screen and (min-width: 768px) {
  #cohort-box:has(.cohort-image) {
    display: flex; }
    #cohort-box:has(.cohort-image) .cohort-details {
      flex: 0 1 50%; }
    #cohort-box:has(.cohort-image) .cohort-image {
      flex: 0 1 50%;
      padding: 8px 8px 8px 24px; } }

@media screen and (min-width: 1440px) {
  #cohort-box:has(.cohort-image) .cohort-details {
    flex: 0 1 60%; }
  #cohort-box:has(.cohort-image) .cohort-image {
    flex: 0 1 40%; } }