/* **************************************** */
/* * Guide directory maps */
/* **************************************** */
.guide-cover, .guide-thumbnail {
    display: block;
    overflow: hidden;
    background: #e8f2f6;
}
.guide-cover img, .guide-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.guide-cover { aspect-ratio: 1185 / 839; }
.guide-thumbnail { height: 190px; }
.featured-copy h2 a { color: inherit; text-decoration: none; }
.featured-copy h2 a:hover { text-decoration: underline; }
@media (min-width: 681px) {
    .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
    .guide-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* **************************************** */
/* * Guide introduction and article */
/* **************************************** */
.guide-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 24px; }
.guide-actions > a + a { font-size: 15px; }
.guide-reading {
    display: grid;
    grid-template-columns: minmax(155px, 215px) minmax(0, 65ch);
    justify-content: center;
    align-items: start;
    gap: clamp(32px, 6vw, 90px);
    padding: clamp(30px, 5vw, 72px) clamp(22px, 4vw, 52px);
    border-top: 1px solid var(--line);
}
.guide-contents { position: sticky; top: 24px; border-left: 3px solid #9abe91; padding-left: 16px; }
.guide-contents a { display: block; margin-top: 8px; font-size: 15px; }
.guide-prose { min-width: 0; font-size: 17px; line-height: 1.7; }
.guide-prose section + section { margin-top: 42px; }
.guide-prose h2 { font-size: clamp(25px, 3vw, 34px); }
.guide-prose p { margin: 16px 0 0; }
.guide-prose table { width: 100%; margin-top: 20px; border-collapse: collapse; font-size: 16px; }
.guide-prose caption { text-align: left; padding: 0 0 8px; font-weight: bold; }
.guide-prose th, .guide-prose td { text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--line); }
.guide-prose th { background: #edf3e7; }

/* **************************************** */
/* * Narrow screens */
/* **************************************** */
@media (max-width: 740px) {
    .guide-reading { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .guide-contents { position: static; }
    .guide-thumbnail { height: 150px; }
}