/* Page-content responsiveness shared by the existing portfolio pages. */
main { width: 100%; }
.content { width: 100%; padding-inline: clamp(1rem, 4vw, 3rem); }

@media (max-width: 700px) {
    .intro,
    .background,
    .future,
    .headerContent,
    .heroContent,
    .card-body,
    .card-body.reverse {
        flex-direction: column;
    }

    .intro,
    .background,
    .future,
    .headerContent,
    .heroContent {
        width: 100%;
        gap: 1.5rem;
        padding: 1.5rem 1rem;
        text-align: center;
    }

    .introText h1,
    .introText p,
    .backgroundText h1,
    .backgroundText p,
    .futureText h1,
    .futureText p {
        text-align: center;
        text-indent: 0;
    }

    .profile,
    .introPhoto,
    .backgroundPhoto { width: min(55vw, 220px); height: auto; aspect-ratio: 1; }
    .futurePhoto { width: min(100%, 500px); }

    .leftHero,
    .rightHero { width: 100%; gap: 1.5rem; }
    .leftHero img:not(.magIcon),
    .rightHero img:not(.magIcon),
    .heroContent img:not(.magIcon) { width: min(100%, 400px); height: auto; }

    .magIcon {
        width: clamp(2rem, 10vw, 2.75rem);
        height: clamp(2rem, 10vw, 2.75rem);
    }

    .leftHero a:has(.magIcon),
    .rightHero a:has(.magIcon) {
        display: inline-flex;
        padding: 6px;
    }

    .card-header { align-items: flex-start; flex-wrap: wrap; padding: 1rem; gap: .6rem; }
    .card-date { margin-left: 0; }
    .card-text,
    .card-body.reverse .card-text { padding: 1.25rem; border-inline: 0; border-bottom: 1px solid var(--border); }
    .card-media { width: 100%; padding: 1.25rem; }
    .comp-media { width: min(100%, 420px); height: auto; }

    .contactExternals { flex-wrap: wrap; gap: 1rem; padding: 1rem; }
}

@media (max-width: 420px) {
    .introText h1,
    .backgroundText h1,
    .futureText h1 { font-size: 2rem; }
    .introText p,
    .backgroundText p,
    .futureText p { font-size: 1.1rem; }
    .card-title { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}