/***
    LANDING PAGE FIELD COLLECTION:
      NOTE: flexbox layout is used on this selector due to not being able to override the field collection module markup for this specfic field. 
      This layout is specific to the landing page tiles that need to be equal height in according to the designs. 
      https://www.sketch.com/s/098f0013-96b7-4d37-b3de-6e37914f8a91/a/4PbovZ
***/

/* To hide page title since it is being printed on the image */
.node-type-landing-page #page-title {
  display: none;
}

.field-name-field-tile .field-collection-view {
  border: 0;
  padding: 0;
  margin: 0;
}

.field.field-name-field-tile.field-type-field-collection > .field-items {
  display: flex;
  flex-direction: column;
}

.field.field-name-field-tile.field-type-field-collection > .field-items > .field-item {
  position: relative;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  flex: 1 0 auto;
  margin-bottom: 32px;
}

@media (min-width: 768px) {
  .field.field-name-field-tile.field-type-field-collection > .field-items {
    flex-direction: row;
    flex-wrap: wrap;
    margin-left: -15px; /* shifts container to the left to account for margin-left spacing on the tiles. */
  }

  .field.field-name-field-tile.field-type-field-collection > .field-items > .field-item {
    max-width: 48%;
    width: 48%;
    margin-left: 15px;
  }
}

@media (min-width: 1025px) {
  .field.field-name-field-tile.field-type-field-collection > .field-items {
    margin-left: -20px; /* shifts container to the left to account for margin-left spacing on the tiles. */
  }

  .field.field-name-field-tile.field-type-field-collection > .field-items > .field-item {
    max-width: 31%;
    width: 31%;
    margin-left: 20px;
  }
}

@media (min-width: 1400px) {
  .field.field-name-field-tile.field-type-field-collection > .field-items {
    margin-left: -30px; /* shifts container to the left to account for margin-left spacing on the tiles. */
  }

  .field.field-name-field-tile.field-type-field-collection > .field-items > .field-item {
    margin-left: 30px;
  }
}