/* Shared "Deploy Any Operating System" logo grid.
   Flex + justify-content:center so an incomplete last row is centered. */
.os-grid.os-grid--logos{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
  margin-top:44px;
}
.os-grid.os-grid--logos > .oscard{
  box-sizing:border-box;
  flex:0 0 calc((100% - 80px) / 6);
  width:calc((100% - 80px) / 6);
  max-width:calc((100% - 80px) / 6);
}

/* Windows / fewer-logo variant: 4 across */
.os-grid.os-grid--logos.os-grid--windows{
  max-width:920px;
  margin-left:auto;
  margin-right:auto;
}
.os-grid.os-grid--logos.os-grid--windows > .oscard{
  flex:0 0 calc((100% - 48px) / 4);
  width:calc((100% - 48px) / 4);
  max-width:calc((100% - 48px) / 4);
}

@media (max-width:1180px){
  .os-grid.os-grid--logos > .oscard{
    flex:0 0 calc((100% - 48px) / 4);
    width:calc((100% - 48px) / 4);
    max-width:calc((100% - 48px) / 4);
  }
}
@media (max-width:980px){
  .os-grid.os-grid--logos > .oscard{
    flex:0 0 calc((100% - 32px) / 3);
    width:calc((100% - 32px) / 3);
    max-width:calc((100% - 32px) / 3);
  }
  .os-grid.os-grid--logos.os-grid--windows{
    max-width:560px;
  }
  .os-grid.os-grid--logos.os-grid--windows > .oscard{
    flex:0 0 calc((100% - 16px) / 2);
    width:calc((100% - 16px) / 2);
    max-width:calc((100% - 16px) / 2);
  }
}
@media (max-width:680px){
  .os-grid.os-grid--logos > .oscard,
  .os-grid.os-grid--logos.os-grid--windows > .oscard{
    flex:0 0 calc((100% - 16px) / 2);
    width:calc((100% - 16px) / 2);
    max-width:calc((100% - 16px) / 2);
  }
  .os-grid.os-grid--logos.os-grid--windows{
    max-width:none;
  }
}