Shires Of Britain May 2026
<div class="shire-explorer"> <!-- Interactive map / button grid panel --> <div class="shire-map-panel"> <div class="map-title"> 🗺️ Click any Shire </div> <div class="shire-grid" id="shireButtonsContainer"> <!-- dynamic buttons from JS --> </div> <div class="mini-map-illustration"> 🏰 <span>Historic Shires of Britain</span> — over 30 traditional counties · from Cornwall to Caithness </div> </div>
.shire-grid::-webkit-scrollbar-thumb background: #b68b40; border-radius: 8px; shires of britain
/* two column layout: map sidebar + info panel */ .shire-explorer display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 1rem; <div class="shire-explorer"> <
.shires-header p font-size: 1.1rem; color: #3a5a40; font-style: italic; margin-top: 0.5rem; 🗺️ Click any Shire <
/* map card / interactive list + visual */ .shire-map-panel flex: 2; min-width: 260px; background: #fffef7; border-radius: 36px; box-shadow: 0 20px 30px -12px rgba(0,0,0,0.15); overflow: hidden; transition: all 0.2s;
/* main container */ .feature-container max-width: 1400px; margin: 0 auto; padding: 2rem 1.5rem;
.shires-header h1 font-size: 2.6rem; letter-spacing: 1px; font-weight: 600; background: linear-gradient(135deg, #2c5e2e, #7a4c2c); background-clip: text; -webkit-background-clip: text; color: transparent; display: inline-block; margin-bottom: 0.25rem;