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

/* projects ext squares main container */
.projects_ext_sqr_container_main {
  display: grid;
  place-items: center;
  width: 100%;

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

/* projects ext squares content */
.projects_ext_sqr_container_content {
  display: grid;
  grid-template-columns: 1fr 1fr; /* two columns */

  width: calc(100% - calc(var(--variable_spacing_01) * 2)); /* full width with extra margin */

  border-radius: var(--variable_borderradius_03); /* rounded corners */

  margin-bottom: var(--variable_spacing_01);

  column-gap: calc(var(--variable_spacing_01)); /* gap between columns */
  row-gap: calc(var(--variable_spacing_01)); /* gap between rows */

  position: relative;
  z-index: 2;
}

.projects_ext_sqr_container_content.odd-images {
  padding-bottom: 0;
}

.projects_ext_sqr_container_content.even-images {
  padding-bottom: 150px;
}

.projects_ext_sqr_square_container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  box-shadow:
          inset 0 0 10px var(--variable_color_gradient_03_gray_01),
          inset 0 0 0 1px var(--variable_color_gradient_03_gray_01);

  border-radius: var(--variable_borderradius_03);
  pointer-events: none;
}

/* projects ext squares individual container */
.projects_ext_sqr_square_container {
  position: relative;
  display: grid;

  width: 100%;
  aspect-ratio: 5 / 7;
  max-width: 550px; /* maximum size for larger screens */

  border-radius: var(--variable_borderradius_03); /* rounded corners */
  overflow: hidden;

  row-gap: 20px;
}

/* projects ext squares align odd-numbered squares to the right and even-numbered to the left */
.projects_ext_sqr_container_content .projects_ext_sqr_square_container:nth-child(2n+1) {
  justify-self: right; /* align odd-numbered squares to the right */
}

.projects_ext_sqr_container_content .projects_ext_sqr_square_container:nth-child(2n) {
  justify-self: left; /* align even-numbered squares to the left */
  transform: translateY(150px); /* shift even-numbered squares */
}

/* projects ext squares shadows */
.projects_ext_sqr_square_container {
  box-shadow: -50px 75px 350px rgba(138, 129, 122, 0.4); /* electric revolution */
}

/* projects ext squares image styling */
.projects_ext_sqr_square_image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 600px) {
  .projects_ext_sqr_container_content {
    display: grid;
    grid-template-columns: 1fr; /* one column */

    width: calc(100% - calc(var(--variable_spacing_01) * 2)); /* full width with extra margin */
    padding-bottom: 0;

    border-radius: var(--variable_borderradius_03); /* rounded corners */

    column-gap: calc(var(--variable_spacing_01)); /* gap between columns */
    row-gap: calc(var(--variable_spacing_01)); /* gap between rows */
  }
  .projects_ext_sqr_container_content.odd-images {
    padding-bottom: 0;
  }

  .projects_ext_sqr_container_content.even-images {
    padding-bottom: 0;
  }

  .projects_ext_sqr_square_container {
    width: 100%;
    aspect-ratio: 5 / 7;
    max-width: 100%;
  }

  .projects_ext_sqr_container_content .projects_ext_sqr_square_container:nth-child(2n+1) {
    justify-self: center; /* center odd-numbered squares */
  }

  .projects_ext_sqr_container_content .projects_ext_sqr_square_container:nth-child(2n) {
    justify-self: center; /* center even-numbered squares */
    transform: translateY(0px); /* reset translation */
  }
}