.ds-projects{
  --pj-top:   2.24;
  --pj-gap:   0.184;
  --pj-lines: 3;
  --pj-note-em: 44.6;

  --pj-pad:   clamp(16px, 2.778vw, 40px);
  --pj-stack: clamp(14px, 1.7vw, 24px);

  --pj-cards-gap:  clamp(24px, 6.9vh, 71px);
  --pj-cards-min:  28px;
  --pj-btn-gap:    clamp(24px, 7.2vh, 74px);
  --pj-foot:       clamp(20px, 5.1vh, 52px);

  --pj-tall: calc(var(--guide-fs-title) * 1.2
                  + var(--pj-stack)
                  + var(--pj-lines) * var(--guide-fs-small) * 1.4);

  --pj-cols:     5;
  --pj-grid-gap: 4px;
  --pj-old-gap:  clamp(14px, 2.5vw, 36px);
  --pj-col-x: calc(var(--pj-pad) + var(--pj-tall) * (1 + var(--pj-gap)));
  --pj-row-w: calc(100% - var(--pj-col-x) - var(--pj-pad));
  --pj-lift: 0px;

  --pj-ratio:   1.1657;
  --pj-name-fs: clamp(13px, 1.1vw, 17px);
  --pj-name-h:  calc(var(--pj-name-fs) * 3.04);
  --pj-btn-h:   calc(var(--guide-fs-btn) * 1.2);

  position: absolute;
  inset: 0;
  z-index: 2;
}

.ds-projects__row{
  position: absolute;
  top: calc(var(--pj-top) * var(--ds-cell) - var(--pj-lift));
  left:  var(--pj-pad);
  right: var(--pj-pad);

  display: flex;
  align-items: flex-start;
  gap: calc(var(--pj-gap) * var(--pj-tall));
}

.ds-projects .ds-eye{
  --ds-eye-size: var(--pj-tall);
  align-self: flex-start;
}

.ds-projects__text{
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: var(--pj-stack);
}

.ds-projects__head{
  position: relative;
  display: inline-flex;
  align-self: flex-start;
  font-size: var(--guide-fs-title);

  height: calc(var(--guide-fs-title) * 1.2);
}

.ds-projects .ds-title{
  --ds-title-size: var(--guide-fs-title);
  --ds-title-leading: 1.2;
  margin: 0;
}

.ds-projects__arrow{
  position: absolute;
  left: 100%;
  top: -.3em;
  width: 3.22em;
  height: auto;
  max-width: none;
  pointer-events: none;

  z-index: -1;
}

.ds-projects__note{
  display: flex;
  align-items: stretch;
  gap: 1.3em;

  font-size: var(--guide-fs-small);
  width: calc(var(--pj-note-em) * 1em);
  max-width: 100%;
}

.ds-projects__rule{
  flex: 0 0 auto;
  width: .2em;
  background: var(--ds-text-color);
}

.ds-projects__body{
  margin: 0;
  font-family: var(--ds-font-alt);
  font-weight: 300;
  line-height: 1.4;
  color: var(--ds-text-color);
}

.ds-projects__promo{
  --pj-promo-fs: calc(var(--guide-fs-small) * 1.05);
  --pj-pad-block: 2px;

  position: absolute;
  right:  calc(100% - var(--pj-col-x) - var(--pj-row-w));
  bottom: calc(100% - var(--pj-top) * var(--ds-cell) + var(--pj-lift) - var(--pj-tall));
  z-index: 3;

  display: inline-flex;
  align-items: center;
  gap: .75em;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ds-text-color);

  font-family: "Pixelify Sans", var(--ds-font-alt);
  font-size: var(--pj-promo-fs);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .02em;
  text-align: right;
  white-space: nowrap;
  cursor: pointer;
}

.ds-projects__promo-text{ display: block; }

@supports (width: round(1.5px, 1px)){
  .ds-projects__promo{
    --pj-pad-block: max(2px, round(nearest, calc(var(--pj-promo-fs) * .16), 1px));
  }
}

.ds-projects__pad{
  display: block;
  flex: 0 0 auto;
  width:  calc(18 * var(--pj-pad-block));
  height: calc(10 * var(--pj-pad-block));
  transition: transform .18s steps(2, end);
}

.ds-projects__promo:hover .ds-projects__pad,
.ds-projects__promo:focus-visible .ds-projects__pad{
  transform: translateY(calc(-1 * var(--pj-pad-block)));
}

.ds-projects__promo-text{
  text-decoration: underline transparent;
  text-decoration-thickness: var(--pj-pad-block);
  text-underline-offset: .4em;
  transition: text-decoration-color .15s steps(2, end);
}
.ds-projects__promo:hover .ds-projects__promo-text,
.ds-projects__promo:focus-visible .ds-projects__promo-text{
  text-decoration-color: currentColor;
}

.ds-projects__promo:focus-visible{
  outline: 2px solid var(--ds-focus-color);
  outline-offset: 6px;
}

@media (prefers-reduced-motion: reduce){
  .ds-projects__pad,
  .ds-projects__promo-text{ transition: none; }
}

.ds-projects__rest{
  position: absolute;
  left:  var(--pj-col-x);
  right: var(--pj-pad);
  top: calc(var(--pj-top) * var(--ds-cell) + var(--pj-tall) + var(--pj-cards-gap));
  bottom: var(--pj-foot);
  container-type: size;

  --pj-avail: calc(100cqh - var(--pj-name-h) - var(--pj-btn-gap) - var(--pj-btn-h));
  --pj-cap:   calc(var(--pj-avail) * var(--pj-ratio));

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--pj-btn-gap);
}

.ds-projects__grid{
  flex: 0 0 auto;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;

  display: grid;
  grid-template-columns: repeat(var(--pj-cols),
    min((100cqw - (var(--pj-cols) - 1) * var(--pj-grid-gap)) / var(--pj-cols), var(--pj-cap)));
  justify-content: start;
  column-gap: var(--pj-grid-gap);
  align-items: start;
}

.ds-projects .ds-action{ flex: 0 0 auto; }

.ds-card{
  display: block;
  color: var(--ds-text-color);
  text-decoration: none;
  text-align: center;
  outline: none;
}

.ds-card__media{
  display: block;
  width: 100%;
  aspect-ratio: var(--pj-ratio);

  overflow: hidden;
  background: rgb(0 0 0 / .1);
  transition: transform .45s cubic-bezier(.15, .75, .5, 1);
}

.ds-card__media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s cubic-bezier(.15, .75, .5, 1);
}

.ds-card__name{
  display: block;
  padding-top: 1.64em;

  font-family: "Rock Salt", cursive;
  font-size: var(--pj-name-fs);
  font-weight: 400;
  line-height: 1.4;

  transform-origin: 50% 0;
  transition: transform .3s var(--ds-ease-out);
}

.ds-card:hover .ds-card__media,
.ds-card:focus-visible .ds-card__media{ transform: translateY(-4px); }
.ds-card:hover .ds-card__media img,
.ds-card:focus-visible .ds-card__media img{ transform: scale(1.1); }
.ds-card:hover .ds-card__name,
.ds-card:focus-visible .ds-card__name{ transform: scale(1.09); }

.ds-card:focus-visible .ds-card__media{
  outline: 2px solid var(--ds-focus-color);
  outline-offset: 4px;
}

@media (hover: none){
  .ds-card:hover .ds-card__media,
  .ds-card:hover .ds-card__media img,
  .ds-card:hover .ds-card__name{ transform: none; }
}

@media (prefers-reduced-motion: reduce){
  .ds-card__media,
  .ds-card__media img,
  .ds-card__name{ transition: none; }
}

@media (min-width: 1001px){
  .ds-projects{
    --pj-rest-h:  calc(var(--ds-sec-h) - var(--pj-top) * var(--ds-cell) - var(--pj-tall)
                       - var(--pj-cards-gap) - var(--pj-foot));
    --pj-avail-v: calc(var(--pj-rest-h) - var(--pj-name-h) - var(--pj-btn-gap) - var(--pj-btn-h));
    --pj-old-v:   min((100vw - var(--pj-col-x) - var(--pj-pad)
                       - (var(--pj-cols) - 1) * var(--pj-old-gap)) / var(--pj-cols),
                      var(--pj-avail-v) * var(--pj-ratio));
    --pj-room-v:  calc(var(--pj-avail-v)
                       - max(0px, (var(--pj-avail-v) - var(--pj-old-v) / var(--pj-ratio)) / 2));
    --pj-new-v:   calc((100vw - var(--pj-col-x) - var(--pj-pad)
                       - (var(--pj-cols) - 1) * var(--pj-grid-gap)) / var(--pj-cols));
    --pj-spare:   max(0px, var(--pj-cards-gap) - var(--pj-cards-min));
    --pj-lift: clamp(0px, var(--pj-new-v) / var(--pj-ratio) - var(--pj-room-v) - var(--pj-spare),
                     .2 * var(--ds-cell));
    --pj-cap-v:   calc((var(--pj-room-v) + var(--pj-spare) + var(--pj-lift)) * var(--pj-ratio));
    --pj-row-w:   min(100% - var(--pj-col-x) - var(--pj-pad),
                      var(--pj-cols) * var(--pj-cap-v) + (var(--pj-cols) - 1) * var(--pj-grid-gap));
  }

  .ds-projects__rest{
    display: block;

    --pj-old-w: 100cqw;
    --pj-cap:   var(--pj-cap-v);
    --pj-old-media: min((var(--pj-old-w) - (var(--pj-cols) - 1) * var(--pj-old-gap)) / var(--pj-cols),
                        var(--pj-avail) * var(--pj-ratio));
    --pj-btn-bottom: max(0px, (var(--pj-avail) - var(--pj-old-media) / var(--pj-ratio)) / 2);
  }

  .ds-projects__rest .ds-action{
    position: absolute;
    left: calc(var(--pj-pad) - var(--pj-col-x));
    right: 0;
    bottom: var(--pj-btn-bottom);
    margin: 0 auto;
  }

  .ds-projects__grid{
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--pj-btn-bottom) + var(--pj-btn-h) + var(--pj-btn-gap));
  }
}

@media (max-width: 1240px) and (min-width: 1001px){
  .ds-projects{
    --pj-lines: 4;
    --pj-note-em: 32;
  }
}

@media (max-width: 1000px){
  .ds-projects{
    --pj-col-x: var(--pj-pad);
    --pj-note-em: 0;
    --pj-wrap-lines: 3;
    --pj-head: calc(var(--pj-tall) * (1 + var(--pj-gap))
                    + var(--guide-fs-title) * 1.2 + var(--pj-stack)
                    + var(--pj-wrap-lines) * var(--guide-fs-small) * 1.4);
  }
  .ds-projects__row{ flex-wrap: wrap; }
  .ds-projects__note{ width: 100%; }
  .ds-projects__arrow{ display: none; }
  .ds-projects__rest{
    top: calc(var(--pj-top) * var(--ds-cell) + var(--pj-head) + var(--pj-cards-gap));
  }
}

@media (max-width: 620px){
  .ds-projects{ --pj-wrap-lines: 6; }
  .ds-projects__promo{ white-space: normal; }
  .ds-projects__promo-text{ max-width: 7.5em; }
}

@media (max-width: 720px){
  .ds-projects__rest{ right: 0; }

  .ds-projects__grid{
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 42%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 6px var(--pj-pad) 6px 0;
    scrollbar-width: none;
  }
  .ds-projects__grid::-webkit-scrollbar{ display: none; }
  .ds-projects__grid > li{ scroll-snap-align: start; }
}

@media (max-width: 720px), (orientation: portrait){
  .ds-projects{
    --pj-tall: calc(var(--guide-fs-title) * 1.2);
    --pj-btn-gap: 1.75rem;

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "row" "rest" "promo";
    align-content: center;
    row-gap: clamp(1.5rem, 4.5vh, 2.25rem);
    padding: calc(2 * var(--ds-cell) + clamp(0px, (100svh - 620px) * .8, 5rem)) var(--pj-pad)
             calc(var(--ds-cell) + var(--ds-sec-cut, 0px));
  }

  .ds-projects__row{
    grid-area: row;
    position: relative;
    top: auto;
    left: auto;
    right: auto;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: .7rem;
    row-gap: var(--pj-stack);
  }
  .ds-projects__text{ display: contents; }
  .ds-projects .ds-eye{ grid-column: 1; grid-row: 1; align-self: center; }
  .ds-projects__note{ grid-column: 1 / -1; grid-row: 2; }

  .ds-projects__head{
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: flex-start;
    width: 100%;
  }
  .ds-projects__head .ds-title{ flex: none; }
  .ds-projects__arrow{
    display: block;
    position: relative;
    left: auto;
    top: -.3em;
    flex: 0 1 auto;
    min-width: 0;
    width: 3.22em;
    max-width: 3.22em;
    height: auto;
    align-self: flex-start;
  }

  .ds-projects .ds-eye__tear{ display: none; }

  .ds-projects__promo{
    grid-area: promo;
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    justify-self: center;
    margin-top: -.5rem;
  }
  .ds-projects__promo-text{ display: none; }

  .ds-projects__rest{
    grid-area: rest;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    container-type: normal;
    margin-right: calc(-1 * var(--pj-pad));
    justify-content: flex-start;
  }
}

@media (min-width: 721px) and (orientation: portrait){
  .ds-projects{
    --pj-pad: 6vw;
    --pj-note-fs: 1rem;
    --pj-tall: calc(var(--guide-fs-title) * 1.2 + var(--pj-stack)
                    + 3 * var(--pj-note-fs) * 1.4);
    --pj-name-fs: 14px;
    --pj-btn-gap: 2.6rem;
    row-gap: 3.4rem;
    padding: calc(2 * var(--ds-cell) + 2.5rem) var(--pj-pad)
             calc(1.2 * var(--ds-cell) + var(--ds-sec-cut, 0px));
  }

  .ds-projects__row{
    align-items: start;
    column-gap: calc(var(--pj-gap) * var(--pj-tall));
  }
  .ds-projects .ds-eye{ grid-row: 1 / 3; align-self: center; }
  .ds-projects__head{ grid-row: 1; }
  .ds-projects__note{
    grid-column: 2;
    grid-row: 2;
    font-size: var(--pj-note-fs);
  }

  .ds-projects__rest{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--pj-btn-gap);
    margin-right: 0;
  }
  .ds-projects__grid{
    position: static;
    grid-auto-flow: row;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 10px;
    overflow: visible;
    scroll-snap-type: none;
    padding: 0;
  }
  .ds-projects__rest .ds-action{
    position: static;
    align-self: center;
    margin: 0;
  }

  .ds-projects__promo{ margin-top: 0; }
  .ds-projects__promo-text{ display: block; }
}