blockquote {
  font-size: 2rem;
}

.gray {
  background-color: rgba(233, 235, 248, 0.4);
  padding: 2rem 4rem;
}

/* Base styles */
.histoire h1 {
    color: #d60f2a;
    margin-top: 60px;
    margin-bottom: 40px;  /* Base spacing below title */
}

.histoire h2 {
    color: #d60f2a;
    padding-bottom: 1rem;
}

/* Row spacing */
.histoire .row {
    margin-bottom: 60px;  /* Default spacing between rows */
}

.histoire .row:last-child {
    margin-bottom: 0;  /* Remove margin from last row */
}

/* Responsive styles */
/* XS devices (phones, up to 768px) */
@media screen and (max-width: 767px) {
    .histoire h1 {
        font-size: 2.5rem;
        text-align: center;
        margin-bottom: 30px;  /* Smaller spacing on mobile */
    }

    .histoire .row {
        margin-bottom: 40px;  /* Reduced spacing on mobile */
    } 

    /* Image ordering for 2nd and 4th rows */
    .row.xs-reverse-order div:first-child {
        order: 2;
    }

    /* Enable flex for row to make order work */
    .row.xs-reverse-order {
        display: flex;
        flex-direction: column;
    }
}

/* SM devices (tablets, 768px and up) */
@media screen and (min-width: 768px) {
    .histoire h1 {
        font-size: 3rem;
        text-align: center;
        margin-bottom: 50px;  /* Medium spacing on tablets */
    }

    .histoire .row {
        margin-bottom: 50px;
        display: flex;
        align-items: center; /* Vertical alignment */
    }
}

/* MD and LG devices (desktops, 1024px and up) */
@media screen and (min-width: 1024px) {
    .histoire h1 {
        font-size: 4rem;
        text-align: center;
        margin-bottom: 60px;  /* Larger spacing on desktop */
        letter-spacing: 0.025rem;
    }

    .histoire h2 {
        font-size: 2.5rem;
        letter-spacing: 0.025rem;
    }

    .histoire .row {
        margin-bottom: 80px;  /* Maximum spacing on desktop */
    }

    .row:not(.xs-reverse-order) {
        text-align: right;
    }
}