.widget {
  display: flex;

  padding: 20px 50px;
  margin: auto;
}

.widget-container {
  max-width: 30vw;
  margin: 5px auto;
  padding: 10px 15px;

  color: var(--letter);

  border-radius: 5px;
  box-sizing: border-box;
}

.widget-container:hover {
  cursor: pointer;
}

.widget-container-title {
  position: relative;
}

.metric-title {
  transform: translate(-10px, -30px);
  position: absolute;

  padding: 2px;

  font-weight: 500;
  font-size: 1em;

  border-radius: 5px;
  background-color: var(--background-2);
  border: 1px solid var(--decoration-alt-2);
}

.metric-plot {
  width: 70px;
  height: 70px;
}

@media only screen and (max-width: 362px) {
  .widget {
    gap: 20px;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "pl1 pl3"
      "pl2 pl2";
  }

  .widget-container:nth-child(1) {
    grid-area: pl1;
  }

  .widget-container:nth-child(2) {
    grid-area: pl2;
  }

  .widget-container:nth-child(3) {
    grid-area: pl3;
    justify-self: center;
  }
}
