/* === How Work === */

.how-work {
  padding: 50px 0 80px;
  position: relative;
}

.how-work::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 50%;
  left: 0;
  right: 0;
  background-color: var(--secondary-background);
  z-index: -1;
}

.how-work .title {
  text-align: center;
  margin-bottom: 58px;
}

.how-work-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 35px;
}

.how-work-item {
  width: calc((100% - 70px) / 3);
}

.how-work-item img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  margin-bottom: 20px;
  border-radius: var(--border-radius-secondary);
}

.how-work-item .descr {
  display: flex;
  gap: 10px;
}

.how-work-item .descr span {
  font-size: 30px;
  font-weight: 300;
}

@media screen and (max-width: 1024px) {
  .how-work-item {
    width: calc((100% - 35px) / 2);
  }
}

@media screen and (max-width: 768px) {
  .how-work-item {
    width: 100%;
  }
}

/* === Our History === */

.our-history {
  padding: 80px 0 160px;
}

.our-history-content {
  width: calc((100% - 80px) / 2);
}

.our-history-content .title {
  margin-bottom: 25px;
}

.our-history-content .descr:not(:last-child) {
  margin-bottom: 10px;
}

.our-history-img {
  width: calc((100% - 80px) / 2);
  border-radius: var(--border-radius-primary);
}

@media screen and (max-width: 768px) {
  .our-history-img,
  .our-history-content {
    width: 100%;
  }
}