:root {
    --gap: 32px;
    --max-width: 1100px;
    --bg: #fff;
    --muted: #666;
    --accent: #111;
}

* {
    box-sizing: border-box
}

html,
body {
    height: 100%
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
    align-items: start;
    max-width: var(--max-width);
    padding: 100p 20px;
    margin: 0 auto;
}

/* Left column (image) */
.left {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.left img {
    width: 100%;
    max-width: 250px;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Center column */
.center header {
    margin-bottom: 24px;
}


.center p {
    margin: 20px 0;
}

/* Right column*/
.right h2 {
    margin: 0 0 12px 0;
}


/* Responsive: stack on small screens */
@media (max-width: 800px) {
    .layout {
        grid-template-columns: 1fr;
        padding: 24px;
    }

    .left {
        order: -1;
        margin-bottom: 12px;
    }

    .right {
        margin-top: 16px;
    }
}