.image-bracket-section {
  width: 100%;
  height: 100%;
}

.brackets-container {
  padding: 0px var(--gap) var(--gap);
  grid-gap: var(--gap);
  min-height: calc(100vh - 80px);
  display: grid;
}

.brackets-no-padding {
  padding:0px;
}

.first {
  grid-area: first;
}

.second {
  grid-area: second;
}

.third {
  grid-area: third;
}

.fourth {
  grid-area: fourth;
}

.one-image {
  grid-template-areas: "first";
  grid-template-columns: 1fr;
}

.two-images {
  grid-template-areas:
    "first second";
  grid-template-columns: 1fr 1fr;
}

.three-images {
  grid-template-areas:
    "first second"
    "first third";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.four-images {
  grid-template-areas:
    "first second third"
    "first fourth fourth";
  grid-template-columns: 1fr 0.5fr 0.5fr;
  grid-template-rows: 1fr 1fr;
}

.img-bracket-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.img-bracket {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  z-index: 0;
  padding: 0;
}

.blur-overlay {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(5px);
  transform: translate(-50%, -50%);
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.5);
  transition: 0.2s all;
}


.img-bracket-wrapper .link-wrapper {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  z-index: 3;
  font-family: "ABCWhyteSemi";
  font-size: 20px;
  font-size: clamp(16px, 3vw, 20px);
  ;
  transition: 0.2s all;
  text-decoration: none;
  width: 100%;
  text-align: center;
  padding: 0px 10px;
}

.img-bracket-wrapper__hover .blur-overlay,
.img-bracket-wrapper__hover .link-wrapper {
  opacity: 0;
}

.img-bracket-wrapper .link-wrapper p {
  max-width: 50%;
  align-self: center;
}

.img-bracket-wrapper .link-wrapper p:empty {
  display: none;
}

.img-bracket-wrapper .plus {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  opacity: 1;
  transition: 0.3s all;
}

.img-bracket-wrapper.img-bracket-wrapper__hover:hover .plus {
  opacity: 0;
  transition: 0.3s all 0.5s;
}

.img-bracket-wrapper .link-wrapper img {
  transition: all 0.3s;
}

.img-bracket-wrapper .link-wrapper:hover img {
  transform: translateX(10px);
}

.img-bracket-wrapper.img-bracket-wrapper__hover:hover .link-wrapper {
  opacity: 1;
  transition: 0.5s all 0.5s;

}

.img-bracket-wrapper.img-bracket-wrapper__hover:hover .blur-overlay {
  opacity: 1;
  transition: 0.5s all 0.3s;

}

.img-bracket-wrapper {
  border-right: 2px solid black;
  border-left: 2px solid black;
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(100% - 16px);
  height: 100%;
  transform: translateX(-50%);
}
.img-bracket-wrapper.no-brackets {
  width:100%;
}
.no-brackets {
  border-left: none;
  border-right:none;
}

.img-bracket-wrapper[data-href] {
  cursor: pointer;
}

.img-bracket-wrapper:not(.no-brackets)::after,
.img-bracket-wrapper:not(.no-brackets)::before {
  content: '';
  top: 0;
  position: absolute;
  transform: translateX(-50%);
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  width: 16px;
  height: 100%;
  z-index: 2;
}

.img-bracket-wrapper:not(.no-brackets)::before {
  left: -1px;
}

.img-bracket-wrapper:not(.no-brackets)::after {
  left: calc(100% + 1px);
}

.brackets>.right,
.hover-brackets>.right {
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
  right: 8%;
  width: 16px;
  height: 80%;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  transition: all 0.2s ease-in-out;
  opacity: 0;
  z-index: 3;
}

.brackets>.right {
  opacity: 1;
  height: 100%;
  right: 0;
}

.hover-brackets.error>.right,
.hover-brackets:hover>.right {
  right: 0;
  height: 100%;
  opacity: 1;
  transition: 0.3s all 0.2s ease-in-out;
}

.hover-brackets.error>.left,
.hover-brackets:hover>.left {
  left: 0;
  height: 100%;
  opacity: 1;
  transition: 0.3s all 0.2s ease-in-out;
}

.brackets>.left,
.hover-brackets>.left {
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
  left: 8%;
  width: 16px;
  height: 80%;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  transition: all 0.2s ease-in-out;
  opacity: 0;
  z-index: 3;
}

.brackets>.left {
  opacity: 1;
  height: 100%;
  left: 0;
}

.brackets>.right::after,
.brackets>.left::after,
.hover-brackets>.right::after,
.hover-brackets>.left::after {
  content: '';
  border-left: 2px solid black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  width: 2px;
}

#product-grid .brackets>.right,
#product-grid .brackets>.left,
.category-grid-list .brackets>.left,
.category-grid-list .brackets>.right {
  opacity: 0;
  transition: 0.3s all 0.2s;
}

#product-grid .card__inner:hover .brackets>.right,
#product-grid .card__inner:hover .brackets>.left,
.category-grid-list .card__inner:hover .brackets>.right,
.category-grid-list .card__inner:hover .brackets>.left {
  opacity: 1;
}

.product-form__error-message-wrapper[hidden].brackets>.right,
.product-form__error-message-wrapper[hidden].brackets>.left {
  opacity: 0;
}

.product-form__error-message-wrapper:not([hidden]).brackets>.left {
  opacity: 1 !important;
  left: -8px;
}

.product-form__error-message-wrapper:not([hidden]).brackets>.right {
  opacity: 1 !important;
  right: -8px;
}

@media screen and (max-width: 1399px) {
  .img-bracket-wrapper .link-wrapper {
    opacity: 1;
  }

  .img-bracket-wrapper .plus {
    display: none;
  }
}

@media screen and (orientation: portrait) {
  .two-images {
    grid-template-areas:
      "first"
      "second";
    grid-template-columns: 1fr;
  }

  .three-images {
    grid-template-areas:
      "first first"
      "second third";
    grid-template-columns: 1fr 1fr;
  }

  .four-images {
    grid-template-areas:
      "first first"
      "second fourth"
      "third fourth";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 0.5fr 0.5fr;
  }
}

@media screen and (max-width: 767px) {

  .card__inner .plus-sign,
  #product-grid .card__inner:hover .brackets>.left,
  #product-grid .card__inner:hover .brackets>.right,
  .item-details,
  .hover-brackets .left,
  .hover-brackets .right {
    display: none !important;
  }

  .img-bracket-wrapper .link-wrapper {
    display: flex;
    height: 100%;
    padding: 0px;
    z-index: 0;
  }

  .img-bracket-wrapper .link-wrapper p {
    flex: 1;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .img-bracket-wrapper .link-wrapper a {
    flex: 0 1 auto;
    transform: unset;
    top: unset;
    left: 0;
    bottom: 2px;
    background-color: white;
    text-align: center;
    opacity: 1 !important;
    width: 100%;
    padding: 20px 0px;
  }
  .one-image {
    grid-template-areas: "first";
    grid-template-columns: 1fr;
  }
  .two-images {
    grid-template-areas:
      "first"
      "second";
    grid-template-columns: 1fr;
  }

  .three-images {
    grid-template-areas:
      "first"
      "second"
      "third";
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }

  .four-images {
    grid-template-areas:
      "first"
      "second"
      "third"
      "fourth";
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 0.5fr 1fr 1fr;
  }

  .brackets-container {
    height: unset;
    grid-gap: 20px;
  }

  .brackets-container .img-bracket-container {
    position: unset;
  }

  .brackets-container .img-bracket-wrapper {
    position: relative;
  }

  .brackets-container .img-bracket {
    position: unset;
  }

  .img-bracket-container {
    min-height: 50vh;
  }

  .img-bracket-container.second.text {
    min-height: unset;
  }

  .brackets-container {
    padding: 0px 20px 20px;
  }
  .brackets-no-padding{
    padding:0;
    grid-gap: 0px;
  }

  .img-bracket-container .blur-overlay {
    display: none;
  }
}