.now main .wrapper {
  display: flex;
  max-width: 100%;
  margin-bottom: 2em; }
  .now main .wrapper .weather {
    flex: 1 1;
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    margin: -2em -2em 0 -2em; }
    .now main .wrapper .weather .data-item {
      flex: 1 1 300px;
      margin: 2em;
      display: flex; }
      .now main .wrapper .weather .data-item svg {
        height: 60px;
        width: 60px;
        margin-right: 1em; }
      .now main .wrapper .weather .data-item h2 {
        text-transform: none;
        color: rgba(255, 255, 255, 0.6);
        font-weight: normal;
        font-size: .9em;
        margin: 0; }
      .now main .wrapper .weather .data-item .value {
        font-weight: 600;
        font-size: 1.6em; }
      .now main .wrapper .weather .data-item .additional-value {
        font-size: 1.2em; }
    .now main .wrapper .weather .stale-warning {
      font-size: 1.3em;
      font-weight: 200; }
  .now main .wrapper .service-status {
    background: #ffe86a;
    border-radius: 6px;
    padding: 1em;
    text-align: center;
    color: black;
    margin-bottom: 1em; }
    .now main .wrapper .service-status p {
      margin: 0; }
  .now main .wrapper .webcam {
    flex: 1 1; }
  @media (min-width: 48em) {
    .now main .wrapper .weather .data-item svg {
      width: 80px;
      height: 80px; }
    .now main .wrapper .weather .data-item .value {
      font-size: 2em; }
    .now main .wrapper .weather .data-item .additional-value {
      font-size: 1.5em; } }
  @supports (display: grid) {
    .now main .wrapper {
      display: grid; }
      .now main .wrapper .weather {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        margin: 0 0 2em 0;
        grid-gap: 1em;
        align-content: space-between; }
        .now main .wrapper .weather .data-item {
          margin: 0; }
      @media (min-width: 62em) {
        .now main .wrapper .weather {
          margin: 0 auto 2em auto;
          grid-template-columns: repeat(3, minmax(250px, 1fr));
          justify-content: center;
          max-width: 1200px; } }
      @media (min-width: 1200px) {
        .now main .wrapper .webcam {
          text-align: center; }
          .now main .wrapper .webcam img {
            max-width: 1200px; } }
      @media (min-width: 1500px) {
        .now main .wrapper .weather {
          max-width: none;
          grid-template-columns: repeat(6, minmax(250px, 1fr));
          border-bottom: solid 1px rgba(255, 255, 255, 0.3);
          padding-bottom: 2em;
          margin: 0 0 2em 0; } } }

.now main footer {
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 2em;
  font-size: .9em; }
  .now main footer a {
    display: inline; }

.now main .wrapper .weather.single {
  margin-top: 2em; }