.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
}

@media (min-width: 375px) {
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.section {
    padding-top: var(--section-gap-mobile);
    padding-bottom: var(--section-gap-mobile);
}

@media (min-width: 1024px) {
    .section {
        padding-top: var(--section-gap-desktop);
        padding-bottom: var(--section-gap-desktop);
    }
}

.sponsored-bar {
    width: 100%;
    padding: 10px 16px;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-sponsored-text);
    background-color: var(--color-sponsored-bg);
    border-bottom: 1px solid var(--color-border);
}

.page-layout {
    display: block;
}

@media (min-width: 1024px) {
    .page-layout {
        display: grid;
        grid-template-columns: 58% 38%;
        gap: 32px;
        align-items: start;
    }

    .page-layout__main {
        min-width: 0;
    }

    .page-layout__sidebar {
        position: sticky;
        top: 88px;
    }
}

@media (max-width: 1023px) {
    .page-layout__sidebar {
        padding-top: var(--section-gap-mobile);
        padding-bottom: var(--section-gap-mobile);
    }
}

.section-heading {
    font-size: 1.375rem;
    margin-bottom: 1rem;
}

@media (min-width: 1024px) {
    .section-heading {
        font-size: 1.75rem;
    }
}

.prose h2 {
    font-size: 1.25rem;
    margin-top: 2rem;
}

.prose h3 {
    font-size: 1.125rem;
    margin-top: 1.5rem;
}

.prose ul,
.prose ol {
    margin-bottom: 1em;
    padding-left: 1.25rem;
}

.prose li {
    margin-bottom: 0.5em;
}