/* 關於我們・田野裡的童話小屋：本頁專屬樣式 */
.about-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8%;
    align-items: center;
}

.about-story > img {
    width:100%;
    height:520px;
    object-fit:cover;
    border-radius:42% 26% 35% 18%;
    border:8px solid #fff7e8;
    outline:1px solid #b77e55;
    transform:rotate(-3deg);
}

.registration {
    background:#f0dbb4;
    border-radius:70px 15px 60px 15px;
    padding:50px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;
}

.registration img {
    max-height:480px;
    width:auto;
    margin:auto;
}

@media(max-width:760px) {
    .about-story,.registration {
        grid-template-columns:1fr;
        gap:30px;
    }
    .registration {
        padding:25px;
    }
    .about-story > img {
        height:380px;
    }
}

/* 公共空間以深色圓窗色串聯，與故事區拉開層次。 */
.page-about #spaces {
    width:100%;
    padding:90px 7% 100px;
    background:url('../images/fac/roof-pattern.svg') repeat,#294b4c;
    color:#fff9ed;
    border-radius:45% 0 35% 0 / 45px 0 35px 0;
    margin-bottom:75px;
}

.page-about #spaces h2,.page-about #spaces .eyebrow,.page-about #spaces .intro-text {
    color:#ffe1aa;
}

.page-about #spaces .news-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:45px 50px;
    max-width:1180px;
    margin:45px auto 0;
}

.page-about #spaces .news-card:nth-child(even) img {
    border-radius:25px 95px 25px 25px;
}

.page-about #spaces img {
    width:100%;
    height:auto;
    aspect-ratio:3 / 2;
    object-fit:cover;
    border:5px solid #e0bd85;
    border-radius:95px 25px 25px 25px;
}

.page-about #spaces h3 {
    font-size:25px;
}

.page-about .registration {
    border:1px solid #c1925f;
    margin-bottom:65px;
    background-image:url('../images/fac/roof-pattern.svg');
}

@media (max-width:760px) {
    .page-about #spaces {
        padding-block:65px;
    }
    .page-about #spaces .news-grid {
        grid-template-columns:1fr;
        gap:35px;
    }
}