@media (min-width: 640px) {
  .form-grid,
  .form-grid-2,
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .day-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .grid-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .inline-form { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); align-items: end; }
  .form-actions { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .two-column { display: grid; grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.4fr); }
  .grid-two { grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 0.8fr); }
}

@media (max-width: 767px) {
  .app-header,
  .site-header { align-items: flex-start; flex-direction: column; gap: 0.5rem; }
  .app-nav,
  .site-nav { width: 100%; }
  .list-card,
  .appointment-card,
  .section-header { display: grid; }
  .compact-actions { width: 100%; }
  .button-row .button,
  .form-actions .button,
  .action-row .button { width: 100%; }
}

@media (min-width: 640px) {
  .calendar-toolbar { grid-template-columns: minmax(12rem, 1fr) auto; }
}

@media (max-width: 1023px) {
  .calendar-app-toolbar { grid-template-columns: 1fr; }
  .calendar-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calendar-filter-bar .button { grid-column: 1 / -1; }
  .calendar-week-view,
  .calendar-month-view { min-width: 760px; }
}

@media (max-width: 767px) {
  .agenda-topbar { display: grid; }
  .calendar-filter-bar { grid-template-columns: 1fr; }
  .calendar-nav-group,
  .segmented-control { width: 100%; }
  .calendar-nav-group .button,
  .segmented-control button { flex: 1; }
  .calendar-time-row { grid-template-columns: 4rem minmax(0, 1fr); }
  .calendar-event-actions .button { width: auto; }
  .calendar-board { min-height: 28rem; }
}

@media (min-width: 800px) {
  .business-profile-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(17rem, 0.75fr);
  }

  .business-profile-sidebar {
    align-content: start;
  }

  .booking-business-summary {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .booking-business-summary .button {
    grid-column: auto;
  }
}

@media (max-width: 639px) {
  .business-profile-identity {
    align-items: start;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .business-profile-identity > .button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .profile-service-card {
    align-items: stretch;
    display: grid;
  }

  .profile-service-card .button {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .professional-card-header {
    display: grid;
  }

  .professional-card-actions,
  .professional-service-linker {
    width: 100%;
  }

  .professional-service-dropdown {
    margin-top: 0.5rem;
    max-height: none;
    position: static;
    width: 100%;
  }
}

@media (min-width: 1040px) {
  .availability-form-grid,
  .availability-results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .availability-section-heading {
    grid-template-columns: 1fr;
  }

  .schedule-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 479px) {
  .professional-card-identity {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .professional-avatar {
    height: 4.25rem;
    width: 4.25rem;
  }

  .professional-photo-preview {
    align-items: stretch;
    display: grid;
  }

  .professional-photo-preview .button {
    width: 100%;
  }
}


@media (max-width: 639px) {
  .profile-team-grid,
  .profile-information-grid {
    grid-template-columns: 1fr;
  }

  .profile-social-links .button {
    width: 100%;
  }
}


@media (max-width: 639px) {
  .customer-appointment-header {
    align-items: start;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .customer-appointment-header .appointment-status {
    grid-column: 1 / -1;
    justify-self: start;
  }
}