h1 {
  font-size: var(--fontSize-h1);
}

h2 {
  font-size: var(--fontSize-h2);
}
h3 {
  font-size: var(--fontSize-h3);
  margin-bottom: var(--marginBottom);
}
h4 {
  font-size: var(--fontSize-h4);
  margin-bottom: var(--marginBottomh4);
}
h5 {
  font-size: var(--fontSize-h5);
}
h6 {
  font-size: var(--fontSize-h6);
}
p,
li {
  font-size: var(--fontSize-p);
}

/* ------------ FONT FAMILY  ---------*/

h1,
h4,
h5,
h6,
a,
button {
  font-family: "Space Mono", monospace;
}

h2,
h3,
p,
li {
  font-family: "Manrope", sans-serif;
}

/* ------------ FONT WEIGHT ---------*/

h1,
h2,
h3 {
  font-weight: 400;
}

/* ------------ LINE-HEIGHT---------*/

h1 {
  line-height: var(--lineHeight-h1);
}

h2 {
  line-height: var(--lineHeight-h2);
}
h3 {
  line-height: var(--lineHeight-h3);
}
h4 {
  line-height: var(--lineHeight-h4);
}
h5 {
  line-height: var(--lineHeight-h5);
}
h6 {
  line-height: var(--lineHeight-h6);
}
P {
  line-height: var(--lineHeight-p);
}

/* ------------ FONT COLOR ---------*/

p,
li {
  color: rgba(255, 255, 255, 0.6);
}

.sidebar h4::after {
  background: var(--sidebar-color);
}

/* ------------ PAGE STRUCTURE ---------*/

/*
.intro,
.problemAndSolution,
.recapWithSidebar,
.projectGallery,
.relatedProjects,
.mainImg {
  margin-bottom: 10%;
}
  */

.intro,
.problemAndSolution,
.recapWithSidebar,
.projectGallery,
.mainImg {
  margin-bottom: 10%;
}

.intro,
.problemAndSolution,
.recapWithSidebar,
.projectGalleryImgCaption,
.singleRelatedProject,
.ctaSection h2,
.ctaSection .buttonContainer {
  display: grid;
}

.intro {
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(8, 1fr);
  /* height: 90vh; */
  text-align: left;
}

.intro .projectTitle {
  padding-top: 15%;
  grid-column: 1/7; /*from 2 to 7*/
  grid-row: 1;
}

.intro .projectDescriptionContainer {
  grid-column: 2/8; /*from 2 to 8*/
  grid-row: 2;
}

.intro .btnVisitaIlSito {
  padding: 8px 16px;
  border-radius: 7px;
  color: white;
  text-decoration: none;
}

.intro .btnVisitaIlSito:hover {
  background-color: #242424 !important;
}

.mainImgSingleProject {
  /*max-width: 80vw;*/
  max-width: 100%;
}

.problemAndSolution {
  grid-template-columns: 3fr 1fr 3fr 1fr;
}

.problemAndSolution ul {
  list-style-type: square;
  /* list-style-image: url('sqpurple.gif'); */
  list-style-position: inside;
}

.problemAndSolution ul p {
  display: inline;
}

.problem {
  grid-column: 1;
}

.solution {
  grid-column: 3;
}

.recapWithSidebar {
  grid-template-columns: 5fr 1fr 2fr;
}

.imgSecondariaPgSingleProject {
  max-width: 49.6vw;
  margin-bottom: 30px;
}

.textInfo {
  grid-column: 1;
}
.sidebar {
  grid-column: 3;
}

.sidebar p {
  margin-bottom: 10%;
}

/* ------------ GALLERY STRUCTURE ---------*/
.projectGalleryImgCaption {
  grid-template-columns: 2fr 6fr;
}

.projectGalleryImg img {
  max-width: 100%;
}

h4.divider {
  display: flex;
  align-items: center;
  flex: 1;
  margin: 0;
}

h4.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #333;
  margin-left: 10px;
  margin-right: 10px;
}

.projectGalleryImg:nth-child(3) img {
  margin-bottom: 0 !important;
}

/* ------------ RELATED PROJECTS STRUCTURE ---------*/

.relatedProjects {
  margin-bottom: 10%;
}

.relatedProjects h4::after {
  visibility: hidden;
}

.singleRelatedProject {
  grid-template-columns: 2fr 5fr 1fr;
}

.singleRelatedProject {
  margin-bottom: var(--marginBottom);
}

.singleRelatedProjectImg {
  max-width: 20vw;
  background-size: cover;
  background-position: center;
}

.singleRelatedProjectText {
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.singleRelatedProjectText h4,
.singleRelatedProjectText h3 {
  line-height: 1;
  margin-bottom: 0;
}

.singleRelatedProjectText h4 {
  line-height: 1;
  margin-bottom: 15px;
}

.singleRelatedProjectText h3 {
  color: white;
}

/* ------------ CTA SECTION STRUCTURE ---------*/

.ctaSection {
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 0 5% 0;
  margin-bottom: 0;
}

.ctaSection h2 {
  grid-template-columns: 6fr 2fr;
}

.ctaSection .buttonContainer {
  grid-template-columns: 4fr 2fr 2fr;
}

.ctaSection .buttonWithBorder {
  grid-column: 2;
}