.index校訓和金句2 {
    --max-width: 1600px;
    --title-font-size: 2em;
    --title-font-weight: 800;
    --title-margin: 0 0 0.5em 0;
    --light-color: rgb(57,0,133);
    --dark-color: #000000;
  
    max-width: var(--max-width);
    margin : 0 auto;
}

    .index校訓和金句2 .theGrid {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: stretch;
    }

    .index校訓和金句2 .block {
        padding: 3vh 3vw;
    }

    .index校訓和金句2 .leftBlock {
        color: var(--light-color);
        background: linear-gradient(255deg, rgba(255,255,255,1) 0%, rgba(228,199,252,1) 24%, rgba(232,251,255,1) 100%);
    }

    .index校訓和金句2 .rightBlock {
        color: var(--dark-color);
        background: linear-gradient(45deg, rgba(224,243,250,1) 0%,rgba(216,240,252,1) 50%,rgba(184,226,246,1) 51%,rgba(182,223,253,1) 100%);
    }

    .index校訓和金句2 h1 {
        font-size: var(--title-font-size);
        font-weight: var(--title-font-weight);
        margin: var(--title-margin);
    }

    .index校訓和金句2 p {
        text-align: justify;
        line-height: 1.3;
    }

@media (max-width: 480px) {
    .index校訓和金句2 .block {
        flex-basis: 100%;
        padding: 3vh 10vw;
    }

    .index校訓和金句2 h1 {
        font-size: 1.4em;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .index校訓和金句2 .block {
        flex-basis: 100%;
        padding: 3vh 6vw;
    }

    .index校訓和金句2 h1 {
        font-size: 1.6em;
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    .index校訓和金句2 .block {
        flex-basis: 50%;
    }
}

@media (min-width: 980px) and (max-width:1199px) {
    .index校訓和金句2 .block {
        flex-basis: 50%;
    }
}

@media (min-width: 1200px) and (max-width:1919px) {
    .index校訓和金句2 .block {
        flex-basis: 50%;
    }
}

@media (min-width: 1920px) {
    .index校訓和金句2 .block {
        flex-basis: 50%;
    }
}