/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic (CALLED IN NORMALIZE.CSS)
	- Normalize
	- Box sizing
	- Media width
# Base
	- Typography
	- Elements
	- Links
# Components
	- Header
	- Main
	- Footer
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */

/* Elements
--------------------------------------------- */

/* Links
--------------------------------------------- */

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Header
--------------------------------------------- */

/* Hero
--------------------------------------------- */

/* Main
--------------------------------------------- */
.travel-summary {
  font-size: 1.125rem;
  font-weight: 600;
  text-align: center;
  line-height: 170%;
  margin: 2rem 0;
}

.travel {
  position: relative;
}

.travel-subtitle::after {
  content: '';
  display: none;
  position: absolute;
  right: -150px;
  top: 20px;
  width: 85%;
  height: 18.75rem;
  background-image: radial-gradient(#676767, 2px, transparent 2px);
  background-size: 1.5rem 1.5rem;
  z-index: -1;
}

.travel-img {
  height: 37.5rem;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

/* .highlight {
  position: relative;
}

.highlight::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: #f66761;
  z-index: -1;
} */

@media (min-width: 48em) {
  main {
    margin: 0 3rem;
    padding-top: 3rem;
  }

  .travel {
    margin-bottom: 6rem;
  }

  .travel-subtitle {
    font-size: 4rem;
    margin-bottom: 1rem;
  }

  .travel-img {
    margin-bottom: 1rem;
  }
}

@media (min-width: 60em) {
  .travel {
    padding-bottom: 5rem;
  }

  .travel-subtitle {
    font-size: 8rem;
  }

  .travel-summary {
    font-size: 1.5rem;
    line-height: 200%;
  }
}

@media (min-width: 90em) {
  main {
    padding-top: 5rem;
    margin: 0 auto;
    max-width: 62.5rem;
  }

  .travel {
    padding-bottom: 10rem;
  }

  .travel-subtitle {
    font-size: 10rem;
  }

  .travel-subtitle::after {
    display: block;
  }
}

/* Footer
--------------------------------------------- */