.story {
    background: #e3d7c3;
    padding: 90px 0;
}

.story-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 70px;
    align-items: center;
}

.story-photo img {
    width: 100%;
    display: block;
    border: 8px solid #f8f3ea;
    box-shadow:
        0 14px 32px rgba(43,26,16,.18);
    object-fit: cover;
    transform: rotate(0.25deg);
}

.story-letter {
    background: #fcfaf5;
    padding: 40px 44px;
    border: 1px solid rgba(176,141,87,.35);
    box-shadow:
        0 10px 28px rgba(43,26,16,.10);
    max-width: 560px;
    transform: rotate(-0.4deg);
}

.story-letter h2 {
    margin-bottom: 28px;
    text-align: left;
    color: #352114;
}

.story-letter .intro {
    font-style: italic;
    font-size: 1.2rem;
    color: var(--leather-brown);
    margin-bottom: 24px;
}

.story-letter p {
    text-align: left;
    line-height: 1.9;
    margin-bottom: 1.4em;
    color: #40352b;
}

.signature {
    margin-top: 40px;
    text-align: right;
    font-style: italic;
    color: var(--leather-brown);
}

.story-letter p:first-of-type::first-letter {
    float: left;
    font-size: 3rem;
    line-height: .85;
    padding-right: 10px;
    color: var(--brass);
    font-family: Georgia, serif;
}
 @media (max-width: 768px) {

    .story-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 0;
    }