.container-banner img {
  width: 100%;
}

#system_box {
  margin-bottom: 15px;
}

.system_image img {
  width: 100%;
}

#series_container #range_title {
  background-color: #0892B9;
  color: white;
  text-align: center;
  padding: 5px;
  text-transform: uppercase;
}


@supports (display: grid)
.main-bottom {
  display: grid;
  grid-template-areas:
  ". userl  user2  user3  user4 .";
  grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 19.875rem)) [main-end] minmax(0, 1fr) [full-end];
  grid-gap: 0 1em;
}

:root {
  --cassiopeia-font-family-body: "Roboto", sans-serif;
  --cassiopeia-font-family-headings: "Barlow Semi Condensed", Roboto, sans-serif;
  --cassiopeia-font-weight-headings: 600;
  --cassiopeia-font-weight-normal: 400;
}


}
@media (min-width: 1200px) {
  h3.card-header, .h3.card-header {
    font-size: 1.5rem;
    font-family: "Barlow Semi Condensed";
    font-weight: 500;
    letter-spacing: .5px;
  }

    .card-header  {
      color: white;
      background-color: #0193BC;
  }
}
.card-header  {
  color: white;
  background-color: #0193BC;
}
.card {
  width: 100%;
}


.com-content-article__body .system_image img {
  width: 100%;
  object-fit: cover;
  width: 100%;
  height: 235px;
  object-position: left;
  transition: 300ms;
}

.com-content-article__body .system_image img:hover {
  object-position: right;
  transition: 300ms;
}

.com-content-article__body #system_box {
  margin-bottom: 15px;
  width: 32%;
  float: left;
  margin-right: 1%;
}

@media (max-width: 960px) {
.com-content-article__body .system_image img {
  width: 100%;
  object-fit: cover;
  width: 100%;
  height: 360px;
  object-position: left;
  transition: 300ms;
}
  
  .com-content-article__body #system_box {
    margin-bottom: 15px;
    width: 49%;
    float: left;
    margin-right: 1%;
  }
}
  
@media (max-width: 480px) {
  
  .com-content-article__body .system_image img {
    width: 100%;
    object-fit: cover;
    width: 100%;
    height: 360px;
    object-position: left;
    transition: 300ms;
  }

  
}

.com-content-article__body #system_desc {
 
  xxbackground-color: #ffffffa4;
  width: 100%;
  
  width: 100%;
  background-color: #edf7fa;
  padding: 5px;
    padding-right: 5px;
  height: 62px;
  padding-right: 10px;
}

#series_container {
  margin-top: 30px;
}
#range_desc {
  margin-top: 30px;
  margin-bottom: 30px;
}