:root {
  --font-size-title-xl: 48px;
  --font-size-mtitle-xl: 36px;
  --font-size-desc-xl: 18px;
  --font-size-button-project-xl: 18px;
  /* Card dimensions */
  --project-img-width-xl: 38.9rem;
  --project-img-height-xl: 21.4rem;
  --project-img-tWidth-xl: 21rem;
  --project-img-tHeight-xl: 13rem;
  --project-img-mwidth-xl: 26rem;
  --project-img-mheight-xl: 18rem;
  --bar-width-xl: 7.4rem;
  --bar-tWidth-xl: 3.5rem;
  --bar-mwidth-xl: 4.5rem;
  /* Scaling factors */
  --scale-xxs: 0.8;
  --scale-xs: 1;
  --scale-sm: 1;
  --scale-md: 1;
  --scale-lg: 0.84;
  --scale-2xl: 1.2;
  --scale-3xl: 1.5;
  --scale-4xl: 1.8;
}

/* Media queries for scaling */
/* @media (max-width: 424px) { */
:root {
  --font-size-title: calc(var(--font-size-mtitle-xl) * 1);
  --font-size-desc: calc(var(--font-size-desc-xl) * var(--scale-xxs));
  --font-size-button-project: calc(
    var(--font-size-button-project-xl) * var(--scale-xxs)
  );
  --project-img-width: "100%";
  --project-img-height: calc(var(--project-img-mheight-xl) * var(--scale-xxs));
  --bar-width: calc(var(--bar-mwidth-xl) * var(--scale-xxs));
}
/* } */
@media (min-width: 425px) {
  :root {
    --font-size-title: calc(var(--font-size-title-xl) * var(--scale-xs));
    --font-size-desc: calc(var(--font-size-desc-xl) * var(--scale-xs));
    --font-size-button-project: calc(
      var(--font-size-button-project-xl) * var(--scale-xs)
    );
    --project-img-width: "100%";
    --project-img-height: calc(var(--project-img-mheight-xl) * var(--scale-xs));
    --bar-width: calc(var(--bar-mwidth-xl) * var(--scale-xs));
  }
}

@media (min-width: 640px) {
  :root {
    --font-size-title: calc(var(--font-size-mtitle-xl) * var(--scale-sm));
    --font-size-desc: calc(var(--font-size-desc-xl) * 0.8);
    --font-size-button-project: 16px;

    --project-img-width: calc(var(--project-img-tWidth-xl) * 0.8);
    --project-img-height: calc(var(--project-img-tHeight-xl) * 0.8);
    --bar-width: calc(var(--bar-tWidth-xl) * 0.8);
  }
}

@media (min-width: 768px) {
  :root {
    --font-size-title: calc(var(--font-size-mtitle-xl) * var(--scale-md));
    --font-size-desc: calc(var(--font-size-desc-xl) * var(--scale-md));
    --font-size-button-project: calc(
      var(--font-size-button-project-xl) * var(--scale-md)
    );

    --project-img-width: calc(var(--project-img-tWidth-xl) * var(--scale-md));
    --project-img-height: calc(var(--project-img-tHeight-xl) * var(--scale-md));
    --bar-width: calc(var(--bar-tWidth-xl) * var(--scale-md));
  }
}

@media (min-width: 1024px) {
  :root {
    --font-size-title: calc(var(--font-size-title-xl) * var(--scale-md));
    --font-size-desc: calc(var(--font-size-desc-xl) * 1.05);
    --font-size-button-project: calc(
      var(--font-size-button-project-xl) * var(--scale-md)
    );

    --project-img-width: calc(var(--project-img-width-xl) * 0.8);
    --project-img-height: calc(var(--project-img-height-xl) * var(--scale-lg));

    --car-height: calc(var(--project-img-height-xl) * var(--scale-lg));
    --bar-width: calc(var(--bar-width-xl) * 0.8);
  }
}

@media (min-width: 1280px) {
  :root {
    --font-size-title: calc(var(--font-size-title-xl) * 1.1);
    --font-size-desc: calc(var(--font-size-desc-xl) * 1);
    --font-size-button-project: calc(var(--font-size-button-project-xl) * 1.1);

    --project-img-width: var(--project-img-width-xl);
    --project-img-height: var(--project-img-height-xl);
    --bar-width: var(--bar-width-xl);
  }
}
@media (min-width: 1408px) {
  :root {
    --project-img-height: calc(var(--project-img-height-xl) * 1.16);
  }
}

@media (min-width: 1536px) {
  :root {
    --font-size-title: calc(var(--font-size-title-xl) * 1.3);
    --font-size-desc: calc(var(--font-size-desc-xl) * var(--scale-2xl));
    --font-size-button-project: calc(
      var(--font-size-button-project-xl) * var(--scale-2xl)
    );

    --project-img-width: calc(var(--project-img-width-xl) * var(--scale-2xl));
    --project-img-height: calc(var(--project-img-height-xl) * var(--scale-2xl));
    --bar-width: calc(var(--bar-width-xl) * var(--scale-2xl));
  }
}
@media (min-width: 1728px) {
  :root {
    --project-img-height: calc(var(--project-img-height-xl) * 1.35);
  }
}

@media (min-width: 1920px) {
  :root {
    --font-size-title: calc(var(--font-size-title-xl) * var(--scale-3xl));
    --font-size-desc: calc(var(--font-size-desc-xl) * var(--scale-3xl));
    --font-size-button-project: calc(
      var(--font-size-button-project-xl) * var(--scale-3xl)
    );

    --project-img-width: calc(var(--project-img-width-xl) * var(--scale-3xl));
    --project-img-height: calc(var(--project-img-height-xl) * var(--scale-3xl));
    --bar-width: calc(var(--bar-width-xl) * var(--scale-3xl));
  }
}
@media (min-width: 2240px) {
  :root {
    --project-img-height: calc(var(--project-img-height-xl) * 1.65);
  }
}
@media (min-width: 2560px) {
  :root {
    --font-size-title: calc(var(--font-size-title-xl) * var(--scale-4xl));
    --font-size-desc: calc(var(--font-size-desc-xl) * var(--scale-4xl));
    --font-size-button-project: calc(
      var(--font-size-button-project-xl) * var(--scale-4xl)
    );

    --project-img-width: calc(var(--project-img-width-xl) * var(--scale-4xl));
    --project-img-height: calc(var(--project-img-height-xl) * 2);
    --bar-width: calc(var(--bar-width-xl) * var(--scale-4xl));
  }
}

/* Custom utility classes */
.text-projects-title {
  font-size: var(--font-size-title);
}

.text-projects-desc {
  font-size: var(--font-size-desc);
}

.text-projects-button {
  font-size: var(--font-size-button-project);
}
.text-projects-header {
  font-size: var(--project-img-width);
}
.projects-img-size {
  /* width: var(--project-img-width); */
  height: var(--project-img-height);
}
.projects-bar {
  width: var(--bar-width);
}
.audio-project-color {
  color: #fff647;
}
.audio-project-border-color {
  border-color: #fff647;
}
.audio-project-bg-hover:hover {
  background-color: #fff647;
}
.home-page-project-color {
  color: #ff8200;
}
.home-page-border-color {
  border-color: #ff8200;
}

.home-page-projects-btn-hover:hover {
  background-color: #ff8200;
}