:root {
  --hero-text-color-dark: #ec616f;
  --hero-text-color-light: #F16775d3;
  --hero-stroke-color: #ffffff;
  --banner-bg-scale-factor: 450vmin;
  
  --banner-offsetX: 42%;
  --banner-offsetY: 38%;
  --banner-scale-factor: 1;
}

header nav .breadcrumbs .case-study-logo {
  margin-bottom: -6px;
  height: 28px;
}

header nav .breadcrumbs .caret {
  background-color: var(--dagger-100);
}

header {
  mix-blend-mode: normal;
}

.banner {
  background-color: #35E8A7;
  min-height: unset;
  height: 80vh;
  justify-content: center;
  align-content: center;
  padding: 0;
}

.banner h1.hero-text {
  font-size: calc(var(--banner-scale-factor)*20vmin);
  line-height: 0.5;
  color: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.banner h1 span {
  display: inline-block;
}

.banner h1 span:first-child {
  z-index: 0;
}

.banner h1 span.ampersand {
  z-index: 1;
  color: var(--ink);
  transform: translate(-0.5em, 0.15em);
}

.banner h1 span:last-child {
  z-index: 2;
}

.banner h1 span::selection {
  color: var(--asterisk);
  background: var(--dagger);
}

.banner .banner-bg {
  width: calc(var(--banner-scale-factor)*170vmin);
  max-width: unset;
  position: absolute;
  top: var(--banner-offsetY);
  left: var(--banner-offsetX);
  transform: translate(-47.5%, -14%);
  z-index: 0;
  grid-column: unset;
}

.banner-bjorn {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -80%);
  width: auto;
  max-width: 250px;
  grid-column: unset;
}

.intro {
  min-height: unset;
  padding-top: 17.5rem;
  padding-bottom: 4rem;
}

.intro h2 {
  line-height: 0.96;
}

.intro .skills-badge {
  background-color: #0f9483;
}

.intro .skills-badge.product-design {
  -webkit-mask-image: url("../images/skills-badge-product-design.svg");
  mask-image: url("../images/skills-badge-product-design.svg");
  top: 60px;
  left: -8px;
  transition-delay: 0.2s
}

.intro .skills-badge.ui-design {
  -webkit-mask-image: url("../images/skills-badge-user-interface-design.svg");
  mask-image: url("../images/skills-badge-user-interface-design.svg");
  top: 95px;
  right: -4px;
}

.mockup {
  min-height: unset;
  padding-bottom: 6rem;
  justify-items: center;
}

.mockup.app {
  padding-top: 0px;
}

.mockup p {
  margin-top: 130px;
}

.mockup figure {
  width: 100%;
}

.mockup.app figure picture img {
  width: 100%;
  transform: scale(150%) rotate(-30deg);
  transform-origin: bottom left;
  max-width: 360px;
}

.mockup.app figure picture {
  order: 2;
  margin-top: 12rem;
}

.mockup.app figure figcaption {
  order: 1;
  margin-top: 0rem;
  line-height: 1.4;
}

.mockup figure figcaption span {
  display: block;
  margin-bottom: 1em;
}

.mockup.dashboard figure picture {
  transform: translate(29%, -87%);
}

.mockup.dashboard figure picture img {
  width: 100%;
  transform: scale(210%) rotate(-30deg);
  max-width: 360px;
}

.mockup.dashboard figure picture {
  order: 2;
  z-index: 0;
}

.mockup.dashboard figure figcaption {
  order: 1;
  z-index: 1;
  transform: translateY(3rem);
  line-height: 1.4;
  text-align: right;
}

.testimonial {
  background-color: var(--dagger-100);
  color: var(--asterisk);
}

.testimonial figure blockquote .quotemark {
  background-color: var(--dagger-900);
}

.testimonial figure figcaption {
  border-top: 1px solid var(--dagger-500);
}

.okrs {
  height: unset;
}

.okrs * {
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

.okrs .info {
  position: sticky;
  padding-top: 3rem;
  padding-botom: 3rem;
}

.okrs .okr-card {
  border-radius: 10px;
  box-shadow: 0px 11px 14px rgba(63, 49, 42, 0.09);
  padding: 24px;
  position: relative;
  background-color: var(--silcrow-050);
}

.okrs .okr-card {
  font-style: italic;
  margin-bottom: 1rem
}

.okrs .okr-card::before {
  content: "§";
  font-style: normal;
  display: block;
  margin-bottom: 2rem;
  color: var(--ink-100);
}

.collaboration {
  height: 1130px;
}
.collaboration .illustration {
  margin-top: 20vh;
  margin-bottom: 30vh;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.collaboration .illustration img {
  transform: scale(106%);  
}

.collaboration .info {
  padding-top: 70vh;
  padding-bottom: 30vw;
}

.speed .illustration img {
  transform: scale(160%);
  transform-origin: center left;
  max-width: 400px;
}

.cta.show-gallery h3::after {
  background-color: var(--ink-100);
}

.gallery .image-container {
  padding-bottom: 7rem;
}

.gallery .image-container .gi-01 img,
.gallery .image-container .gi-02 img,
.gallery .image-container .gi-04 img,
.gallery .image-container .gi-05 img {
  border-radius: unset;
  box-shadow: unset;
}

.gallery .image-container .gallery-image {
  border-radius: 20px;
  filter: drop-shadow(0px 11px 14px rgba(63, 49, 42, 0.09));
  box-shadow: none;
}

.gallery .image-container .gi-01 {
  padding: 24px;
  background-color: #38A77A;
}

.gallery .image-container .gi-02,
.gallery .image-container .gi-04,
.gallery .image-container .gi-05 {
  background-color: #F3F7FD;
  padding: 24px;
  border-radius: 20px;
}

.gallery .image-container .gi-02 figcaption {
  padding: 16px;
  background-color: var(--paper);
  border-radius: 8px;
  line-height: 1.3;
  order: 0;
}

.gallery .image-container .gi-02 picture {
  order: 1;
}

.gallery .image-container .gi-02 picture {
  height: 100%;
}

.gallery .image-container .gi-05 {
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.gallery .image-container .gi-05 img {
  height: 50vw;
  max-height: 220px;
  max-width: unset;
  width: auto;
}

@media (min-width: 480px) {
  
  .intro {
    padding-top: 15rem;
  }
  
  .intro .skills-badge.product-design {
    top: 85px;
    left: -8px;
  }
  
  .intro .skills-badge.ui-design {
    top: 45px;
    right: unset;
    left: 39%;
  }
  
  .mockup {
    padding-top: 10rem;
  }

  .intro .skills-badge.ux-design {
    top: 30px;
  }
  
  .okrs * {
    max-width: unset;
    margin-left: unset;
    margin-right: unset;
  }
  
  .okrs .card-container .okr-card:last-child {
    margin-bottom: 4rem;
  }
  
}

@media (min-width: 640px) {
  
  :root {
    --banner-offsetX: 57%;
    --banner-offsetY: 24%;
    --banner-scale-factor: 0.8;
  }
  
  .intro {
    padding-top: 13rem;
  }
  
  .intro .skills-badge.product-design {
    top: -25px;
    left: -118px;
  }
  
  .intro .skills-badge.ui-design {
    top: 38px;
    left: 86px;
  }
  
  .mockup {
    padding-top: 8rem;
  }
  
  .collaboration {
    padding-top: 10rem;
    height: 1380px;
  }
  
  .collaboration .info {
    padding-top: 90vh;
  }
  
  .collaboration .illustration {
    max-width: unset;
    margin-bottom: 5vh;
  }
  
  .collaboration .illustration img {
    transform: scale(130%);  
  }
  
}

@media (min-width: 800px) {
  
  :root {
    --banner-offsetY: 14%;
    --banner-scale-factor: 1.15;
  }
  
  .banner {
    height: 90vh;
  }
  
  .banner h1.hero-text {
    align-items: end;
    position: absolute;
    bottom: -0.06em;
    right: 0.3em;
    text-align: right;
    line-height: 1;
    grid-column: unset;
  }
  
  .banner h1 span:last-child {
    z-index: 0;
  }
  
  .banner h1 span.ampersand {
    z-index: 2;
    transform: translate();
    position: absolute;
    top: 0.5em;
    right: 0.09em;
    font-size: 0.9em;
  }
  
  .banner h1 span:last-child {
    z-index: 1;
    writing-mode: vertical-lr;
  }
  
  .banner .banner-bg {
    z-index: 3;
  }
  
  .banner-bjorn {
    max-width: 410px;
  }
  
  .intro {
    min-height: 80vh;
    padding-top: 300px;
    padding-bottom: 12rem;
  }
  
  .intro .skills-badge.product-design {
    top: 35px;
    left: -108px;
  }
  
  .intro .skills-badge.ui-design {
    top: 98px;
    left: 76px;
  }
  
  .mockup p {
    margin-top: 160px;
  }
  
  .okrs .okr-card {
    transform-origin: right center;
  }
  
  .collaboration .illustration {
    margin-bottom: 25vh;
  }
  
  .speed .illustration img {
    transform: scale(135%);
    transform-origin: center center;
    max-width: unset;
  }
  
  .collaboration .illustration {
    transform: none;
  }
  
}

@media (min-width: 900px) {
  
  .intro {
    padding-top: 80px;
    padding-bottom: 0;
    height: 80vh;
    min-height: 500px;
  }
  
  .intro .skills-badge.product-design {
    top: 35px;
    left: 32px;
  }
  
  .intro .skills-badge.ui-design {
    top: 108px;
    left: -194px;
  }
  
  .mockup {
    padding-top: 0px;
    padding-bottom: 0px;
    max-height: 100vh;
  }
  
  .mockup.app figure picture img, .mockup.dashboard figure picture img {
    max-width: unset;
    transform: scale(95%) rotate(-30deg);
  }
  
  .mockup.dashboard figure picture img {
    max-width: 1024px;
  }
  
  .mockup.dashboard figure picture {
    transform: translate(23%, -23%);
  }
  
  .mockup.dashboard figure figcaption {
    transform: translateY(22rem);
  }
  
  .okrs {
    padding-top: 10vw;
  }
  
  .collaboration {
    padding-top: 5rem;
  }
  
  .collaboration .info {
    padding-top: 77vh;
  }
  
  .collaboration .illustration {
    max-width: unset;
    
  }
  
  .collaboration .illustration img {
    width: 100%;
  }
  
  .speed .illustration {
    margin-bottom: 4rem;
  }
  
  .speed .illustration img {
    transform: scale(100%);
  }  
  
  .speed .info {
    padding-top: 20vw;
  }
  
  .gallery .image-container .gi-05 img {
    max-height: 270px;
  }
    
  .gallery .image-container .gi-02 {
    align-content: space-between;
  }
  
}

@media (min-width: 1194px) {
  
  :root {
    --banner-offsetX: 75%;
    --banner-offsetY: 0;
  }
  
  .banner .banner-bg {
    width: calc(var(--banner-scale-factor)*220vmin);
  }
  
  .intro {
    min-height: unset;
  }

  .intro .skills-badge.product-design {
    top: 95px;
    left: -68px;
  }

  .intro .skills-badge.ui-design {
    top: 222px;
    left: -204px;
  }
  
  .mockup.app figure picture img {
    max-width: 750px;
    transform: scale(78%) rotate(-30deg);
  }
  
  .mockup.dashboard figure picture img {
    max-width: 1200px;
    transform: scale(92%) rotate(-30deg);
  }
  
  .okrs .card-container .okr-card {
    font-size: 2.25em;
    padding: 3rem;
  }
  
  .collaboration {
    height: 1470px;
  }
  
  .collaboration .illustration {
    margin-top: 2vh;
    margin-bottom: 10vh;
    max-width: 920px;
  }
  
  .collaboration .illustration img {
    transform: scale(100%);
  }
  
  .collaboration .info {
    padding-top: 39rem;
    padding-bottom: 31rem;
  }
  
  .speed {
    height: 1380px;
    padding-top: 10vw;
  }
  
  .speed .illustration {
    margin-bottom: 8rem;
  }
  
  .speed .info {
    padding-top: 30vw;
  }
  
  .gallery .image-container .gi-01 {
    padding: 32px;
  }
  
  .gallery .image-container .gi-02 img {
    width: 77%;
  }
  
  .gallery .image-container .gi-03 picture:last-child {
    align-self: end;
  }
  
  .gallery .image-container .gi-01 {
    max-width: unset;
  }
  
}

@media (min-width: 1920px) {
  
  :root {
    --banner-offsetX: 93%;
    --banner-offsetY: 0;
  }
  
  .banner .banner-bg {
    width: calc(var(--banner-scale-factor)*310vmin);
  }
  
  .intro {
    min-height: 860px;
  }
  
  .intro .skills-badge.product-design {
    top: 75px;
    left: -440px;
  }
  
  .intro .skills-badge.ui-design {
    top: 222px;
    left: -252px;
  }
  
  :root {
    --banner-scale-factor: 1.2;
  }
  
  .banner-bjorn {
    max-width: unset;
  }
  
  .mockup.app figure picture img {
    max-width: 900px;
  }
  
  .mockup.dashboard figure figcaption {
    transform: translateY(26rem);
  }
  
  .mockup.dashboard figure picture img {
    max-width: 1720px;
    transform: scale(92%) rotate(-30deg);
  }
  
  .okrs .card-container {
    grid-column: -2 / -13;
  }
  
  .collaboration {
    height: 1660px;
  }
  
  .collaboration .illustration {
    max-width: unset;
    margin-top: 0px;
    max-width: unset;
  }
  
  .collaboration .illustration img {
    transform: scale(100%);
  }
  
  .speed {
    height: 1750px;
  }
  
  .gallery .image-container .gi-01 {
    padding: 80px;
  }
  
  .gallery .image-container .gi-02,
  .gallery .image-container .gi-04 {
    padding: 48px;
    border-radius: 20px;
  }
  
  .gallery .image-container .gi-02 img {
    width: 100%;
  }
  
  .gallery .image-container .gallery-image {
    max-width: unset;
  }
  
  .gallery .image-container .gi-02 .caption {
    font-size: 16px;
  }
  
  .gallery .image-container .gi-05 img {
    max-height: 330px;
  }
  
}

@media (min-width: 2250px) {
  
  .intro .skills-badge.ui-design {
    top: 222px;
    left: -650px;
  }
  
  .okrs .card-container {
    grid-column: -9 / -21;
  }
  
  .collaboration {
    height: 1880px;
  }
  
  .collaboration .info {
    padding-top: 34rem;
  }
  
  .collaboration .illustration {
    margin-top: 5rem;
  }
  
  .speed {
    height: 1970px;
  }
  
}