/* projects featured page reset all margins */
#projects_featured_css h1,
#projects_featured_css h2,
#projects_featured_css h3,
#projects_featured_css h4,
#projects_featured_css h5,
#projects_featured_css h6,
#projects_featured_css p,
#projects_featured_css a,
#projects_featured_css ul {
  margin: 0;
  padding: 0;
}

/* projects featured page container main */
.projects_featured_container_main {
  display: grid;
  place-items: center;
  width: 100%;

  scroll-margin-top: calc(var(--variable_spacing_01) * 2.6);
}

/* projects featured page container content */
.projects_featured_container_content {
  display: grid;
  grid-template-rows: auto auto; /* two equal columns for left and right content */
  width: calc(100% - 2 * var(--variable_spacing_01));
  border-radius: var(--variable_borderradius_03);

  margin-top: var(--variable_spacing_01);
  margin-bottom: var(--variable_spacing_01);

  align-items: start; /* align items to the top of the grid */

  z-index: 3;
}

/* projects featured page left container */
.projects_featured_left_container {
  display: grid;
  grid-template-rows: auto 1fr auto; /* creates 3 rows */
  height: 100%; /* ensures the section takes up the full height */
}

/* projects featured page left top container */
.projects_featured_left_top_container {
  display: grid;
  align-self: start; /* keep top content at the top */
}

/* projects featured page left bottom container */
.projects_featured_left_bottom_container {
  align-self: end; /* keep bottom content at the bottom */
}

/* projects featured page right container */
.projects_featured_right_container {
  display: grid;
  grid-template-rows: auto; /* top content, flexible middle, button at the bottom */
  height: 100%; /* Full height of the container */
  margin: 0;
  padding: 0;
}

/* projects featured page right middle container */
.projects_featured_right_middle_container {
  align-self: center;
  justify-self: start;
}

/* projects featured page container content item margin */
.projects_featured_container_content h1, h2, h3, h4, h5, h6, p, a, ul, li {
  margin: var(--variable_spacing_01);
}

/* projects featured page explore button */
.projects_featured_explore_button {
  display: inline-grid; /* use grid */
  grid-template-columns: auto auto; /* two columns: one for text, one for icon */

  gap: calc(var(--variable_spacing_items_01) * 2); /* space between text and icon */

  /* button type 02 background colors */
  background: linear-gradient(155deg,
  var(--variable_button_02_color_03) 0%,
  var(--variable_button_02_color_02) 25%,
  var(--variable_button_02_color_01) 100%);

  box-shadow:
          -10px 10px 50px var(--variable_button_02_color_04),
          inset 0 0 10px var(--variable_button_02_color_05),
          inset 0 0 0 1px var(--variable_button_02_color_05);

  backdrop-filter: blur(10px); /* apply blur */
  -webkit-backdrop-filter: blur(10px); /* safari support */

  padding: calc(2px + var(--variable_spacing_items_01) * 1) calc(2px + var(--variable_spacing_items_01) * 2);
  border-radius: var(--variable_borderradius_02);

  text-align: center;

  margin: var(--variable_spacing_01);

  color: var(--variable_color_offwhite); /* button text color */
  cursor: pointer;

  justify-content: center; /* center the content horizontally */
  align-items: center; /* center the content vertically */
  white-space: nowrap; /* prevent text from wrapping */
}

/* projects featured page arrow icon */
.projects_featured_explore_button .arrow_icon {
  height: calc(var(--variable_spacing_items_01) * 2);
  width: calc(var(--variable_spacing_items_01) * 2);
  filter: brightness(0) invert(1);
}

@media (max-width: 1000px) {
  .projects_featured_shadow_container_main {
    top: -60%;
  }
  .projects_featured_shadow_container_content {
    width: 150%;

    top: 30%; /* same */
    left: -30%; /* -25% */
  }
}