body {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans", sans-serif;
}
.grid-container {
  display: grid;
  grid-template-areas: "header header" "sidebar main" "footer footer";
}
.header {
  grid-area: header;
}
.main {
  grid-area: main;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px;
}
.footer {
  grid-area: footer;
}
.sidebar {
  grid-area: sidebar;
  width: 200px;
  /* se anida un flex en grid */
  display: flex;
  flex-direction: column;
}
.producto {
  display: flex;
  flex-direction: column;
}
.producto img {
  /* asignando el tamaño al 100% del contenedor padre, se ajusta al viewport */
  height: 100%;
  width: 100%;
}
main h4 {
  font-weight: 600;
  margin-top: 3%;
}
main p {
  font-weight: 400;
  color: gray;
}
/* Elemento Aside Bootstrap */
.btn-toggle {
  padding: 0.25rem 0.5rem;
  font-weight: 600;
  color: var(--bs-emphasis-color);
  background-color: transparent;
}
.btn-toggle-nav a {
  padding: 0.1875rem 0.5rem;
  margin-top: 0.125rem;
  margin-left: 1.25rem;
}
.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
  background-color: var(--bs-tertiary-bg);
}