@lonelyplanet/dotcom-core/src/templates/searchActive/styles.css

This package is meant to house some of our more common UI and shared libs across dotcom applications.

/* Template styles */

.templateAreaKeywords {
  max-height: 96px;
  width: 100%;
}

@supports (display: grid) {
  .templateAreaKeywords {
    grid-column: container;
    grid-row: 1 / 2;
  }
}

@media (min-width: 768px) {
  .templateAreaKeywords {
    margin-bottom: 64px;
    min-height: 96px;
  }

  @supports (display: grid) {
    .templateAreaKeywords {
      margin-bottom: 32px;
    }
  }
}

@supports (display: grid) {
  .templateAreaSearches {
    grid-column: container;
    grid-row: 2 / 3;
  }
}

@media (min-width: 768px) {
  .templateAreaSearches {
    float: left;
    width: span(4 fluid);
  }

  @supports (display: grid) {
    .templateAreaSearches {
      float: none;
      grid-column: column-start 1 / span 4;
      width: 100%;
    }
  }
}

@media (min-width: 1024px) {
  .templateAreaSearches {
    margin-right: calc(54 / 1290 * 100%);
  }

  @supports (display: grid) {
    .templateAreaSearches {
      border-right: 1px solid var(--border-color);
      margin-right: 0;
      padding-right: 80px;
    }
  }
}

@supports (display: grid) {
  .templateAreaTopics {
    grid-column: container;
    grid-row: 3 / 4;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .templateAreaTopics {
    display: none;
  }
}

@media (min-width: 1024px) {
  .templateAreaTopics {
    float: left;
    padding-left: calc(96 / 1290 * 100%);
    width: span(4 fluid);
  }

  @supports (display: grid) {
    .templateAreaTopics {
      float: none;
      grid-column: column-start 5 / span 4;
      grid-row: 2 / 3;
      padding-left: 96px;
      width: 100%;
    }
  }
}

@supports (display: grid) {
  .templateAreaFeatured {
    grid-column: container;
    grid-row: 4 / 5;
  }
}

@media (min-width: 768px) {
  .templateAreaFeatured {
    float: left;
    width: span(4 fluid);
  }

  @supports (display: grid) {
    .templateAreaFeatured {
      float: none;
      grid-column: column-start 5 / span 4;
      grid-row: 2 / 3;
      width: 100%;
    }
  }
}

@media (min-width: 1024px) {
  .templateAreaFeatured {
    padding-left: calc(80 / 1290 * 100%);
    width: span(4 fluid);
  }

  @supports (display: grid) {
    .templateAreaFeatured {
      border-left: 1px solid var(--border-color);
      grid-column: column-start 9 / span 4;
      padding-left: 80px;
      width: 100%;
    }
  }
}

.templateAreaDestinations {
  float: left;
  margin-top: 32px;
  width: 100%;
}

@supports (display: grid) {
  .templateAreaDestinations {
    float: none;
    grid-column: container;
    grid-row: 5 / 6;
    margin-top: 0;
  }
}

@media (min-width: 768px) {
  @supports (display: grid) {
    .templateAreaDestinations {
      grid-column: container-start / full-end;
      grid-row: 3 / 4;
    }
  }
}

@media (min-width: 1024px) {
  .templateAreaDestinations {
    margin-bottom: 64px;
  }

  @supports (display: grid) {
    .templateAreaDestinations {
      margin-bottom: 32px;
    }
  }
}