#breed-cards {
     width: 100%;
     padding: 0 3rem;
     color: var(--txt-col1);
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;
     gap: 0.8rem;
     background: rgba(255, 255, 255, 0.1);
     background-image: url("../../images/banner/catopedia_back.png");
     background-repeat: repeat-y;
     object-fit: cover;
}

.breed-container {
     padding: 0.6rem;
     /* margin: 0.3rem; */
     display: flex;
     justify-content: flex-start;
     align-items: center;
     flex-direction: column;
     /* width: 22vw; */
     /* height: 63vh; */
     background: rgba(99, 221, 209, 0.04);
     border-radius: 20px;
     box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
     backdrop-filter: blur(6px);
     -webkit-backdrop-filter: blur(6px);
     border: 1.5px solid rgba(99, 221, 209, 1);
     transition: 0.6s all;
}

.breed-container:hover {
     scale: 1.04;
}

.breed-container:hover .breed-photo img {
     transform: scale(1.1);
}

.breed-container a {
     text-decoration: none;
}

.breed-photo {
     display: flex;
     justify-content: center;
     align-items: center;
     border: 2px solid var(--col4);
     border-radius: 12px;
     overflow: hidden;
}

.breed-photo img {
     object-fit: cover;
     width: 100%;
     aspect-ratio: 3/2;
     /* border-radius: 10px; */
     transition: 0.2s all;
}

.breed-desc {
     padding: 0 0.3rem;
}

.breed-desc .breed-name h3 {
     margin: 0.5rem 0 0.2rem 0;
     padding: 0;
     font-size: 1.35rem;
     font-family: var(--heading2);
     color: var(--txt-col2);
}

.breed-intro {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-direction: column;
}

.breed-desc .breed-intro p {
     margin: 0;
     padding: 0;
     color: var(--txt-col1);
     text-align: justify;
     text-justify: inter-word;
}

#show-more {
     text-align: center;
     margin: 1rem 0 2rem 0;
}

.popup {
     position: fixed;
     bottom: 5%;
     left: 50%;
     transform: translate(-50%, -50%);
     /* width: 300px; */
     padding: 20px;
     border-radius: 7px;
     box-shadow: 0 4px 30px rgba(0, 0, 0, 0.481);
     backdrop-filter: blur(11.7px);
     -webkit-backdrop-filter: blur(11.7px);
     display: none;
     z-index: 100;
     text-align: center;
}

.popup h4 {
     font-family: var(--heading2);
}

/* Optionally, add animations for fade-in/out effects */
@keyframes fadeIn {
     from {
          opacity: 0;
     }

     to {
          opacity: 1;
     }
}

@keyframes fadeOut {
     from {
          opacity: 1;
     }

     to {
          opacity: 0;
     }
}

.popup.fade-in {
     animation: fadeIn 1s forwards;
}

.popup.fade-out {
     animation: fadeOut 1s forwards;
}

@media (max-width: 1053px) {
     #breed-cards {
          grid-template-columns: 1fr 1fr 1fr;
     }
}

@media (max-width: 779px) {
     #breed-cards {
          grid-template-columns: 1fr 1fr;
          padding: 0 2rem;
     }
}

@media (max-width: 595px) {
     #breed-cards {
          grid-template-columns: 1fr;
     }
}