/* Animation */

@keyframes tonext {
  75% {
    left: 0;
  }
  95% {
    left: 100%;
  }
  98% {
    left: 100%;
  }
  99% {
    left: 0;
  }
}

@keyframes tostart {
  75% {
    left: 0;
  }
  95% {
    left: -300%;
  }
  98% {
    left: -300%;
  }
  99% {
    left: 0;
  }
}

@keyframes snap {
  96% {
    scroll-snap-align: center;
  }
  97% {
    scroll-snap-align: none;
  }
  99% {
    scroll-snap-align: none;
  }
  100% {
    scroll-snap-align: center;
  }
}

/* Styles */

:root {
  --color-snowdonia: hsl(203, 71%, 9%);
  --color-snowdonia-light: hsl(203, 71%, 99%);
  --color-green-people: hsl(152, 100%, 20%);
  --color-green-people-light: hsl(152, 100%, 99%);
  --color-watchhouse: hsl(46, 52%, 92%);
  --color-rixo: hsl(51, 64%, 98%);
}

html {
  font-family: 'Host Grotesk', sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  background: #f9f9f9;
}

.case-study {
}

.case-study__grid {
  display: grid;
  align-items: flex-start;
  grid-template-columns: 1fr;

  @media screen and (min-width: 1024px) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.case-study__gallery {
  display: grid;
  align-items: flex-start;
  grid-template-columns: 1fr;

  @media screen and (min-width: 1024px) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.case-study__col--content {
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;

  @media screen and (min-width: 1024px) {
    padding: 48px 24px;
    gap: 12px;
  }

  > *:last-child {
    margin: 0 0 auto;
  }
}

.case-study__col--snowdonia {
  border-top: 8px solid var(--color-snowdonia);
  background: var(--color-snowdonia-light);
}

.case-study__col--green-people {
  border-bottom: 8px solid var(--color-green-people);
  background: var(--color-green-people-light);
}

.case-study__col--image {
  img {
    width: 100%;
  }
}

.case-study__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pill {
  display: inline-block;
  width: fit-content;
  font-weight: 500;
  padding: 2px 12px;
  border-radius: 20px;
}

.pill--snowdonia {
  background: var(--color-snowdonia);
  color: #fff;
}

.pill--green-people {
  background: var(--color-green-people);
  color: #fff;
}

.pill--watchhouse {
  background: var(--color-watchhouse);
  color: #0a0a09;
}

.pill--rixo {
  background: var(--color-rixo);
  color: #0a3524;
}