.item7-col-w {
  display: flex;
  justify-content: center;
  flex: 0 0 100%;
  max-width: 100%;
}

.item7-col {
  display: flex;
  flex: 0 0 20%;
  max-width: 20%;
  padding-right: 15px;
  padding-left: 15px;
  padding-bottom: 30px;
}

.item7 {
  flex: 1;
  border: 1px solid var(--med-gray2);
  border-radius: var(--border-radius);
  overflow: hidden;
  background-color: white;
}

.item7-image {
  max-height: 356px;
  overflow: hidden;
}

.item7-image img {
  display: block;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.item7-content {
  padding: 15px;
  background-color: white;
}

.item7--title {
  font-size: 18px;
  color: var(--blue);
  font-weight: bold;
  text-align: center;
}

.item7--desc {
  font-size: 16px;
  color: var(--dark-gray);
  margin-top: 5px;
  text-align: center;
}

.black-yellow .item7 {
  background-color: #000;
  border-color: #000;
}
.black-yellow .item7-content {
  background-color: #000;
}
.black-yellow .item7--desc,
.black-yellow .item7--title {
  color: yellow;
}

@media screen and (max-width: 1199.98px) {
  .item7-col {
    flex: 0 0 25%;
    max-width: 25%;
  }
}
@media screen and (max-width: 991.98px) {
  .item7-col {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}
@media screen and (max-width: 767.98px) {
  .item7-col {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media screen and (max-width: 575.98px) {
  .item7-col {
    flex: 0 0 80%;
    max-width: 80%;
  }
}
@media screen and (max-width: 379.98px) {
  .item7-col {
    flex: 0 0 90%;
    max-width: 90%;
  }
}
@media screen and (max-width: 299.98px) {
  .item7-col {
    flex: 0 0 100%;
    max-width: 100%;
  }
}