.container {
    padding-left: 2rem;
    padding-right: 2rem;
    background-color: #585757;
    margin-top: 5rem;
    margin-bottom: 5rem;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 80%; /* Width relative to the page size */
    height: 40rem;
    gap: 2%;
    border-radius: .2rem;
    box-shadow: .3rem .3rem .8rem #242424;
}

#carousel {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    max-width: 49%;
    max-height: 65%;
}

.container-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 49%;
}

.container-info h1 {
    font-size: 2rem;
    margin-bottom: 1.1%;
}

.price {
    font-size: 1.15rem;
    margin-bottom: 3%;
    font-weight: bold;
}

.cart-button {
    padding: 12px 24px;
    background-color: rgb(68, 68, 68);
    color: rgb(133, 133, 133);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.cart-button:hover {
    /* background-color: rgb(238, 153, 26); */
}

.important-msg {
    margin: 0;
}
.last {
    margin-bottom: 1rem;
}

.white-email {
    color: rgb(166, 188, 216);
}

.description {
    max-width: 100%;
    word-break: keep-all !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1rem;
    line-height: 1.5;
    word-break: normal;
    overflow-wrap: break-word;
}

.description-container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    background-color: #585757;
    margin-top: 5rem;
    margin-bottom: 7rem;

    width: 71%; /* Width relative to the page size */
    min-height: 15rem;
    gap: 2%;
    border-radius: .2rem;
    box-shadow: .3rem .3rem .8rem #242424;
}

.description-container h2 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
    align-items: center;
    height: auto;
    padding: 1rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    width: 90%;
  }

  #carousel {
    max-width: 100%;
    max-height: none;
    justify-content: center;
    margin-bottom: 2rem;
  }

  .container-info {
    max-width: 100%;
    align-items: center;
    text-align: center;
  }

  .container-info h1 {
    font-size: 1.5rem;
  }

  .description-container {
    padding: 1rem;
    margin-top: 2rem;
    margin-bottom: 3rem;
    width: 90%;
  }
}