/* BDGoldPrice - layout.css */

.container {

    width: 100%;

    max-width: var(--container-width);

    margin-inline: auto;

    padding-inline: var(--container-padding);

}

.container-sm {

    width: 100%;

    max-width: 760px;

    margin-inline: auto;

    padding-inline: var(--container-padding);

}

.container-content {

    width: 100%;

    max-width: var(--content-width, 900px);

    margin-inline: auto;

    padding-inline: var(--container-padding);

}

.site-page {

    min-height: 100vh;

    display: flex;

    flex-direction: column;

}

.site-main {

    flex: 1;

    width: 100%;

    background: var(--color-bg);

    padding: 0 0 72px;

}

.section {

    padding: 56px 0;

}

.section-sm {

    padding: 36px 0;

}

.section-header {

    margin-bottom: 24px;

}

.section-title {

    margin-bottom: 8px;

}

.section-description {

    max-width: 760px;

    margin-bottom: 0;

    color: var(--color-text-muted);

}

.grid {

    display: grid;

    gap: 20px;

}

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.auto-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 20px;

}

/* Global readable content width */

.content-width {

    width: min(100%, 900px);

    margin-inline: auto;

}