.main-container {
  width: 100%;
  height: fit-content;
  justify-content: center;
  display: flex;
  flex-direction: column;
  padding-top: 0px;
  margin-bottom: 50px;
}
.profile-container {
  background-color: var(--onPrimary-color);
  padding-block: 20px;
  direction: rtl;
  justify-content: space-between;
  padding-inline: 300px;
  display: flex;
}
.avatar-container img {
  width: 350px;
  aspect-ratio: 1/1;
  border-radius: 999%;
}

.info-container {
  display: flex;
  flex-direction: column;
  justify-content: right;
  align-items: center;
  height: 100%;
}
.info-container p {
  font-size: xx-large;
  text-align: right;
  width: 100%;
}
.title-container {
  direction: rtl;
  width: 100%;
  margin-block: 50px;
}
.title-container p {
  color: black;
  font-weight: bold;
  font-size: xx-large;

  margin-right: 150px;
}

.description-container {
  direction: rtl;
  width: 100%;
  margin-block: 0px;
}
.description-container p {
  color: black;
  font-size: xx-large;
  margin-right: 150px;
}

.grid-container {
  width: 100%;
}
.grid {
  display: grid;
  justify-items: center;
  /* grid-template-columns: repeat(4,1fr); */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-row-gap: 70px;
  padding-inline: 110px;
  /* Does nothing on its own for layout, but we keep it */
  transition:
    padding 0.3s ease,
    gap 0.3s ease;
  /* make items in each row have the same height */
  grid-auto-rows: 1fr;
  height: min-content;
  direction: rtl;
}
.grid-item {
  border: solid var(--onPrimary-color) 5px;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  word-break: normal;
  width: max-content;
  align-items: center;
}
.grid-item img {
  width: 250px;
  aspect-ratio: 1/1;
  border-radius: 15px;
}
.grid-item p {
  color: black;
  text-align: right;
  width: 100%;
  max-width: 250px;
  padding-inline: 10px;
  direction: rtl;
}

.product-container {
  width: 100%;
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.product-item {
  direction: rtl;
  justify-content: right;
  display: flex;
  border-radius: 15px;
  border: solid var(--onPrimary-color);
  width: 60%;
  padding: 20px;
  align-items: center;
  margin-block: 20px;
}
.product-image-container {
  width: 150px;
  background-color: var(--onPrimary-color);
  padding: 20px;
  border-radius: 15px;
  aspect-ratio: 1/1;
  resize: vertical;
  display: flex;
  justify-content: center;
  align-items: center;
}
.product-image-container img {
  width: 120px;
}
.product-item p {
  color: var(--onPrimary-color);
  font-size: xx-large;
  max-width: 70%;
  margin: 0;
  margin-right: 120px;
}
.image-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin-block: 50px;
}
.image-container img {
  max-width: 80%;
}

@media only screen and (max-width: 768px) {
  .main-container {
    width: 100%;
    height: fit-content;
    justify-content: center;
    display: flex;
    flex-direction: column;
    padding-top: 0px;
    margin-bottom: 50px;
  }
  .profile-container {
    background-color: var(--onPrimary-color);
    padding-block: 20px;
    direction: rtl;
    justify-content: center;
    padding-inline: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .avatar-container img {
    width: 150px;
    aspect-ratio: 1/1;
    border-radius: 999%;
  }

  .info-container {
    display: flex;
    flex-direction: column;
    justify-content: right;
    align-items: center;
    height: 100%;
  }
  .info-container p {
    font-size: large;
    text-align: right;
    width: 100%;
  }
  .title-container {
    direction: rtl;
    width: 100%;
    margin-block: 10px;
  }
  .title-container p {
    color: black;
    font-weight: bold;
    font-size: large;

    margin-right: 20px;
  }

  .description-container {
    direction: rtl;
    width: 100%;
    margin-block: 0px;
  }
  .description-container p {
    color: black;
    font-size: large;
    margin-right: 20px;
    padding-left: 20px;
  }

  .grid-container {
    width: 100%;
  }
  .grid {
    display: grid;
    justify-items: center;
    /* grid-template-columns: repeat(4,1fr); */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-row-gap: 70px;
    padding-inline: 100px;
    /* Does nothing on its own for layout, but we keep it */
    transition:
      padding 0.3s ease,
      gap 0.3s ease;
    /* make items in each row have the same height */
    grid-auto-rows: 1fr;
    height: min-content;
    direction: rtl;
  }
  .grid-item {
    border: solid var(--onPrimary-color) 5px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    word-break: normal;
    width: max-content;
    align-items: center;
  }
  .grid-item img {
    width: 200px;
    aspect-ratio: 1/1;
    border-radius: 15px;
  }
  .grid-item p {
    color: black;
    text-align: right;
    width: 90%;
    max-width: 250px;
    padding-inline: 0px;
    direction: rtl;
    font-size: medium;
  }

  .product-container {
    width: 100%;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .product-item {
    direction: rtl;
    justify-content: right;
    display: flex;
    border-radius: 15px;
    border: solid var(--onPrimary-color);
    width: 70%;
    padding: 20px;
    align-items: center;
    margin-block: 20px;
  }
  .product-image-container {
    width: 50px;
    background-color: var(--onPrimary-color);
    padding: 20px;
    border-radius: 15px;
    aspect-ratio: 1/1;
    resize: vertical;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .product-image-container img {
    width: 30px;
  }
  .product-item p {
    color: var(--onPrimary-color);
    font-size: medium;
    max-width: 90%;
    margin: 0;
    margin-right: 20px;
  }
  .image-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-block: 20px;

  }
  .image-container img {
    max-width: 80%;
  }
}