@layer components {
    everyday-low-prices {
        --pad: var(--size-2);

        display: grid;

        padding-right: var(--size-4);
        grid-template-columns: max-content auto;
        grid-template-rows: var(--size-3) auto var(--size-3);
        gap: 0 var(--size-3);
        align-items: stretch;

        border: var(--border-size-1) solid var(--color-border-grey);

        @media screen and (min-width: 768px) {
            grid-template-rows: 0 auto 0;

            padding: 0 var(--size-4);
        }

        .promo-badges {
            display: grid;
            grid-template-rows: max-content auto;
            grid-row: 1/-1;

            width: 84px;

            font-size: var(--font-size-000);
            text-align: center;
            text-transform: uppercase;

            > div {
                padding: var(--pad);
                color: var(--color-light);
                background-color: var(--color-text);
            }
        }

        .badge-flag {
            position: relative;
            display: block;
            padding: var(--pad);

            align-content: center;

            font-style: normal;
            background-color: var(--color-brand-yellow);

            &::after {
                --border-width: 42px;

                content: "";
                display: block;
                width: 0;
                height: 0;
                border-left: var(--border-width) solid transparent;
                border-right: var(--border-width) solid transparent;
                border-top: 10px solid var(--color-brand-yellow);
                position: absolute;
                bottom: -10px;
                left: 0;
            }
        }

        > p {
            grid-row: 2;
            align-self: center;
            justify-self: center;

            font-size: var(--font-size-00);
            line-height: 1.5;
        }
    }
}