/* Shared mobile-first responsiveness for every HANDA-TAYO web module. */
:root { --ht-sidebar-width:240px; --ht-mobile-gutter:16px; --ht-touch-target:44px; --ht-safe-top:env(safe-area-inset-top,0px); --ht-safe-right:env(safe-area-inset-right,0px); --ht-safe-bottom:env(safe-area-inset-bottom,0px); --ht-safe-left:env(safe-area-inset-left,0px); }
*, *::before, *::after { box-sizing:border-box; }
html { width:100%; max-width:100%; min-width:0; overflow-x:hidden; scroll-behavior:smooth; }
body { width:100%; max-width:100%; min-width:0; min-height:100dvh; overflow-x:hidden; }
@supports (overflow:clip) { html, body { overflow-x:clip; } }
img, svg, video, canvas { max-width:100%; }
img, video { height:auto; }
button, [role="button"], a, input, select, textarea { -webkit-tap-highlight-color:transparent; }
button, input, select, textarea { max-width:100%; }
.layout, .main, .content, .panel, .card, .settings-card, .table-card, .chart-card, .profile-card, .resident-profile-card, .workspace, .grid, .grid-2, .grid-3, .grid-4 { min-width:0; max-width:100%; }
.main { width:calc(100% - var(--ht-sidebar-width)); max-width:none; }
.content { width:100%; max-width:none; }
.content > *, .panel > *, .card > *, .settings-card > *, .table-card > *, .chart-card > *, .topbar-left, .title, .panel-head > *, .panel-header > *, .card-header > *, .page-header > * { min-width:0; max-width:100%; }
.title h2, .title p, .page-title, .page-description, .panel-title, .panel-subtitle, .content h1, .content h2, .content h3, .content h4, .content p { overflow-wrap:anywhere; }
.form-grid, .register-grid, .details-grid, .profile-grid, .emergency-grid, .status-grid, .preparedness-grid, .analytics-grid, .reports-grid, .reports-summary-grid, .summary-grid, .stats-grid, .stats-mini-grid, .grid-2 { min-width:0; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { width:100%; }
input[type="checkbox"], input[type="radio"] { width:auto; max-width:none; }
textarea { resize:vertical; }
.table-wrapper, .table-wrap, .table-responsive, .ht-table-scroll { width:100%; max-width:100%; overflow-x:auto; overflow-y:hidden; overscroll-behavior-inline:contain; }
.ht-table-scroll { border-radius:inherit; }
.ht-table-scroll:focus-visible { outline:3px solid rgba(37,99,235,.28); outline-offset:3px; }
table { max-width:none; }
canvas { width:100% !important; height:auto !important; }
.modal, .register-modal, .security-code-modal, .password-reset-modal, .map-modal, .details-modal, .report-preview-modal, .dashboard-location-consent { padding-top:max(12px,var(--ht-safe-top)); padding-right:max(12px,var(--ht-safe-right)); padding-bottom:max(12px,var(--ht-safe-bottom)); padding-left:max(12px,var(--ht-safe-left)); }
.modal-content, .register-modal-card, .security-code-card, .password-reset-card, .map-modal-content, .details-modal, .report-preview-dialog, .dashboard-location-card { max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); overflow:auto; overscroll-behavior:contain; }
.profile-drawer { max-width:100vw; }
.map-container, #map, #hazardMap, #residentMap, #weatherMap, #incidentMap, #incidentResponseMap { max-width:100%; }
pre, code, .coordinate-display, .setup-key-row code { max-width:100%; overflow-wrap:anywhere; }

@media (max-width:1180px) {
  .content { padding-left:22px !important; padding-right:22px !important; }
  .stats-grid, .summary-grid, .reports-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .grid-3, .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .grid-2, .reports-grid, .analytics-grid, .workspace, .report-generator, .usage-layout { grid-template-columns:1fr !important; }
  .panel, .card, .settings-card, .table-card, .chart-card { max-width:100%; }
}

@media (max-width:920px) {
  body.ht-sidebar-open { overflow:hidden !important; touch-action:none; }
  .layout { display:block !important; width:100% !important; min-height:100dvh !important; }
  .sidebar { position:fixed !important; inset:0 auto 0 0 !important; left:-105% !important; z-index:1000 !important; display:flex !important; width:min(288px,86vw) !important; max-width:86vw !important; height:100dvh !important; flex-direction:column !important; overflow:hidden !important; overscroll-behavior:contain; transition:left .25s ease,transform .25s ease !important; padding-top:var(--ht-safe-top); padding-bottom:var(--ht-safe-bottom); }
  .sidebar.open { left:0 !important; transform:none !important; }
  .sidebar .nav { flex:1 !important; min-height:0 !important; overflow-x:hidden !important; overflow-y:auto !important; }
  .sidebar-top, .sidebar-bottom { flex:0 0 auto; }
  .sidebar-backdrop { position:fixed !important; inset:0 !important; z-index:999 !important; display:block !important; visibility:hidden; opacity:0 !important; pointer-events:none !important; background:rgba(15,23,42,.52) !important; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); transition:opacity .25s ease,visibility .25s ease !important; }
  .sidebar-backdrop.open { visibility:visible; opacity:1 !important; pointer-events:auto !important; }
  .main { width:100% !important; max-width:100% !important; min-height:100dvh; margin-left:0 !important; padding-left:0 !important; }
  .menu-btn { display:inline-grid !important; place-items:center; flex:0 0 auto; min-width:var(--ht-touch-target); min-height:var(--ht-touch-target); }
  .topbar { position:sticky; top:0; z-index:100; width:100%; flex-wrap:wrap; padding-top:max(14px,var(--ht-safe-top)) !important; padding-right:max(18px,var(--ht-safe-right)) !important; padding-left:max(18px,var(--ht-safe-left)) !important; background:rgba(255,255,255,.96); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
  .topbar-left { flex:1 1 auto; }
  .top-actions { flex:0 1 auto; }
  .content { width:100% !important; margin:0 !important; padding:20px max(18px,var(--ht-safe-right)) max(22px,var(--ht-safe-bottom)) max(18px,var(--ht-safe-left)) !important; }
  .page-header, .panel-head, .panel-header, .card-header, .section-header { gap:14px; }
  .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .full, .full-width, .register-full-width { grid-column:1/-1 !important; }
  .map-container, #map, #hazardMap, #residentMap, #weatherMap, #incidentMap, #incidentResponseMap { min-height:320px !important; height:clamp(320px,48dvh,480px) !important; }
  .profile-drawer { right:-105% !important; width:min(460px,100vw) !important; visibility:hidden; pointer-events:none; }
  .profile-drawer.open { right:0 !important; visibility:visible; pointer-events:auto; }
}

@media (max-width:768px) {
  :root { --ht-mobile-gutter:14px; }
  .topbar { padding:14px var(--ht-mobile-gutter) !important; gap:12px !important; }
  .title h2, .page-title { font-size:clamp(22px,6vw,28px) !important; line-height:1.15 !important; }
  .title p, .page-description { font-size:13px !important; line-height:1.45 !important; }
  .content { gap:16px !important; padding:16px var(--ht-mobile-gutter) max(18px,var(--ht-safe-bottom)) !important; }
  .panel, .card, .settings-card, .table-card, .chart-card, .resident-profile-card { padding:18px !important; border-radius:18px !important; }
  .stats-grid, .summary-grid, .reports-summary-grid, .stats-mini-grid, .status-grid, .preparedness-grid, .details-grid, .profile-grid, .emergency-grid, .analytics-grid, .grid-2, .grid-3, .grid-4, .reports-grid, .workspace, .report-generator, .usage-layout { grid-template-columns:1fr !important; }
  .form-grid, .register-grid { grid-template-columns:1fr !important; }
  .full, .full-width, .register-full-width { grid-column:auto !important; }
  .toolbar, .table-toolbar, .activity-log-toolbar, .permission-toolbar, .page-header, .panel-head, .panel-header, .section-header, .card-header, .profile-header, .resident-profile-actions { align-items:stretch !important; flex-direction:column !important; }
  .toolbar-left, .toolbar-right, .page-actions, .report-actions, .permission-actions, .application-settings-actions, .profile-actions, .form-actions, .modal-buttons, .modal-footer, .drawer-footer { width:100%; flex-wrap:wrap !important; }
  .toolbar-left > *, .toolbar-right > *, .page-actions > *, .report-actions > *, .permission-actions > *, .application-settings-actions > *, .profile-actions > *, .form-actions > * { flex:1 1 180px; }
  .search-box, .search-input { width:100% !important; min-width:0 !important; max-width:none !important; }
  .stat-card, .summary-card, .delivery-card { min-width:0 !important; }
  .stat-head { gap:12px; }
  .stat-value, .card-value { font-size:clamp(28px,9vw,38px) !important; }
  .icon-btn, .menu-btn, .modal-close, .close-btn, .map-close-btn, .password-toggle { min-width:var(--ht-touch-target); min-height:var(--ht-touch-target); }
  .btn, .primary-btn, .secondary-btn, .create-btn, .add-btn, .save-btn, .cancel-btn, .send-all-btn, .export-btn, .logout-btn { min-height:var(--ht-touch-target); }
  .ht-table-scroll, .table-wrapper, .table-wrap, .table-responsive { border-radius:14px !important; }
  .ht-table-scroll table, .table-wrapper table, .table-wrap table, .table-responsive table { display:table !important; width:max-content !important; min-width:720px !important; border-collapse:collapse !important; }
  .ht-table-scroll thead, .table-wrapper thead, .table-wrap thead, .table-responsive thead { display:table-header-group !important; }
  .ht-table-scroll tbody, .table-wrapper tbody, .table-wrap tbody, .table-responsive tbody { display:table-row-group !important; }
  .ht-table-scroll tr, .table-wrapper tr, .table-wrap tr, .table-responsive tr { display:table-row !important; padding:0 !important; border:0 !important; }
  .ht-table-scroll th, .ht-table-scroll td, .table-wrapper th, .table-wrapper td, .table-wrap th, .table-wrap td, .table-responsive th, .table-responsive td { display:table-cell !important; min-width:120px; padding:12px 14px !important; border-bottom:1px solid #e2e8f0 !important; white-space:nowrap; vertical-align:middle; }
  .ht-table-scroll td::before, .table-wrapper td::before, .table-wrap td::before, .table-responsive td::before { content:none !important; display:none !important; }
  .ht-table-scroll th:first-child, .ht-table-scroll td:first-child { position:sticky; left:0; z-index:1; background:var(--panel,#fff); }
  .table-actions, td.actions, td .actions { display:flex !important; gap:8px; flex-wrap:nowrap !important; }
  .table-actions button, td.actions button, td .actions button, .table-action-btn, .action-btn, .view-btn, .delete-btn, .archive-btn { min-width:max-content; min-height:40px; }
  .map-container, #map, #hazardMap, #residentMap, #weatherMap, #incidentMap, #incidentResponseMap { min-height:280px !important; height:clamp(280px,44dvh,400px) !important; border-radius:16px !important; }
  .legend, .map-controls { max-width:calc(100% - 20px); }
  .profile-drawer { top:0 !important; right:-105% !important; bottom:0 !important; left:auto !important; width:100% !important; max-width:100% !important; visibility:hidden; pointer-events:none; }
  .profile-drawer.open { right:0 !important; visibility:visible; pointer-events:auto; }
  .drawer-body { padding:18px !important; }
  .drawer-footer { padding:14px 18px max(14px,var(--ht-safe-bottom)) !important; }
  .activity-item, .history-item, .application-setting-item, .permission-item, .status-row { min-width:0; overflow-wrap:anywhere; }
  .score-ring { max-width:220px; margin-inline:auto; }
}

@media (max-width:560px) {
  html, body { min-width:0 !important; }
  .topbar { align-items:center !important; flex-direction:row !important; flex-wrap:wrap !important; }
  .topbar-left { width:auto; flex:1 1 220px; align-items:center; }
  .topbar .title p { display:none; }
  .top-actions { display:flex !important; width:auto !important; max-width:100%; gap:8px !important; align-items:center !important; margin-left:auto; flex-wrap:wrap !important; }
  .top-actions form { flex:0 1 auto; margin:0 !important; }
  .top-actions .logout-btn { width:auto !important; padding:10px 12px !important; }
  .top-actions .icon-btn { flex:0 0 var(--ht-touch-target); }
  .content { padding:14px 12px max(16px,var(--ht-safe-bottom)) !important; }
  .panel, .card, .settings-card, .table-card, .chart-card, .resident-profile-card { padding:15px !important; border-radius:16px !important; }
  .brand h1 { font-size:20px !important; }
  .brand p { font-size:11px !important; }
  .sidebar-top, .sidebar-bottom { padding-inline:14px !important; }
  .sidebar .nav button { min-height:44px !important; height:auto !important; padding:10px 12px !important; }
  .sidebar .profile { padding:12px !important; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { min-height:46px; font-size:16px !important; }
  input[type="checkbox"], input[type="radio"] { width:20px !important; height:20px !important; min-height:20px !important; flex:0 0 20px; }
  textarea { min-height:120px; }
  .modal, .register-modal, .security-code-modal, .password-reset-modal, .map-modal, .report-preview-modal, .dashboard-location-consent { align-items:flex-end !important; padding:0 !important; }
  .modal-content, .register-modal-card, .security-code-card, .password-reset-card, .map-modal-content, .details-modal, .report-preview-dialog, .dashboard-location-card { width:100% !important; max-width:100% !important; max-height:94dvh !important; margin:0 !important; border-radius:22px 22px 0 0 !important; padding:20px 16px max(20px,var(--ht-safe-bottom)) !important; }
  .details-modal { height:auto !important; }
  .modal-header, .drawer-header { position:sticky; top:0; z-index:2; background:inherit; }
  .modal-footer, .modal-buttons, .drawer-footer, .register-actions, .report-preview-footer { display:grid !important; grid-template-columns:1fr !important; gap:10px !important; }
  .modal-footer > *, .modal-buttons > *, .drawer-footer > *, .register-actions > *, .report-preview-footer > * { width:100% !important; }
  .toolbar-left > *, .toolbar-right > *, .page-actions > *, .report-actions > *, .permission-actions > *, .application-settings-actions > *, .profile-actions > *, .form-actions > * { flex-basis:100%; width:100%; }
  .stat-card, .summary-card { padding:16px !important; }
  .stat-badge, .summary-icon, .icon-box { width:52px !important; height:52px !important; flex-basis:52px !important; }
  .profile-card, .profile-header { text-align:left; }
  .profile-header { gap:14px; }
  .profile-avatar, .user-avatar { flex:0 0 auto; }
  .map-container, #map, #hazardMap, #residentMap, #weatherMap, #incidentMap, #incidentResponseMap { min-height:250px !important; height:clamp(250px,40dvh,340px) !important; }
  .map-control-btn { min-width:44px; min-height:44px; }
  .message-box { padding:14px !important; }
  .activity-item { grid-template-columns:auto minmax(0,1fr) !important; }
  .timeline-pagination { align-items:stretch !important; flex-direction:column !important; }
}

@media (max-width:380px) {
  :root { --ht-mobile-gutter:8px; }
  html, body { width:100% !important; min-width:0 !important; max-width:100% !important; }
  .topbar { gap:9px !important; padding:10px max(8px,var(--ht-safe-right)) 10px max(8px,var(--ht-safe-left)) !important; }
  .topbar-left { gap:8px !important; }
  .content { gap:12px !important; padding:10px max(8px,var(--ht-safe-right)) max(12px,var(--ht-safe-bottom)) max(8px,var(--ht-safe-left)) !important; }
  .panel, .card, .settings-card, .table-card, .chart-card, .resident-profile-card { min-width:0 !important; padding:13px !important; border-radius:14px !important; }
  .menu-btn { width:44px !important; height:44px !important; border-radius:13px !important; }
  .title h2, .page-title { font-size:20px !important; line-height:1.18 !important; }
  .title p, .page-description { font-size:12px !important; }
  .stat-value, .card-value { font-size:28px !important; }
  .stats-grid, .stats, .summary-grid, .reports-summary-grid, .stats-mini-grid, .status-grid, .preparedness-grid, .details-grid, .profile-grid, .emergency-grid, .analytics-grid, .analysis-grid, .grid, .grid-2, .grid-3, .grid-4, .reports-grid, .settings-grid, .permission-grid, .report-generator, .workspace, .hero-grid, .metrics-grid, .forecast-grid, .source-grid, .official-alert-grid, .assessment-facts, .usage-layout, .usage-metrics, .coordinate-grid, .evacuation-summary, .risk-ranking-card, .form-grid, .register-grid, .forecast-details, .dashboard-location-actions { grid-template-columns:minmax(0,1fr) !important; }
  .current-main { grid-template-columns:minmax(0,1fr) !important; }
  .toolbar, .table-toolbar, .activity-log-toolbar, .permission-toolbar, .panel-head, .panel-header, .section-header, .card-header, .card-top, .evacuation-actions, .location-actions, .risk-pagination, .risk-pagination-controls, .report-preview-header-actions { align-items:stretch !important; flex-direction:column !important; }
  .toolbar-left, .toolbar-right, .page-actions, .report-actions, .permission-actions, .application-settings-actions, .profile-actions, .form-actions, .modal-buttons, .modal-footer, .drawer-footer, .evacuation-actions, .location-actions { width:100% !important; }
  .toolbar-left > *, .toolbar-right > *, .page-actions > *, .report-actions > *, .permission-actions > *, .application-settings-actions > *, .profile-actions > *, .form-actions > *, .evacuation-actions > *, .location-actions > * { width:100% !important; min-width:0 !important; flex-basis:100% !important; }
  .search-box, .search-input, .filter-box, .toolbar select, .toolbar button, .permission-toolbar select { width:100% !important; min-width:0 !important; max-width:none !important; }
  .permission-group, .application-settings-group { padding:12px !important; }
  .profile-badge { width:72px !important; height:72px !important; flex-basis:72px !important; font-size:32px !important; }
  .stat-badge, .summary-icon, .icon-box { width:46px !important; height:46px !important; flex-basis:46px !important; }
  .weather-symbol { width:52px !important; height:52px !important; }
  .map-container, #map, #hazardMap, #residentMap, #weatherMap, #incidentMap, #incidentResponseMap { min-height:220px !important; height:clamp(220px,38dvh,280px) !important; }
  .map-controls { right:8px !important; left:8px !important; width:auto !important; max-width:calc(100% - 16px) !important; }
  .map-control-btn { min-width:0 !important; min-height:44px !important; flex:1 1 88px; white-space:normal !important; }
  .legend, .legend.compact, .distance-info, .live-location { right:8px !important; left:8px !important; width:auto !important; max-width:calc(100% - 16px) !important; }
  .ht-table-scroll table, .table-wrapper table, .table-wrap table, .table-responsive table { min-width:640px !important; }
  .ht-table-scroll th, .ht-table-scroll td, .table-wrapper th, .table-wrapper td, .table-wrap th, .table-wrap td, .table-responsive th, .table-responsive td { min-width:108px; padding:10px 11px !important; }
  .modal-content, .register-modal-card, .security-code-card, .password-reset-card, .map-modal-content, .details-modal, .report-preview-dialog, .dashboard-location-card { min-width:0 !important; max-height:100dvh !important; min-height:0 !important; padding:16px 12px max(16px,var(--ht-safe-bottom)) !important; border-radius:18px 18px 0 0 !important; }
  .toast { right:8px !important; left:8px !important; width:auto !important; min-width:0 !important; max-width:calc(100vw - 16px) !important; }
  .activity-log-pagination > div { grid-template-columns:minmax(0,1fr) !important; }
  .error-state, pre, code, .coordinate-display { min-width:0 !important; max-width:100% !important; overflow-wrap:anywhere; white-space:normal; }
}

@media (hover:none) and (pointer:coarse) {
  button, .btn, .action-btn, .table-action-btn, .nav button, a[role="button"] { min-height:44px; }
  .nav button:hover, button:hover { transform:none !important; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}

/* Keep the complete navigation and user profile visible on short desktop displays. */
@media (min-width:921px) and (max-height:720px) {
  .sidebar-top { padding:12px 14px 10px !important; }
  .sidebar .brand-logo, .sidebar .logo { width:40px !important; height:40px !important; flex-basis:40px !important; }
  .sidebar .brand-logo img, .sidebar .logo img { width:30px !important; height:30px !important; }
  .sidebar .nav { min-height:0 !important; gap:2px !important; padding:8px 10px !important; overflow-y:auto !important; }
  .sidebar .nav button, .sidebar .nav a { min-height:34px !important; padding:6px 9px !important; }
  .sidebar-bottom { padding:10px 12px !important; }
  .sidebar .avatar { width:34px !important; height:34px !important; flex-basis:34px !important; }
}

/* Map actions become one compact hamburger at the shared 920px shell breakpoint. */
.map-controls-toggle { display:none; }
.ht-map-controls-panel { display:contents; }
.ht-map-control-label { display:none; }

@media (max-width:920px) {
  .map-controls.ht-map-controls {
    top:max(10px,var(--ht-safe-top)) !important;
    right:max(10px,var(--ht-safe-right)) !important;
    bottom:auto !important;
    left:auto !important;
    display:block !important;
    width:44px !important;
    max-width:none !important;
    padding:0 !important;
    overflow:visible !important;
    transform:none !important;
    background:transparent !important;
    border:0 !important;
    border-radius:12px !important;
    box-shadow:none !important;
    z-index:900 !important;
  }
  .map-container .legend,
  .map-container .legend.compact { z-index:800 !important; }
  .map-controls-toggle {
    display:inline-flex !important;
    width:44px;
    height:44px;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:4px;
    padding:0;
    cursor:pointer;
    color:#0f172a;
    background:rgba(255,255,255,.97);
    border:1px solid #dbe4ee;
    border-radius:12px;
    box-shadow:0 8px 22px rgba(15,23,42,.16);
  }
  .map-controls-toggle span {
    display:block;
    width:18px;
    height:2px;
    background:currentColor;
    border-radius:999px;
    transition:transform .2s ease,opacity .2s ease;
  }
  .map-controls.open .map-controls-toggle span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
  .map-controls.open .map-controls-toggle span:nth-child(2) { opacity:0; }
  .map-controls.open .map-controls-toggle span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
  .ht-map-controls-panel {
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    display:none !important;
    width:min(300px,calc(100vw - 24px));
    max-height:min(54dvh,300px);
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
    padding:8px;
    overflow-y:auto;
    overscroll-behavior:contain;
    background:rgba(255,255,255,.98);
    border:1px solid #dbe4ee;
    border-radius:14px;
    box-shadow:0 14px 32px rgba(15,23,42,.2);
  }
  .map-controls.open .ht-map-controls-panel { display:grid !important; }
  .ht-map-controls-panel .map-control-btn {
    display:flex !important;
    width:100% !important;
    min-width:0 !important;
    min-height:44px !important;
    align-items:center;
    justify-content:flex-start;
    gap:7px;
    padding:8px 9px !important;
    font-size:17px !important;
    line-height:1.2;
    white-space:normal !important;
    background:#fff;
    border:1px solid #e2e8f0 !important;
    border-radius:10px;
  }
  .ht-map-controls-panel .map-control-btn:hover,
  .ht-map-controls-panel .map-control-btn:focus-visible { background:#f1f7fb; }
  .ht-map-controls-panel .map-control-btn[hidden] { display:none !important; }
  .ht-map-control-label {
    display:block;
    min-width:0;
    color:#334155;
    font-size:11px;
    font-weight:700;
    text-align:left;
    overflow-wrap:anywhere;
  }
}

@media (max-width:920px) and (max-height:560px) {
  .map-container, #map, #hazardMap, #residentMap, #weatherMap, #incidentMap, #incidentResponseMap {
    min-height:220px !important;
    height:clamp(220px,54dvh,300px) !important;
  }
}