*,
*::before,
*::after {
  box-sizing: border-box;
}

.info-content {
    --radius: 0.75rem;
    --details-bg: #f4f4f4;
    --details-border: 1px solid #ddd;
    --summary-bg: #f4f4f4;
    --card-bg: #f4f4f4;
    --card-border: 1px solid #ddd;

    --grid-width: 280px;

    margin: 0 1.5rem;
    max-width: 1200px;

    h1 {
        color: var(--c-mid);
    }

    h2 {
        color: var(--c-blk);
    }
    
    h3 {
        color: var(--c-blk);
    }

    details {
        margin: 0 0 1rem 0;
        padding: 1rem;
        background-color: var(--summary-bg);
        border: var(--details-border);
        border-radius: var(--radius);
        overflow: hidden;

        &:open {
            border-color: var(--c-mid);
        }

        & > summary {
            margin-inline-start: 1rem;
            list-style-position: outside;
            font-weight: bold;

            &::marker {
                font-size: 1em;
                color: var(--c-drk);
            }
            
            & + div {
                padding-block: 0.5rem;
            }
        }
    }

    
    .content-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(var(--grid-width), 1fr));
        gap: 1rem;
        margin-block: 1rem;
    }

    & .info-card {
        padding: 1rem;
        background: var(--card-bg);
        border: var(--card-border);
        border-radius: var(--radius);
        overflow: hidden;

        .chip-list > a {
            display: inline-block;
            margin: 0.25rem;
            padding: .5rem 1rem;
            border-radius: 10rem;
            border: var(--card-border);
            background-color: var(--c-wht);
            color: var(--c-mid);

            &:hover {
                color: var(--c-wht);
                background-color: var(--c-drk);
            }
        }
    }
    
    & .hero-card {
        padding: 1rem;
        background: var(--c-wht);
        border: var(--card-border);
        border-radius: var(--radius);
        box-shadow: 0 1px 6px rgba(0,0,0,.08);
    }

    & .btn {
        display: inline-block;
        margin: 0.25rem;
        padding: .5rem 1rem;
        border-radius: 10rem;
        border: var(--card-border);
        border-color: var(--c-drk);
        background-color: var(--c-wht);
        color: var(--c-drk);
        font-weight: 700;

        &:hover {
            color: var(--c-wht);
            background-color: var(--c-drk);
        }
    }
    
    & .btn-red {
        border-color: var(--c-drk);
        background-color: var(--c-drk);
        color: var(--c-wht);

        &:hover {
            border-color: var(--c-mid);
            background-color: var(--c-mid);
        }
    }

    & .btn-green {
        border-color: var(--c-alt);
        background-color: var(--c-alt);
        color: var(--c-wht);

        &:hover {
            border-color: var(--c-alt-3);
            background-color: var(--c-alt-3);
        }
    }
    
    & .btn-black {
        border-color: var(--c-blk);
        background-color: var(--c-blk);
        color: var(--c-wht);

        &:hover {
            background-color: var(--c-wht);
            color: var(--c-blk);
        }
    }

}