.projects {
  position: relative;
  font-family: "Montserrat", var(--font-main);
  background: var(--color-bg-footer);
}
.projects * {
  box-sizing: border-box;
}
.projects a {
  color: inherit;
  text-decoration: none;
}
.projects svg {
  display: block;
}
.projects a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.projects__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 76px var(--container-pad) 90px;
}

.projects__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px;
  margin-bottom: 50px;
}
.projects__heading {
  position: relative;
  padding-left: 34px;
  flex: 0 0 auto;
}
.projects__brand {
   left: 0;
    top: 2px;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: 0.32em;
    color: #FFFFFF1A;
    opacity: 0.55;
    display: inline-flex;
    white-space: nowrap;
}

.projects__brand svg{
  margin-right: 30px;
}
.projects__title {
 margin: 0;
    color: var(--color-text);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.04;
    letter-spacing: -4%;
    font-size: 85px;
    display: flex;
    flex-direction: column;
}
.projects__note {
  max-width: 830px;
    padding-top: 50px;
    font-size: 16px;
    line-height: 100%;
    color: white;
    padding-left: 15px;
    height: 80px;
    font-family: "Montserrat", var(--font-main);
}
.projects__note p {
  margin: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    padding-left: 15px;
    font-family: "Montserrat", var(--font-main);
    line-height: 1.4;
}

.projects__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-divider);
}
.projects__list li {
    background: #182531;
    margin-bottom: 5px;
}

.project-row {
  height: 165px;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0px 30px;
    cursor: pointer;
    transition: background-color var(--transition-base);
}
.project-row__num {
 flex: 0 0 auto;
    font-size: 18px;
    font-weight: 400;
    color: #FFFFFF66;
    transition: color var(--transition-base);
    padding-bottom: 46px;
    margin-right: 25px;
}
.project-row__title {
  flex: 0 0 auto;
    width: 590px;
    margin: 0;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -4%;
    text-transform: uppercase;
    color: var(--color-text);
    transition: color var(--transition-base);
}
.project-row__desc {
  flex: 1 1 auto;
    font-size: 16px;
    margin-left: 100px;
    line-height: 1.4;
    color: var(--color-text-muted);
    transition: color var(--transition-base);
    font-family: "Montserrat", var(--font-main);
}
.project-row__cta{
    position:relative;
    margin-left: 76px;
    width:227px;
    height:100px;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;
}

.project-row__cta-border{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    overflow:visible;
}

.project-row__cta-border path{
    fill:transparent;
    stroke:rgba(255,255,255,.4);
    stroke-width:1;

    transition:.3s;
}

.project-row__cta-content{
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 29px;
    color: #FFFFFF66;
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    font-family: "Montserrat", var(--font-main);
    transition: .3s;
}

.project-row__cta-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-base), transform var(--transition-base);
}
.project-row__cta-icon svg {
  width: 11px;
  height: 11px;
}

.project-row__cta::before{
    content:"";
    position:absolute;
    inset:0;

    background:#B69259;

    clip-path:path("M227.5 100.5H17.1098L0.5 83.3125V0.5H212.274L227.5 17.6875V100.5Z");

    opacity:0;

    transition:.3s;
}

.project-row__cta:hover::before{
    opacity:1;
}

.project-row__cta:hover .project-row__cta-border path{
    stroke:transparent;
}

.project-row__cta:hover .project-row__cta-content .project-row__cta-icon{
    color: white;
}


/* ===================== Планшет ===================== */
@media (max-width: 992px) {
  .projects__head {
    flex-direction: column;
    gap: 18px;
  }
  .project-row {
    flex-wrap: wrap;
    gap: 10px 24px;
    height: max-content;
    padding: 10px;
  }
  .project-row__title {
    width: auto;
    flex: 1 1 260px;
  }
  .project-row__desc {
    flex: 1 1 100%;
    order: 3;
    max-width: 100%;
  }
  .project-row__cta {
    order: 4;
    margin-left: 0px;
  }

  .projects__title{
    font-size: 40px;
    line-height: 1.4;
  }

  .projects__note{
    font-size: 16px;
    height: max-content;
  }
}

/* ===================== Мобильные ===================== */
@media (max-width: 640px) {
  .projects__container {
    padding: 44px 20px 56px;
  }
  .projects__heading {
    padding-left: 26px;
  }
  .projects__brand svg{
  margin-right: 12px;
  width: 96px;
}
  .projects__note p{
    max-width: 100%;
    font-size: 16px;
    bottom: 25px;
  }
  .project-row {
    display: contents;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 24px 4px;
  }
  .project-row__num {
    font-size: 13px;
  }
  .project-row__title {
    font-size: 20px;
    margin-top: 10px;
  }
  .project-row__desc {
    max-width: 100%;
    font-size: 15px;
        margin-top: 10px;
        line-height: 1.4;
        margin-left: 0px;
  }
  .project-row__cta {
    margin-top: 20px;
    width: 100%;
  }

  .projects__list li{
    height: max-content;
    padding: 10px;
    margin-bottom: 10px;
  }
}