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

/* projects collection squares main container */
.projects_collection_sqr_container_main {
  display: grid;
  place-items: center;
  width: 100%;
}

/* projects collection squares content */
.projects_collection_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 */
  z-index: 6;
}

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

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

/* projects collection squares individual container */
.projects_collection_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 collection squares align odd-numbered squares to the right and even-numbered to the left */
.projects_collection_sqr_container_content .projects_collection_sqr_square_container:nth-child(2n+1) {
  justify-self: right; /* align odd-numbered squares to the right */
}

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

.projects_collection_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 collection squares shadows */
.projects_collection_sqr_square_container:nth-child(1) {
  box-shadow: -50px 75px 350px rgba(58, 64, 68, 0.4); /* lights off project */
}

.projects_collection_sqr_square_container:nth-child(2) {
  box-shadow: -50px 75px 350px rgba(93, 113, 124, 0.4); /* cartridge project */
}

.projects_collection_sqr_square_container:nth-child(3) {
  box-shadow: -50px 75px 350px rgba(64, 74, 86, 0.4); /* inhaler project */
}

.projects_collection_sqr_square_container:nth-child(4) {
  box-shadow: -50px 75px 350px rgba(68, 60, 57, 0.4); /* jh boards */
}

.projects_collection_sqr_square_container:nth-child(5) {
  box-shadow: -50px 75px 350px rgba(132, 123, 118, 0.4); /* antivilla project */
}

.projects_collection_sqr_square_container:nth-child(6) {
  box-shadow: -50px 75px 350px rgba(138, 129, 122, 0.4); /* electric revolution */
}

.projects_collection_sqr_square_container:nth-child(7) {
  box-shadow: -50px 75px 350px rgba(102, 125, 71, 0.4); /* bacteria */
}

.projects_collection_sqr_square_container:nth-child(8) {
  box-shadow: -50px 75px 350px rgba(105, 104, 103, 0.4); /* zan projectiles project */
}

.projects_collection_sqr_square_container:nth-child(9) {
  box-shadow: -50px 75px 350px rgba(131, 128, 123, 0.4); /* grinder */
}

.projects_collection_sqr_square_container:nth-child(10) {
  box-shadow: -50px 75px 350px rgba(91, 91, 91, 0.4); /* carpio project */
}

.projects_collection_sqr_square_container:nth-child(11) {
  box-shadow: -50px 75px 350px rgba(75, 103, 135, 0.4); /* cuda project */
}

.projects_collection_sqr_square_container:nth-child(12) {
  box-shadow: -50px 75px 350px rgba(62, 73, 98, 0.4); /* gemini project */
}

.projects_collection_sqr_square_container:nth-child(13) {
  box-shadow: -50px 75px 350px rgba(60, 79, 101, 0.4); /* hyve press project */
}

.projects_collection_sqr_square_container:nth-child(14) {
  box-shadow: -50px 75px 350px rgba(99, 100, 70, 0.4); /* kepler being */
}

.projects_collection_sqr_square_container:nth-child(15) {
  box-shadow: -50px 75px 350px rgba(72, 59, 117, 0.4); /* luxonis project */
}

.projects_collection_sqr_square_container:nth-child(16) {
  box-shadow: -50px 75px 350px rgba(140, 111, 93, 0.4); /* walking cane */
}

.projects_collection_sqr_square_container:nth-child(17) {
  box-shadow: -50px 75px 350px rgba(72, 72, 72, 0.4); /* merlin engine project */
}

.projects_collection_sqr_square_container:nth-child(18) {
  box-shadow: -50px 75px 350px rgba(135, 106, 67, 0.4); /* aeromaster bomb */
}

.projects_collection_sqr_square_container:nth-child(19) {
  box-shadow: -50px 75px 350px rgba(96, 92, 86, 0.4); /* nectar project */
}

/* projects collection squares image slider styling */
.projects_collection_sqr_square_image_slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-in-out; /* smooth transition for sliding */
}

.projects_collection_sqr_square_image_slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* overlay styling - static blur effect */
.projects_collection_sqr_square_overlay {
  position: absolute;
  bottom: -10px;
  left: -5%;
  width: 110%;
  height: 65%; /* adjust as needed for desired height */
  pointer-events: none; /* allow clicks to pass through */
  mask-image: linear-gradient(to top, black 40%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, black 40%, transparent 100%);
  backdrop-filter: blur(80px);
  -webkit-backdrop-filter: blur(80px); /* safari support */
}

.projects_collection_sqr_square_description p {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
}

.projects_collection_sqr_square_description h3 {
  margin-bottom: calc(var(--variable_spacing_01) / 2);
}

.projects_collection_sqr_moredetails_button {
  margin: 0;
  padding: 0;
}

/* projects collection squares hashtags styling */
.projects_collection_sqr_square_tags {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(3, auto); /* two tags per row */
  top: var(--variable_spacing_01);
  right: var(--variable_spacing_01);
  gap: 10px; /* space between buttons manual */
  direction: rtl; /* reversed horizontal */
}

.tag {
  line-height: 1.2;
  font-weight: 300;
}

.tag {
  display: inline-grid; /* use grid */
  grid-template-columns: auto auto; /* two columns: one for text, one for icon */
  background: var(--variable_tagelement_01_color_01);
  backdrop-filter: blur(20px); /* apply blur */
  -webkit-backdrop-filter: blur(20px); /* safari support */
  padding: calc(var(--variable_spacing_items_01) * 1) calc(var(--variable_spacing_items_01) * 2);
  border-radius: var(--variable_borderradius_02);
  margin: 0;
  text-align: center;
  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 */
  width: auto; /* ensure the button only takes as much space as needed */
  justify-self: start; /* align button to the left */
  align-self: end;
}

/* projects collection squares text styling */
.projects_collection_sqr_square_description {
  display: grid;
  position: absolute;
  bottom: 0;
  left: 0;
  color: white;
  text-align: left;
  border-radius: 10px;
  width: 100%;
}

/* projects collection squares more details button */
.projects_collection_sqr_moredetails_button {
  display: inline-grid; /* use grid */
  grid-template-columns: auto auto; /* two columns: one for text, one for icon */
  background: linear-gradient(155deg,
  var(--variable_button_04_color_03) 0%,
  var(--variable_button_04_color_02) 25%,
  var(--variable_button_04_color_01) 100%);
  backdrop-filter: blur(10px); /* apply blur */
  -webkit-backdrop-filter: blur(10px); /* safari support */
  padding: calc(var(--variable_spacing_items_01) * 1) calc(var(--variable_spacing_items_01) * 2);
  border-radius: var(--variable_borderradius_02);
  text-align: center;
  color: var(--variable_color_offblack); /* 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 */
  width: auto; /* ensure the button only takes as much space as needed */
  justify-self: start; /* align button to the left */
  align-self: end;
  margin-top: calc(var(--variable_spacing_01));
  margin-bottom: var(--variable_spacing_01);
  margin-left: var(--variable_spacing_01);
}

/* projects collection squares arrow button container */
.projects_collection_sqr_arrow_controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px; /* space between the arrows */
  justify-content: end; /* aligns to the right bottom */
  align-items: center;
  position: absolute;
  bottom: var(--variable_spacing_01);
  right: var(--variable_spacing_01);
}

/* projects collection squares arrow button styling */
.arrow_button {
  display: grid;
  place-items: center;
  background-color: var(--variable_button_03_color_01);
  border: var(--variable_borderline) solid var(--variable_color_offwhite); /* border */
  backdrop-filter: blur(10px); /* apply blur */
  -webkit-backdrop-filter: blur(10px); /* safari support */
  width: calc(var(--variable_spacing_items_01) * 9/2);
  height: calc(var(--variable_spacing_items_01) * 9/2);
  border-radius: var(--variable_borderradius_02);
  cursor: pointer;
}

/* projects collection squares arrow icon styling */
.arrow_icon {
  height: calc(var(--variable_spacing_items_01) * 3);
  width: calc(var(--variable_spacing_items_01) * 3);
  filter: brightness(0) invert(1); /* make icon white */
}

/* projects collection squares image container for smooth transitions */
.projects_collection_sqr_square_image {
  background-color: var(--variable_color_gray_05); /* gray background during transition */
}

/* media queries for smaller screens */
@media (max-width: 750px) {
  /* projects collection squares hashtags styling */
  .projects_collection_sqr_square_tags {
    position: absolute;
    display: grid;
    grid-template-columns: repeat(2, auto); /* two tags per row */
    top: var(--variable_spacing_01);
    right: var(--variable_spacing_01);
    gap: 10px; /* space between buttons manual */
    direction: rtl; /* reversed horizontal */
  }
}

@media (max-width: 600px) {
  .projects_collection_sqr_container_content {
    display: grid;
    grid-template-columns: 1fr; /* single column on smaller screens */
    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_collection_sqr_container_content.odd-images {
    padding-bottom: 0;
  }

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

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

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

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

  .projects_collection_sqr_moredetails_button {
    margin-top: calc(var(--variable_spacing_01));
    margin-bottom: var(--variable_spacing_01);
    margin-left: var(--variable_spacing_01);
  }

  /* projects collection squares hashtags styling */
  .projects_collection_sqr_square_tags {
    position: absolute;
    display: grid;
    grid-template-columns: repeat(3, auto); /* two tags per row */
    top: var(--variable_spacing_01);
    right: var(--variable_spacing_01);
    gap: 10px; /* space between buttons manual */
    direction: rtl; /* reversed horizontal */
  }
}