departments.css

section {
  padding: calc(var(--basic_size) * 2) 0;
}
/* title styling */
.max_title {
  font-size: var(--font_title_size);
  text-align: center;
  font-weight: bolder;
  margin-bottom: 25px;
  color: var(--yellow-color);
  margin-top: calc(var(--basic_size) * 12);
}

/* department styling */
.department {
  display: flex;
  border: var(--yellow-color) var(--basic_size) solid;
  border-radius: calc(var(--basic_size) * 5);
  padding-bottom: calc(var(--basic_size) * 3);
  margin-top: calc(var(--basic_size) * 2);
  min-width: calc(var(--basic_size) * 30);
  margin-left: -50px !important;
  padding-left: calc(var(--basic_size) * 2);
  padding-right: calc(var(--basic_size) * 2);
}

.department .column-left {
  width: 50%;
}

.department .column-left img {
  padding-top: calc(var(--basic_size) * 2);
  border-radius: calc(var(--basic_size) * 5);
  min-width: calc(var(--basic_size) * 23);
  @media (min-width: 400px;) {
    padding-left: calc(var(--basic_size) * 2);
  }
}

.department .column-right {
  width: 50%;
  /* padding-left: calc(var(--basic_size) * 2); */
}

.department .column-right .subtitle {
  text-align: center;
  font-weight: bolder;
  font-size: 28px;
  font-family: monospace;
  color: var(--yellow-color);
  margin-bottom: calc(var(--basic_size) * 2);
  margin-top: calc(var(--basic_size) * 4);
}

.department .column-right .text {
  color: var(--yellow-color);
  margin-top: 5px;
}

.department .column-right .areas {
  margin-left: 25px;
}

.department .column-right .skills {
  margin-left: 25px;
}

/* responsive styling */
@media (max-width: 1300px) {
  .department {
    display: block;
  }

  .department .column-left {
    width: 100%;
    text-align: center;
  }

  .department .column-left img {
    width: 80%;
  }

  .department .column-right {
    width: 100%;
  }
}