<div class="center">
  <div class="wrapper">
    <div class="inner">
      <div class="card">
        <img src="https://colorlib.com/preview/theme/seogo/img/case_study/1.png">
        <div class="content">
          <h1>Product Design</h1>
          <h3>UI/UX, Design</h3>
        </div>
      </div>
      <div class="card">
        <img src="https://colorlib.com/preview/theme/seogo/img/case_study/2.png">
        <div class="content">
          <h1>Custom Website</h1>
          <h3>UI/UX, Design</h3>
        </div>
      </div>
      <div class="card">
        <img src="https://colorlib.com/preview/theme/seogo/img/case_study/3.png">
        <div class="content">
          <h1>Digital Marketing</h1>
          <h3>UI/UX, Design</h3>
        </div>
      </div>
      <div class="card">
        <img src="https://colorlib.com/preview/theme/seogo/img/case_study/1.png">
        <div class="content">
          <h1>Digital Marketing</h1>
          <h3>UI/UX, Design</h3>
        </div>
      </div>
      <div class="card">
        <img src="https://colorlib.com/preview/theme/seogo/img/case_study/2.png">
        <div class="content">
          <h1>Digital Marketing</h1>
          <h3>UI/UX, Design</h3>
        </div>
      </div>
      <div class="card">
        <img src="https://colorlib.com/preview/theme/seogo/img/case_study/3.png">
        <div class="content">
          <h1>Digital Marketing</h1>
          <h3>UI/UX, Design</h3>
        </div>
      </div>
            <div class="card">
        <img src="https://colorlib.com/preview/theme/seogo/img/case_study/1.png">
        <div class="content">
          <h1>Digital Marketing</h1>
          <h3>UI/UX, Design</h3>
        </div>
      </div>
            <div class="card">
        <img src="https://colorlib.com/preview/theme/seogo/img/case_study/2.png">
        <div class="content">
          <h1>Digital Marketing</h1>
          <h3>UI/UX, Design</h3>
        </div>
      </div>
            <div class="card">
        <img src="https://colorlib.com/preview/theme/seogo/img/case_study/3.png">
        <div class="content">
          <h1>Digital Marketing</h1>
          <h3>UI/UX, Design</h3>
        </div>
      </div>
    </div>
  </div>
  
  <div class="map">
    <button class="active first"></button>
    <button class="second"></button>
    <button class="third"></button>
  </div>
</div>

@mixin circle($i) {
  border-radius: 100%;
  height: $i;
  width: $i;
}

$bgBlue: #001d38;
$cardBlue: #0a2640;
$font: "Poppins";

html,
body {
  height: 100%;
}

body {
  background: $bgBlue;
  font-family: $font, sans-serif;
  overflow: hidden;
}

.center {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

.wrapper {
  display: flex;
  grid-gap: 1em;
  overflow: hidden;
  width: 55em;
  
  & > .inner {
    display: flex;
    grid-gap: 1em;
    transition: all 1s ease-in-out;
  }
}

.card {
  border-radius: 0.5em;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);

  & > img {
    border-top-right-radius: inherit;
    border-top-left-radius: inherit;
    display: block;
    width: 17.5em;
  }

  & > .content {
    background: $cardBlue;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    padding: 1em;
    text-align: center;

    & > h1,
    & > h3 {
      margin: 0.35em 0;
    }

    & > h1 {
      color: #fff;
      font-size: 1.25rem;
      line-height: 1;
    }

    & > h3 {
      color: #ccc;
      font-size: 0.9rem;
      font-weight: 300;
    }
  }
}

.map {
  margin-top: 1em;
  & > button {
    all: unset;
    background: lighten($cardBlue, 10);
    cursor: pointer;
    margin: 0 0.125em;
    position: relative;
    user-select: none;
    @include circle(1em);

    &.active {
      &:after {
        background: $bgBlue;
        content: "";
        left: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        @include circle(0.5em);
      }
    }
  }
}

// https://colorlib.com/preview/theme/seogo/

const buttonsWrapper = document.querySelector(".map");
const slides = document.querySelector(".inner");

buttonsWrapper.addEventListener("click", e => {
  if (e.target.nodeName === "BUTTON") {
    Array.from(buttonsWrapper.children).forEach(item =>
      item.classList.remove("active")
    );
    if (e.target.classList.contains("first")) {
      slides.style.transform = "translateX(-0%)";
      e.target.classList.add("active");
    } else if (e.target.classList.contains("second")) {
      slides.style.transform = "translateX(-33.33333333333333%)";
      e.target.classList.add("active");
    } else if (e.target.classList.contains('third')){
      slides.style.transform = 'translatex(-66.6666666667%)';
      e.target.classList.add('active');
    }
  }
});