.ds-bloglist__head--plain{
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title  title"
    "crumbs ."
    "intro  cta";
}
.ds-bloglist__head--plain .ds-bloglist__intro{ max-width: 44rem; }
.ds-worklist__cta{ grid-area: cta; justify-self: end; }

@media (max-width: 720px){
  .ds-bloglist__head--plain{
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "crumbs" "intro" "cta";
  }
  .ds-worklist__cta{ justify-self: start; margin-top: .6rem; }
}

.ds-cta{
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: 1em 1.2em 1em 1.35em;
  font-family: var(--ds-font-display);
  font-size: clamp(.8125rem, .75rem + .2vw, .9375rem);
  font-weight: var(--ds-fw-bold);
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ds-paper);
  background: var(--ds-red);
  transition: background-color .2s ease, color .2s ease;
}
.ds-cta svg{
  flex: none;
  width: 1.1em;
  height: 1.1em;
  transition: translate .25s var(--ds-ease-out);
}
@media (hover: hover){
  .ds-cta:hover{ background: var(--ds-paper); color: var(--ds-ink); }
  .ds-cta:hover svg{ translate: .14em -.14em; }
}
.ds-cta:focus-visible{ outline: 2px solid var(--ds-paper); outline-offset: 3px; }

.ds-worklist__back{
  display: flex;
  justify-content: center;
  margin-top: clamp(3rem, 6vw, 4.5rem);
}


.ds-works{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 3.5vw, 3.25rem) clamp(1.25rem, 2.5vw, 2.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 960px){
  .ds-works{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .ds-works{ grid-template-columns: minmax(0, 1fr); }
}


.ds-work{
  display: block;
  color: var(--ds-paper);
  text-decoration: none;
  outline: none;
}

.ds-work__media{
  display: block;
  aspect-ratio: 612 / 525;
  overflow: hidden;
  background: rgb(240 240 240 / .06);
  box-shadow: 0 .6rem 1.8rem rgb(0 0 0 / .28);
  transition: transform .45s cubic-bezier(.15, .75, .5, 1),
              box-shadow .45s cubic-bezier(.15, .75, .5, 1);
}
.ds-work__media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s cubic-bezier(.15, .75, .5, 1);
}

.ds-work__name{
  display: flex;
  align-items: flex-start;
  gap: .3em;
  margin-top: .85em;
  font-family: var(--ds-font-alt);
  font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.005em;
}

.ds-work__label{
  padding-bottom: .12em;
  background: linear-gradient(var(--ds-red), var(--ds-red)) no-repeat 0 100% / 0 2px;
  transition: background-size .35s cubic-bezier(.2, .8, .2, 1);
}

.ds-work__arrow{
  flex: none;
  width: .62em;
  height: .62em;
  margin-top: .02em;
  color: var(--ds-red);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

.ds-work:hover .ds-work__media,
.ds-work:focus-visible .ds-work__media{
  transform: translateY(-5px);
  box-shadow: 0 1rem 2.4rem rgb(0 0 0 / .38);
}
.ds-work:hover .ds-work__media img,
.ds-work:focus-visible .ds-work__media img{ transform: scale(1.06); }
.ds-work:hover .ds-work__label,
.ds-work:focus-visible .ds-work__label{ background-size: 100% 2px; }
.ds-work:hover .ds-work__arrow,
.ds-work:focus-visible .ds-work__arrow{ transform: translate(.14em, -.14em); }

.ds-work:focus-visible .ds-work__media{
  outline: 2px solid var(--ds-red);
  outline-offset: 4px;
}

@media (hover: none){
  .ds-work:hover .ds-work__media,
  .ds-work:hover .ds-work__media img,
  .ds-work:hover .ds-work__arrow{ transform: none; }
  .ds-work:hover .ds-work__label{ background-size: 0 2px; }
}


.ds-peek{
  --pk-w: clamp(14rem, 22vw, 21rem);

  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: var(--pk-w);
  pointer-events: none;
  will-change: transform;
}

.ds-peek__win{
  overflow: hidden;
  background: var(--ds-paper);
  box-shadow: 0 1.4rem 3.2rem rgb(0 0 0 / .45), 0 .2rem .6rem rgb(0 0 0 / .25);
  opacity: 0;
  transform: scale(.82);
  transform-origin: 0 100%;
  transition: opacity .22s ease, transform .35s cubic-bezier(.2, .9, .25, 1.15);
}
.ds-peek.is-on .ds-peek__win{
  opacity: 1;
  transform: scale(1);
}

.ds-peek__bar{
  display: flex;
  align-items: center;
  gap: .3rem;
  height: 1.55rem;
  padding: 0 .6rem;
  background: #e4e4e4;
  border-bottom: 1px solid rgb(23 23 23 / .1);
}
.ds-peek__bar i{
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: rgb(23 23 23 / .22);
}
.ds-peek__bar i:first-child{ background: var(--ds-red); }
.ds-peek__url{
  flex: 1;
  margin: 0 1.6rem 0 .6rem;
  padding: .12rem .5rem;
  overflow: hidden;
  border-radius: .2rem;
  background: rgb(255 255 255 / .8);
  font-family: var(--ds-font-alt);
  font-size: .62rem;
  line-height: 1.2;
  color: rgb(23 23 23 / .65);
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ds-peek__shots{
  position: relative;
  aspect-ratio: 1100 / 500;
  background: var(--ds-ink);
}
.ds-peek__shots img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .25s ease;
}
.ds-peek__shots img.is-on{ opacity: 1; }

@media (hover: none), (pointer: coarse){
  .ds-peek{ display: none; }
}


.ds-404{
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ds-404 .ds-bloglist__head{
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "title" "intro";
  justify-items: center;
  text-align: center;
  margin-bottom: 0;
}
.ds-404__title{
  --ds-title-size: clamp(5.5rem, 3rem + 14vw, 12rem);
  --ds-title-leading: 1;
}
.ds-404__text{ max-width: 30rem; }
.ds-404__actions{
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}