:root {
  --primary-color: #742722;
  --secondary-color: #f8f9fa;
}

.section-hero {
  position: relative;
  height: 30rem;
  background-image: url("../img/wide_double_doors-min.webp");
  background-size: cover;
  background-attachment: relative;
  background-position: 0px -30rem;
}

/******************* SIDE MENU ****************/
.tabs-container {
  display: grid;
  grid-template-columns: auto auto;
  align-items: start;
  justify-content: start;
  column-gap: 3.2rem;
}

.tabs-menu {
  position: sticky;
  width: 35rem;
  top: 6.4rem;
  bottom: 6.4rem;
  padding: 1.6rem 2.4rem 1.6rem 2.4rem;
}

.menu-list {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  font-size: 2rem;
  font-weight: 600;
  list-style: none;
}

.tab-content {
  display: none;
  visibility: hidden;
}

.tab-content--active {
  display: block;
  visibility: visible;
}

.menu-list li {
  padding-bottom: 1.2rem;
  border-bottom: 1px solid #ddd;
}

.tabs-link:link,
.tabs-link:visited {
  color: #333;
}

.tabs-link--active:link,
.tabs-link--active:visited {
  color: var(--primary-color);
}

.heading-paragraph {
  font-size: 2rem;
  margin-bottom: 1.6rem;
  color: var(--primary-color);
}

/*  */

.what-we-offer-list {
  margin-left: 0.5rem;
  gap: 2rem;
}

/* .what-we-offer-list > li { */
/* font-size: 1.8rem; */
/* font-weight: 600; */
/* color: #333; */
/* } */

.products-description {
  font-size: 1.6rem;
  line-height: 1.6;
}

.grid--3-cols {
  grid-template-columns: auto auto auto;
  justify-items: stretch;
  row-gap: 3.2rem;
}

/* .wood-doors {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
} */
/* 
.costum-doors {
  grid-column: 1 / 1;
  grid-row: 2 / 2;
} */

.specialty-doors {
  grid-column: 3 / 3;
  grid-row: 1;
}
/*
.steel-doors {
  grid-column: 3 / 3;
  grid-row: 1 / 2;
}
*/

/* .grid--row-span-2 {
  grid-row: span 2;
}

.grid--row-2 {
  grid-row: 2 / 2;
} */

main ul {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

main li,
main li li {
  display: flex;
  align-items: start;
  gap: 0.8rem;
  list-style-type: none;
}

.sublist {
  gap: 1rem;
}

.sublist li:not(:first-child) {
  gap: 0.4rem;
  margin-left: 2.8rem;
}

.list-heading {
  font-weight: 600;
}

.img--span-2 {
  grid-column: span 2;
}

/* .gallery img {
  object-fit: cover;
} */