/* Mobile First Breakpoints */

/* Extra Small Devices (phones, less than 576px) */
/* Default styles - no media query needed */

/* Small Devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  
}

/* Medium Devices (tablets, 768px and up) */
@media (min-width: 768px) {
  
}

/* Large Devices (desktops, 992px and up) */
@media (min-width: 992px) {
  
}

/* Extra Large Devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  
}

/* Extra Extra Large Devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  
}

/* Ultra Wide Displays (1920px and up) */
@media (min-width: 1920px) {
  
}
@media (max-width: 899px) {
    .ship_holo_display {
        top: 80px;
        bottom: 80px;
    }
}
/* Max-Width Breakpoints (for specific ranges) */

/* Extra Small Only (max 575px) */
@media (max-width: 575px) {
  
}

/* Small Only (max 767px) */
@media (max-width: 767px) {
   .frame {
     flex-direction: column;
     gap: 1em;
     padding: 20px;
     margin-bottom: 1em;
   }
   .fleet_view_nav, .holo_sub_nav {
    position: sticky;
    transform: none;
    top: 5em;
   }
   .holo_sub_nav {
    top: 7em;
   }
}

/* Medium Only (768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  
}

/* Large Only (992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  
}

/* Orientation Breakpoints */

/* Landscape Orientation */
@media (orientation: landscape) {
  
}

/* Portrait Orientation */
@media (orientation: portrait) {
  
}

/* High DPI Displays (Retina) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  
}

/* Print Styles */
@media print {
  
}

@media screen and (min-width: 40em) {
	.list__item {
		grid-template-columns: auto 1fr 1fr 1fr auto;
	}
	
}

@media screen and (min-width: 53em) {
	.frame {
		grid-template-columns: auto auto auto auto 1fr;
	}
	.frame #cdawrap, 
	.frame__nav {
		justify-self: end;
	}
	.frame #cdawrap {
	  text-align: right;
	}
}

@media screen and (min-width: 73em) {
	.list__item {
		grid-template-columns: 100px 30% 1fr 1fr 1fr;
	}
	.demo-4 .list__item {
		grid-template-columns: 100px 1fr 1fr auto ;
	}
	.list__item-col:last-child {
		justify-self: end;
	}
}