.content-frame {
  width: 100%;
  min-height: 60vh;
  border: solid var(--black) 2px;
  border-radius: 10px;
  margin: 1rem;
  padding: 2rem;
  background-color: hsla(60, 8%, 95%, 0.8);
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  margin-top: 5rem;
}

.content-frame h1 {
  font-size: 1.8rem;
  padding-top: 1rem;
  align-self: flex-start;
  display: inline-flex;
}

h2 {
  font-size: 2rem;
}



#next-button {
  background-color: var(--pink);
  height: 4.5rem;
  padding-top: 0.5rem;
}

#next-button:hover {
  background-color: var(--yellow);
}

.content-frame img {
  max-width: 100%;
  margin-bottom: 2rem;
}

.icons i {
  font-size: 2rem;
  margin: 0.3rem;
}

p.price {
  font-size: 2rem;
}

@media (min-width: 800px) {
  .content-frame {

    display: grid;
    grid-template-areas:
      "h1 image"
      "info image"
      "icons image"
      "icons image"
      "price button";
  }

  .content-frame h1 {
    grid-area: h1;
  }
  .content-frame img {
    grid-area: image;
    max-height: 80%;
    justify-self: center;
  }
  p.description {
    grid-area: info;
    max-width: 80%;

  }

  p.icons {
    grid-area: icons;
    justify-self: start;

  }

  .icons i {
    justify-self: start;
  }

  p.price {
    grid-area: price;

    align-self: center;
  }

  #next-button {
    grid-area: button;
    justify-self: center;

  }
}

span.breadcrumb {
  font-size: 1.8rem;
  color: hsla(22, 82%, 71%, 0.788);
}

span.breadcrumb i {
  padding: 0 1rem;
  color: var(--grey);
}

span.breadcrumb > h1 {
  color: var(--black);
}