@media (max-width: 575.98px) {
    .bg-decor__item--6,
    .bg-decor__item--7,
    .bg-decor__item--10,
    .bg-decor__item--12 {
        display: none;
    }

    .bg-decor {
        transform: scale(0.7);
        transform-origin: center;
    }
}

/* Alvos de toque. No celular todo botão do site media 31px de altura (padrão do
   .btn-sm do Bootstrap) — acima do mínimo de 24px da WCAG 2.5.8, mas bem abaixo
   dos 44px que Apple e Google recomendam para o dedo. Como o público deste site
   acessa quase todo pelo celular, e os filtros de categoria ficam lado a lado,
   errar o toque era fácil. Medido em navegador real a 390px de largura. */
@media (max-width: 767.98px) {
    .btn,
    .category-filter-btn,
    .reserve-gift-btn {
        min-height: 44px;
    }

    .category-filter-btn {
        display: inline-flex;
        align-items: center;
    }

    .reserve-gift-btn {
        justify-content: center;
    }
}

@media (min-width: 768px) {
    .narrow-container {
        max-width: 36rem;
    }

    .gift-info-card {
        margin-inline: -4rem;
    }
}