.stats .container {
      background-color: #1a2126;
      height: 200px;
      width: 400px;
      border-radius: 5px;
      padding: 2rem;
      border: 1px #1f425e solid;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      cursor: default;
      transition: background-color 0.3s ease;
    }
   .stats .container:hover {
      background-color: #fceaf0;
    }
  .stats  .container h2, .container p {
      color: #fceaf0;
      text-transform: none;
      transition: color 0.3s ease;
    }
  .stats  .container:hover h2, .container:hover p {
      color: #1a2126;
    }
  .stats  .container h2 {
      font-size: 2rem;
      font-weight: bold;
    }
  .stats  .container p {
      font-size: 1.5rem;
    }
    @media (max-width: 600px) {
  .stats   .container {
      background-color: #1a2126;
      height: 200px;
      width: 100%;
}

.my-photos .boxLink {
    height: 300px;
min-height: 300px;
    max-height: 300px;
}

.stats .boxLink div[class^="Markdown"] {
    display: flex;
    width: 100%;
}
}

@media (max-width: 900px) {
    .hero-image-component > div, 
    .hero-image-component > div > div > div > div {
        min-height: 30vh!important;
    }
}

@media (max-width: 700px) {
    .hero-image-component > div, 
    .hero-image-component > div > div > div > div {
        min-height: 26vh!important;
    }

    .boxlink-image {
        min-height: 200px;
        max-height: 400px;
    }
}

@media (max-width: 500px) {
    .hero-image-component > div, 
    .hero-image-component > div > div > div > div {
        min-height: 22vh!important;
    }
}
.stages{
  pointer-events: none;
  cursor: default;
}

.nohover{
    pointer-events: none;
  cursor: default;
}

.stages .row {
  justify-content: center;
}

@media (min-width: 1098px){
.stages .row  .col-md-4 {
  width: 20%;
}
}