@media all and (max-width: 576px) {
  .container {
    width: 95vw;
  }

  #invoice-due-date .container {
    display: grid;
    grid-template-columns: 1fr;
  }

  #invoice-due-date .container .table {
    align-items: center;
    padding: 0
  }

  #invoice-due-date .container h1 {
    width: 100%;
    margin-bottom: 2rem;
    text-align: center
  }

  #invoice-calendar .container p {
    margin: 1rem
  }

  footer .grid {
    grid-template-columns: repeat(1, 1fr);
    row-gap: 1.5rem
  }


}