@media only screen and (max-width: 669px) {

    .calendario-eventos .cards-calendario-pagination {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--base-grid-spacing);
    }

        .cards-calendario-pagination .pagination-dots .dot:hover {
            background-color: var(--off-white-100);
        }

    .card-calendario {
        width: 100%;
    }

        .card-calendario .card-content-container {
            margin: var(--spacing-24);
        }

            .card-calendario .img-container {
                height: 138px;
                border-radius: 0.5rem;
            }

            .card-calendario .calendario-card-h3 {
                font-size: 1.5rem; /*24px*/
                line-height: 1.8rem; /*28.8px*/
            }

            .card-calendario .linha-cinza {
                margin-top: var(--spacing-24);
            }
}

/* tablet */ 

@media only screen and (min-width: 670px) and (max-width: 999px) {

    .card-calendario {
        width: 329px;
    }

        .card-calendario .card-content-container {
            margin: var(--spacing-24);
        }

            .card-calendario .img-container {
                height: 157px;
            }

            .card-calendario .mobile-hidden {
                font-size: 1.25rem; /*20px*/
                line-height: 1.5rem; /*24px*/
            }

            .card-calendario .linha-cinza {
                margin-top: var(--spacing-8);
            }

                .card-calendario .card-bottom .p-small {
                    font-size: 1rem;
                }
}

@media only screen and (min-width: 1000px) and (max-width: 1269px) {

    .card-calendario {
        width: 316px;
    }

        .card-calendario .card-content-container {
            margin: var(--spacing-24);
        }

            .card-calendario .img-container {
                height: 157px;
            }

            .card-calendario .mobile-hidden {
                font-size: 1.25rem; /*20px*/
                line-height: 1.5rem; /*24px*/
            }

            .card-calendario .linha-cinza {
                margin-top: var(--spacing-8);
            }

                .card-calendario .card-bottom .p-small {
                    font-size: 1rem;
                }
}