.supremeContainer {
  width: 100%;
  display: flex;
  justify-content: center;
}

.mainContainer {
  width: 70rem;
  padding: 3rem 0.5rem;
}
.container1 {
  display: flex;
  column-gap: 4rem;
}

.smallImageContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  /* border: 1px solid rgb(227, 224, 224); */
}
.smallImage {
  width: 30rem;
  height: 27rem;
  border-radius: 10px;
  background-size: 100% 100%;
  cursor: zoom-in;
  transition: all 300ms ease;
}

.smallImage:hover {
  transform: scale(0.98);
}

.productSpecsContainer {
  display: flex;
  flex-direction: column;
  color: black;
}

.productCode {
  width: max-content;
  margin: 1rem 0;
  font-size: 3rem;
  letter-spacing: 2px;
  line-height: 4rem;
  color: #334c5b;
  border-bottom: 1px solid #334c5b;
}

.productDescription,
.productFinish,
.productCategory {
  color: #426276;
  text-align: left;
  font-size: large;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.5rem;
  margin-bottom: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  word-break: break-word;
}

.productDescription > span,
.productFinish > span,
.productCategory > span {
  font-size: medium;
  font-weight: normal;
  color: #58829d;
}

.productCategory {
  display: none !important;
}

.bigImageContainer {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  border-radius: 10px;
  animation: show 0.5s linear;
}

@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.bigImageContainer > div {
  display: flex;
  justify-content: end;
}

.closeButton {
  /* position: absolute;
    top: 550px;
    left: 0; */
  /* border-radius: 50%; */
  /* background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 32px 0 rgba(67, 67, 67, 0.37);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px); */
  width: 3rem;
  cursor: pointer;
  /* opacity: 50%; */
  transition: all 300ms ease;
}

.closeButton:hover {
  transform: scale(0.9);
  transition: all 700ms ease;
}

.bigImage {
  border-radius: 10px;
  width: 100%;
  height: 100%;
  box-shadow: 0 4px 16px 0 rgba(67, 67, 67, 0.3);
}

@media only screen and (max-width: 851px) {
  .smallImage {
    width: 26rem;
    height: 23rem;
    border-radius: 10px;
    background-size: 100% 100%;
    cursor: zoom-in;
    transition: all 300ms ease;
  }
}

@media only screen and (max-width: 772px) {
  .smallImage {
    width: 23rem;
    height: 20rem;
    border-radius: 10px;
    background-size: 100% 100%;
    cursor: zoom-in;
    transition: all 300ms ease;
  }
}

@media only screen and (max-width: 700px) {
  .smallImage {
    width: 22rem;
    height: 19rem;
    border-radius: 10px;
    background-size: 100% 100%;
    cursor: zoom-in;
    transition: all 300ms ease;
  }
  .productCode {
    font-size: 2rem;
    line-height: 3rem;
  }
  .productDescription,
  .productFinish,
  .productCategory {
    font-size: medium;
    line-height: 1.25rem;
  }

  .productDescription > span,
  .productFinish > span,
  .productCategory > span {
    font-size: small;
  }
  .closeButton {
    width: 2.75rem;
  }
}

@media only screen and (max-width: 660px) {
  .container1 {
    flex-direction: column;
  }
  .smallImage {
    width: 94vw;
    height: 26rem;
  }
  .productSpecsContainer {
    padding-left: 1rem;
  }
  .productCode {
    font-size: 3rem;
    line-height: 4rem;
  }
  .productDescription,
  .productFinish,
  .productCategory {
    font-size: large;
    line-height: 1.5rem;
  }

  .productDescription > span,
  .productFinish > span,
  .productCategory > span {
    font-size: medium;
  }
  .closeButton {
    width: 2.5rem;
  }
}

@media only screen and (max-width: 426px) {
  .smallImage {
    height: 24rem;
  }
  .productCode {
    font-size: 2.75rem;
    line-height: 3.75rem;
  }
  .closeButton {
    top: 50px;
    width: 2.5rem;
  }
}

@media only screen and (max-width: 376px) {
  .smallImage {
    height: 20rem;
  }
  .productCode {
    font-size: 2.5rem;
    line-height: 3.5rem;
  }
  .productDescription,
  .productFinish,
  .productCategory {
    font-size: medium;
    line-height: 1.25rem;
  }

  .productDescription > span,
  .productFinish > span,
  .productCategory > span {
    font-size: small;
  }
}

@media only screen and (max-width: 341px) {
  .smallImage {
    height: 17rem;
  }
  .productCode {
    font-size: 2.25rem;
    line-height: 3.5rem;
  }
  .closeButton {
    top: 45px;
    width: 2.25rem;
  }
}

@media only screen and (max-width: 320px) {
  .smallImage {
    height: 15rem;
  }
  .productCode {
    font-size: 2rem;
    line-height: 3rem;
  }
  .productDescription,
  .productFinish,
  .productCategory {
    line-height: 1rem;
  }
  .closeButton {
    top: 40px;
    width: 2rem;
  }
}