/* Header */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

        .hero {
            background: linear-gradient(
                135deg,
                /* #354522, */
                #59683d,
                #d3d9c8,
                
                #b58a2b
            );
            color: white;
            padding: 70px 20px;
            text-align: center;
        }

        .date {
            display: inline-block;
            background: #ffffff;
            color: #4a572e;
            padding: 8px 25px;
            border-radius: 30px;
            font-weight: bold;
            margin-bottom: 20px;
        }

        .hero h1 {
            font-size: 52px;
            margin: 5px 0 15px;
            font-family: Georgia, serif;
        }

        .hero h2 {
            font-size: 28px;
            font-weight: normal;
            margin: 0 auto;
            max-width: 850px;
        }

        .hero p {
            max-width: 750px;
            margin: 20px auto 0;
            font-size: 18px;
        }

        /* Main Article */

        /* main {
            padding: 60px 0;
        } */

article {
            background: #ffffff;
            padding: 50px;
            border-radius: 18px;
            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.07);
        }

h2 {
            color: #405329;
            font-family: Georgia, serif;
            font-size: 32px;
            margin-top: 45px;
            border-left: 5px solid #b58a2b;
            padding-left: 15px;
        }

        h3 {
            color: #566638;
            font-size: 23px;
            margin-top: 30px;
        }

        p {
            font-size: 17px;
        }

        ul {
            padding-left: 25px;
        }

        li {
            margin-bottom: 10px;
        }

        /* Highlight */

        .highlight {
            background: #f1f3e8;
            border-left: 5px solid #b58a2b;
            padding: 22px 25px;
            margin: 30px 0;
            border-radius: 8px;
        }

        .highlight strong {
            color: #405329;
        }

        /* Benefits */

        .benefits {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin: 25px 0;
        }

        .benefit-box {
            background: #f7f7f1;
            border: 1px solid #e4e3d8;
            padding: 25px;
            border-radius: 12px;
        }

        .benefit-box h3 {
            margin-top: 0;
        }

        /* Places */

        .places {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-top: 25px;
        }

        .place {
            padding: 25px;
            border-radius: 12px;
            background: #f5f6ef;
            border-top: 4px solid #b58a2b;
        }

        .place h3 {
            margin-top: 0;
        }

        /* Quote */

        .quote {
            margin: 45px 0 20px;
            padding: 35px;
            background: #405329;
            color: white;
            border-radius: 15px;
            text-align: center;
            font-family: Georgia, serif;
            font-size: 24px;
        }


        @media (max-width: 600px) {
    .benefits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding: 0 10px;
    }

    .benefit-box {
        min-width: 0;
        padding: 12px;
        font-size: 14px;
        line-height: 1.5;
    }
}

@media (max-width: 480px) {
    .benefits {
        grid-template-columns: 1fr;
    }
}

.benefits,
.benefits * {
    box-sizing: border-box;
}

.benefit-box img,
.benefit-box iframe,
.benefit-box video {
    max-width: 100%;
    height: auto;
}