.postHeader-img {
    width: 100%;
    height: 22em;
    object-fit: cover;
    object-position: 50% 100%;
}

/*
Estilização da história do coral
*/

article {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    height: auto;
    justify-content: center;
    font-size: x-large;
    padding-bottom: 1em;
    padding-inline: 1em;
    margin-top: 1em;
}

article p {
    margin-top: 1em;
}

.arms-container {
    width: 100%;
    display: flex;
    justify-content: center; 
    align-items: center; 
    margin: 2rem 0;
    justify-content: space-evenly;
}

.arms {
    width: 10%;
    height: auto;
    max-width: 150px;
}

/*
Estilização da aba de destaques do coral
*/

.highlights-container {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    height: auto;
    justify-content: center;
    font-size: x-large;
    margin-top: 1em;
}

.highlights {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    height: auto;
    justify-content: space-evenly;
    margin-top: 1em;
}

.highlight {
    width: 26%;
}

.highlight-img {
    width: 100%;
    height: auto;
}

.highlight-topic {
    color: #9AC9FF;
    margin-inline: 2%;
}

.highlight-text {
    margin-inline: 2%;
    margin-top: 2%;
}

.highlight-btn {
    background-color: #651012;
    color: white;
    border: none;
    border-radius: 6px;
    height: 3em;
    width: 70%;
    margin-inline: 2%;
    margin-top: 2%;
    cursor: pointer;
}

.newMember {
    display: flex;
    width: 100%;
    height: 5em;
    background-color: #651012;
    margin-top: 2em;
    font-size: x-large;
    align-items: center;
    justify-content: space-between;
    padding-inline: 5%;
}

.newMember-btn {
    background-color: #E93D52;
    height: 3em;
    color: white;
    border: none;
    border-radius: 6px;
    width: 25%;
    font-size: large;
    cursor: pointer;
}

.infos {
    display: flex;
    width: 100%;
    height: auto;
    margin-top: 3em;
    justify-content: space-around;
}

.infoBg {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 35%;
    height: 20em;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.church {
    background-image: url('../img/igreja.jpg');
}

.storage {
    background-image: url('../img/cor.jpg');
}

.infoBg:hover {
    transform: scale(1.1);
}

.info {
    background-color: rgb(0, 0, 0, 0.8);
    width: 50%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.members {
    display: flex;
    width: 100%;
    height: 5em;
    background-color: #651012;
    margin-top: 2em;
    font-size: large;
    align-items: center;
    justify-content: space-evenly;
    padding-inline: 5%;
}

.members-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.members-imgTxt {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.members-info-img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
}

.members-info-Number {
    font-size: 2em;
    font-weight: bold;
}

.members-info-subText {
    font-size: 1.2em;
}

@media (max-width: 768px) {

    /* ===== IMAGEM DO TOPO ===== */
    .postHeader-img {
        height: 14em;
        object-position: center;
    }

    /* ===== HISTÓRIA ===== */
    article {
        font-size: large;
        padding-inline: 1.2em;
    }

    /* ===== BRASÕES ===== */
    .arms-container {
        flex-direction: column;
        gap: 1.5em;
    }

    .arms {
        width: 40%;          /* aumenta bastante no mobile */
        max-width: 180px;
    }

    /* ===== TORNE-SE INTEGRANTE ===== */
    .newMember {
        flex-direction: column;
        height: auto;
        text-align: center;
        padding: 1.5em 1em;
        gap: 1em;
    }

    .newMember h1 {
        font-size: 1.3em;
    }

    .newMember-btn {
        width: 90%;
        font-size: medium;
    }

    /* ===== GALERIA / PARÓQUIA ===== */
    .infos {
        flex-direction: column;
        gap: 2em;
        align-items: center;
    }

    .infoBg {
        width: 90%;
        height: 16em;
    }

    .info {
        width: 70%;
        height: 50%;
    }

    /* ===== MEMBROS ===== */
    .members {
        flex-direction: column;
        height: auto;
        padding: 1.5em 0;
        gap: 1.5em;
    }

    .members-info {
        flex-direction: column;
    }

    .members-imgTxt {
        flex-direction: column;
        gap: 0.3em;
    }

    .members-info-img {
        margin-right: 0;
    }

    .members-info-Number {
        font-size: 2em;
    }

    .members-info-subText {
        font-size: 1em;
    }
}