.aboutInfoWrapper {
    margin-left: 10svw;
    margin-right: 20svw; 
    margin-top: 2vh;
    margin-top: 2svh;
    margin-bottom: 15vh;
    margin-bottom: 15svh;
    overflow-wrap: break-word;
    word-break: break-word;
}

.aboutInfoWrapper p {
    margin-top: 8vh;
    margin-top: 8svh;
}

.volWrapper {
    display: grid;
    justify-content: flex-start;
    width: 100%;
}

.imgVol {
    border: 1px solid lightgray;
    border-radius: 0.25rem;
    max-width: 100%;
    height: auto;
    display: block;
}

.imgPlaceHolder {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    display: block; 
    max-width: 100%;
}

/* ── Large tablet (≤1024px) ── */
@media only screen and (max-width: 1024px) {
    .aboutInfoWrapper {
        margin-left: 5svw;
        margin-right: 10svw; 
    }

    .imgPlaceHolder {
        width: 80%;
        height: 280px;
    }
}

/* ── Tablet (≤800px) ── */
@media only screen and (max-width: 800px) {
    .aboutInfoWrapper {
        margin-left: 7.5%;
        margin-right: 7.5%;
    }

    .imgPlaceHolder {
        width: 85%;
        height: 250px;
    }
}

/* ── Mobile (≤600px) ── */
@media only screen and (max-width: 600px) {
    .aboutInfoWrapper {
        margin-left: 5%;
        margin-right: 5%;
        margin-top: 3vh;
        margin-top: 3svh;
        margin-bottom: 8vh;
        margin-bottom: 8svh;
    }

    .imgPlaceHolder {
        width: 90%;
        height: 200px;
    }

    .aboutInfoWrapper p {
        margin-top: 4vh;
        margin-top: 4svh;
    }
}

/* ── Small mobile (≤400px) ── */
@media only screen and (max-width: 400px) {
    .aboutInfoWrapper {
        margin-left: 2.5%;
        margin-right: 2.5%;
    }

    .imgPlaceHolder {
        width: 95%;
        height: 180px;
    }

    .aboutInfoWrapper p {
        margin-top: 4vh;
        margin-top: 4svh;
    }
}

/* ── Landscape phone ── */
@media only screen and (max-height: 430px) and (orientation: landscape) {
    .aboutInfoWrapper {
        margin-left: 5%;
        margin-right: 5%;
        margin-top: 2vw;
        margin-bottom: 5vw;
    }

    .aboutInfoWrapper p {
        margin-top: 2vw;
    }
}