/* ===== ABOUT PAGE — PAGE‑SPECIFIC CSS ONLY ===== */

/* Avatar block */
.bio-avatar {
    max-width: 230px;
	width: 100%;
	float: left;
	padding: 0 20px 3px 0;
}

/* Certificates block */
.certs {
    width: 28%;
    float: left;
    padding: 10px;
}

.certs img {
    width: 100%;
    height: auto;
    display: block;
}

#certs {
    display: flex;
    justify-content: center;   /* centers the images horizontally */
    align-items: center;
    flex-wrap: wrap;           /* allows wrapping on small screens */
    gap: 1.5rem;                 /* optional spacing between images */
    padding-bottom: 10px;
    margin: 0 auto;            /* still useful if you later give it a max-width */
}

/* Make sure the images keep their natural aspect ratio */
#certs img.certs,
.certs {
    width: auto;
    height: auto;
    max-width: 280px;          /* adjust this value to taste */
    max-height: 380px;         /* optional safety limit */
    object-fit: contain;       /* never crops or stretches */
    display: block;            /* removes any residual inline spacing */
}

#certs img.certs:nth-child(2) {
    max-width: 336px;
    width: 336px;
}

/* Page-specific typography overrides */
p {
    font-size: 1.2em; /* overrides global 1.15rem */
}

/* Page-specific list spacing override */
li {
    margin: 0.2rem 0; /* slightly tighter than global */
}

cite{
	font-size: 1.3em;
	font-weight: 600;
}

@media (max-width: 480px) {
	.certs {
	width: 95%;
    margin: 0 auto;
    padding-bottom: 10px;
    }
    img.bio-avatar {
    float: none;
	}
    img.bio-avatar {
    width: 95%;
    height: auto;
    display: block;
    margin: 0 auto;
    }
    .bio-avatar {
    padding:0;
	}
}