/* component styles */

.btn {
  --spacing-flex: var(--spacing-200);
  padding: var(--spacing-200) var(--spacing-400);
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn-secondary {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

/* Border Top */

.border-top {
  width: 100%;
  height: 0.41rem;
  background-color: var(--color-white);
}

.border-top-dark {
  width: 100%;
  height: 0.41rem;
  background-color: var(--color-dark);
}

.border-top-secondary {
  width: 100%;
  height: 0.11rem;
  background-color: var(--color-secondary);
}

.border-top-secondary-heavy {
  width: 100%;
  height: 0.41rem;
  background-color: var(--color-secondary);
}


/* Project */

.project-grid {
  display: grid;
  column-gap: 4rem;
  grid-template-rows: repeat(3, 15rem);
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "title empty side-three"
    "title side-two side-three"
    "side-one side-two side-three"
    "side-one side-two empty3"
    "side-one empty2 click-image";
  --spacing-flex: var(--spacing-200);
}

.project-grid-title {
  grid-area: title;
}

.project-grid-empty {
  grid-area: empty;
}

.project-grid-side-one {
  grid-area: side-one;
}

.project-grid-side-two {
  grid-area: side-two;
}

.project-grid-side-three {
  grid-area: side-three;
}

.project-grid-click-image {
  grid-area: click-image;
}

.project-image {
  padding-top: var(--spacing-400);
}

/* NAv Icons */

.nav-icon-arrows {
  display: none;
}

.slider-arrow-right,
.slider-arrow-left {
  cursor: pointer;
}

.trans-left {
  transform: translateX(
    -100%
  ); /* Adjust the value based on your requirements */
  /* Add any other styles you want for the "transform" class */
}