#explore-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.advice-title h1 {
    padding: 1rem;
}

/* Keep the gallery centered and constrained */
.advice-pet-gallery {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    padding: 1rem;
    width: 100%;
    max-width: 1200px;       /* NEW */
    margin: 0 auto;          /* NEW */
    align-items: stretch;     /* NEW: makes columns match height nicely */
}

/* Let columns be flexible rather than hard 50% */
.advice-gallery-left,
.advice-gallery-right {
    flex: 1 1 0;             /* NEW */
    min-width: 280px;        /* NEW: guards small screens before stack */
}

/* (Optional) If you prefer strict 50/50 at large screens, keep width but add box-sizing */
.advice-gallery-left,
.advice-gallery-right {
    box-sizing: border-box;  /* NEW */
}

/* Text block */
.advice-pet-text {
    width: 100%;
    padding: 1rem;
}

/* FIX selector leak: only affect h2 and p inside .advice-pet-text */
.advice-pet-text h3,
.advice-pet-text p {
    padding: 0.5rem;
    margin: 0;       
    text-align: center;        /* optional: keeps spacing consistent */
}

/* Image wrapper: remove fixed height, keep aspect and clipping */
.advice-pet-image-container {
    width: 100%;
    /* height: 50%;  REMOVE THIS */
    overflow: hidden;        /* NEW: prevents visible overflow */
    border-radius: 12px;     /* NEW: nicer look */
    aspect-ratio: 4 / 3;     /* NEW: stable box; change to taste (e.g., 16/9) */
}

/* Inner box can be omitted; keep if you need hooks */
.advice-pet-image {
    width: 100%;
    height: 100%;
}

/* Image: scale nicely inside wrapper */
.advice-pet-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;       /* NEW: fills box without distortion */
    display: block;          /* NEW: removes inline gap */
}

/* Right column layout */
.advice-gallery-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;               /* NEW: consistent spacing between items */
}

/* Responsive: stack columns on smaller screens */
@media (max-width: 900px) {
    .advice-pet-gallery {
        flex-direction: column;
    }
    .advice-gallery-left,
    .advice-gallery-right {
        min-width: 0;        /* allow full-width */
    }
}


@media (max-width: 600px) {
    .advice-title h1 {
        font-size: 1.3rem;
    }
    .advice-gallery-right {
        flex-direction: column-reverse;
    }
    
}