:root {
  --title-color: #172b4d;
  --text-color: #344563;
  --role-color: #7a869a;
  --tags-color: #7a869a;
  --button-txt-color: #396df2;
  --tags-btn-background-color: #ebebff;
}

.img-logo,
.img-holder {
  width: 100%;
}

.works {
  margin: 0 auto;
  display: grid;
  grid-gap: 88px;
  grid-template-columns:
    repeat(
      auto-fill,
      minmax(-moz-calc(100% - 40px), 90vw)
    );
  grid-template-columns: repeat(auto-fill, minmax(calc(100% - 40px), 84vw));
  grid-template-rows: repeat(auto-fill, repeat(4, 1fr));
  place-items: center center;
}

.work {
  border: 1px solid #dfe1e6;
  border-radius: 16px;
  padding: 16px;
  display: -webkit-box;
  display: -moz-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  flex-flow: column wrap;
  background-color: #fff;
}

.desc {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  flex-flow: column wrap;
  justify-content: space-around;
}

.desc > * {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  flex: 1 1 calc(100% - 20px);
  margin: 15px 0 0;
  padding: 0;
}

.desc h2 {
  font-weight: 800;
  color: var(--title-color);
  font-size: 33px;
  line-height: 44px;
}

.tags ul li {
  padding: 0;
}

.details {
  display: -webkit-box;
  display: -moz-box;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  align-items: center;
  gap: 12px;
}

.details p {
  font-size: 15px;
  line-height: 16px;
  font-style: normal;
  font-weight: 700;
  color: var(--role-color);
}

.details p:nth-child(1) {
  color: var(--text-color);
}

.statement {
  color: var(--text-color);
  font-weight: 500;
  font-size: 17px;
  line-height: 24px;
}

.tags button {
  background: var(--tags-btn-background-color);
  border: none;
  border-radius: 5px;
  color: var(--button-txt-color);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.03em;
  font-style: normal;
}

.tags ul {
  display: -webkit-box;
  display: -moz-box;
  display: flex;
  gap: 12px;
}

.action button {
  border: 1px solid #6070ff;
  border-radius: 8px;
  color: #6070ff;
  padding: 12px;
  background: none;
  font-size: 17px;
  text-align: center;
  font-weight: 500;
}

.work5 {
  display: none;
}

.hide-small {
  display: none;
}

.hide-big {
  display: flex;
}

@media screen and (min-width: 768px) {
  .works > * {
    width: 93%;
    margin: 0 142px;
  }

  .work {
    flex-flow: row nowrap;
    gap: 14px;
    padding: 24px;
  }

  .work > * {
    flex: 1;
  }

  .img-logo {
    width: 100%;
    height: 100%;
  }

  .desc {
    padding: 0 34px;
  }

  .work1 {
    order: 3;
  }

  .work1 button.project {
    background: #4053fc;
    color: white;
  }

  .work2 {
    order: 4;
    flex-direction: row-reverse;
  }

  .work3 {
    display: none;
  }

  .work4 {
    order: 2;
    flex-direction: row-reverse;
  }

  .img-hand-cursor {
    float: right;
  }

  .work5 {
    display: flex;
    order: 1;
  }

  .work5 ul li button {
    text-transform: lowercase;
  }

  .hide-small {
    display: flex;
  }

  .hide-big {
    display: none;
  }
}