.cds-board-recommended-posts {
    background-color: var(--gray-50);

    &__list {
        margin: 0 auto;
        max-width: 1216px;
        padding-inline: 32px;
        padding-block-end: 96px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 32px;
        row-gap: 64px;

        @media (max-width: 768px) {
            grid-template-columns: repeat(1, 1fr);
            padding-block-end: 64px;
            padding-inline: 16px;
            row-gap: 48px;
        }
    }
}

.cds-board-notification {
    position: fixed;
    top: 88px;
    right: 16px;

    @media (max-width: 768px) {
        top: auto;
        bottom: 88px;
        width: calc(100% - 32px);
    }

    .container {
        display: flex;
        align-items: center;
        width: 343px;
        padding: 16px;
        gap: 16px;
        border-radius: 12px;
        border: 1px solid var(--gray-200);
        background: var(--base-white);
        box-shadow: var(--shadow-sm);

        @media (max-width: 768px) {
            width: 100%;
        }
    }

    .text {
        color: var(--gray-600);
        font-size: var(--font-size-0);
        font-weight: var(--font-weights-commerce-sans-2);
        line-height: var(--line-heights-10)px;

        @media (max-width: 768px) {
            font-size: var(--font-size-1);
            line-height: var(--line-heights-9)px;
        }
    }

    .close-button {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translate(0, -50%);
    }
}