#hero-catopedia {
     background-image: url("../../images/banner/catopedia_hero.png");
     box-shadow: 0px 3px 16px 5px rgba(255, 250, 240, 0.618);
     /* object-fit: contain; */
     background-size: cover;
     width: 100%;
     margin-top: 0;
     height: 55vh;
     padding: 2rem 10rem;
     display: flex;
     justify-content: space-evenly;
     align-items: center;
     flex-direction: column;
}

#hero-oth {
     width: 100%;
     display: flex;
     justify-content: space-evenly;
     align-items: center;
}

#hero-catopedia img {
     width: 100%;
}

#history * {
     text-align: center;
     font-weight: 600;
     color: var(--txt-col2);
}

#history a {
     font-weight: 700;
     color: var(--txt-col1);
     padding-left: 0.2rem;
     text-decoration: none;
     transition: all 0.3s;
}

#history a:hover {
     text-decoration: underline;
     color: var(--link-col);
     letter-spacing: 0.1rem;
}

@media screen and (max-width: 1052px) {
     #hero-catopedia {
          height: 35vh;
     }

     #hero-oth {
          flex-direction: column;
     }

     #history {
          margin-top: .3rem;
     }
}

@media (max-width: 595px) {
     #hero-catopedia {
          height: 45vh;
          padding: 1.5rem 0rem;
     }
}