@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap");
/*___colors___*/
/*___font-weights___*/
*, ::before, ::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "DM Sans", sans-serif;
}

/*___body__*/
body {
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5625rem;
}

a, a:hover, a:visited {
  text-decoration: none;
  outline: none;
}

li {
  list-style-type: none;
}

/*___headings___*/
h1, h2, h3, h4 {
  font-weight: 700;
}

h1 {
  font-size: 2.5rem;
  line-height: 3rem;
  letter-spacing: 0.2625rem;
}
@media screen and (max-width: 767px) {
  h1 {
    font-size: 2rem;
    letter-spacing: 0.2081rem;
  }
}

h2 {
  font-size: 1.5rem;
  line-height: 1.5625rem;
}

h3 {
  font-size: 1.125rem;
  line-height: 1.5625rem;
}

h4 {
  font-size: 0.75rem;
  line-height: 1rem;
}

.wrapper--header {
  padding: 1.875rem 1.5rem;
}
@media screen and (min-width: 768px) {
  .wrapper--header {
    padding: 1rem 2.4375rem;
  }
}
@media screen and (min-width: 1440px) {
  .wrapper--header {
    padding: 1rem 10.3125rem;
  }
}
.wrapper--footer {
  padding: 3.5625rem 2.0625rem;
}
@media screen and (min-width: 768px) {
  .wrapper--footer {
    padding: 3.9375rem 2.4375rem;
  }
}
@media screen and (min-width: 1440px) {
  .wrapper--footer {
    padding: 4rem 10.5rem;
  }
}
.wrapper--pricing, .wrapper--compare {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  padding-bottom: 4rem;
}
@media screen and (min-width: 768px) {
  .wrapper--pricing, .wrapper--compare {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-bottom: 7rem;
  }
}
@media screen and (min-width: 1440px) {
  .wrapper--pricing, .wrapper--compare {
    padding-bottom: 10rem;
  }
}
.wrapper--pricing {
  padding-top: 4rem;
}
@media screen and (min-width: 768px) {
  .wrapper--pricing {
    padding-top: 7rem;
  }
}
@media screen and (min-width: 1440px) {
  .wrapper--pricing {
    padding-top: 12.5rem;
  }
}

.header {
  width: 100%;
  height: 5rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  background-color: #FFFFFF;
  z-index: 3;
}
.header__logo img {
  width: 10.625rem;
  height: 1rem;
}
.header__menu {
  display: none;
}
@media screen and (min-width: 768px) {
  .header__menu {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}
@media screen and (max-width: 767px) {
  .header__menu--active {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 4.5rem;
    left: 0;
    width: 100%;
    padding: 2.0635rem;
    height: 15.75rem;
    background-color: #FFFFFF;
    z-index: 2;
  }
}
.header__menu-link {
  padding-bottom: 1.3125rem;
  width: 100%;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .header__menu-link {
    padding-bottom: 0;
    margin-right: 2.25rem;
  }
}
.header__menu-link:nth-child(3) {
  border-bottom: 1px solid #000000;
}
@media screen and (min-width: 768px) {
  .header__menu-link:nth-child(3) {
    border-bottom: none;
    margin-right: 0;
  }
}
.header__menu-link a {
  color: #000000;
}
.header__menu-link a:hover {
  color: #DFDFDF;
}
.header__cta {
  display: none;
}
@media screen and (max-width: 767px) {
  .header__cta--visible {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 15.375rem;
    left: 2.0625rem;
    right: 2.0625rem;
  }
}
@media screen and (min-width: 768px) {
  .header__cta {
    display: block;
  }
}
.header__hamburger-icon {
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .header__hamburger-icon {
    display: none;
  }
}

.menu-bg-mobile {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #000000;
  opacity: 0.6;
  display: none;
}
.menu-bg-mobile--active {
  display: block;
  z-index: 1;
}

.about {
  margin-top: 4.5rem;
}
.about__card {
  width: 100%;
  position: relative;
}
.about__card:hover::after {
  content: "";
  background: linear-gradient(45deg, #FFC593, #BC7198, #5A77FF);
  position: absolute;
  height: 0.375rem;
  width: 8rem;
  top: 18.375rem;
}
@media screen and (min-width: 768px) {
  .about__card:hover::after {
    width: 0.375rem;
    height: 9rem;
    height: 30%;
    top: 35%;
  }
}
@media screen and (min-width: 1440px) {
  .about__card:hover::after {
    height: 50%;
    top: 25%;
  }
}
.about__card:nth-child(1):hover::after, .about__card:nth-child(3):hover::after {
  left: 2rem;
}
@media screen and (min-width: 768px) {
  .about__card:nth-child(1):hover::after, .about__card:nth-child(3):hover::after {
    left: 0;
  }
}
@media screen and (max-width: 767px) {
  .about__card:nth-child(2):hover::after {
    left: 2rem;
  }
}
@media screen and (min-width: 768px) {
  .about__card:nth-child(2):hover::after {
    right: 0;
  }
}
@media screen and (min-width: 768px) {
  .about__card {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
  }
  .about__card:nth-child(2) {
    flex-direction: row;
  }
}
.about__card--dark {
  background-color: #000000;
}
.about__card--dark h1 {
  color: #FFFFFF;
}
.about__card--dark p {
  color: #DFDFDF;
}
.about__card--home:nth-child(1) .about__card-img {
  height: 18.375rem;
  background-image: url("../assets/home/mobile/create-and-share.jpg");
}
@media screen and (min-width: 768px) {
  .about__card--home:nth-child(1) .about__card-img {
    height: 40.6875rem;
    background-image: url("../assets/home/tablet/create-and-share.jpg");
  }
}
@media screen and (min-width: 1440px) {
  .about__card--home:nth-child(1) .about__card-img {
    background-image: url("../assets/home/desktop/create-and-share.jpg");
  }
}
.about__card--home:nth-child(2) .about__card-img {
  height: 16.875rem;
  background-image: url("../assets/home/mobile/beautiful-stories.jpg");
}
@media screen and (min-width: 768px) {
  .about__card--home:nth-child(2) .about__card-img {
    height: 37.5rem;
    background-image: url("../assets/home/tablet/beautiful-stories.jpg");
  }
}
@media screen and (min-width: 1440px) {
  .about__card--home:nth-child(2) .about__card-img {
    background-image: url("../assets/home/desktop/beautiful-stories.jpg");
  }
}
.about__card--home:nth-child(3) .about__card-img {
  height: 16.875rem;
  background-image: url("../assets/home/mobile/designed-for-everyone.jpg");
}
@media screen and (min-width: 768px) {
  .about__card--home:nth-child(3) .about__card-img {
    height: 37.5rem;
    background-image: url("../assets/home/tablet/designed-for-everyone.jpg");
  }
}
@media screen and (min-width: 1440px) {
  .about__card--home:nth-child(3) .about__card-img {
    background-image: url("../assets/home/desktop/designed-for-everyone.jpg");
  }
}
.about__card--features .about__card-img {
  background-image: url("../assets/features/mobile/hero.jpg");
  height: 18.375rem;
}
@media screen and (min-width: 768px) {
  .about__card--features .about__card-img {
    height: 40.6875rem;
    background-image: url("../assets/features/tablet/hero.jpg");
  }
}
@media screen and (min-width: 1440px) {
  .about__card--features .about__card-img {
    background-image: url("../assets/features/desktop/hero.jpg");
  }
}
.about__card--pricing .about__card-img {
  background-image: url("../assets/pricing/mobile/hero.jpg");
  height: 18.375rem;
}
@media screen and (min-width: 768px) {
  .about__card--pricing .about__card-img {
    height: 40.6875rem;
    background-image: url("../assets/pricing/tablet/hero.jpg");
  }
}
@media screen and (min-width: 1440px) {
  .about__card--pricing .about__card-img {
    background-image: url("../assets/pricing/desktop/hero.jpg");
  }
}
.about__card-img {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
@media screen and (min-width: 768px) {
  .about__card-img {
    width: 18.2rem;
    min-width: 18.2rem;
    max-width: 18.2rem;
  }
}
@media screen and (min-width: 1440px) {
  .about__card-img {
    width: 55.4rem;
    min-width: 55.4rem;
    max-width: 55.4rem;
  }
}
.about__card-text {
  width: 18.5rem;
  min-width: 18.5rem;
  max-width: 18.5rem;
  margin: auto;
  padding: 4.5rem 0.5rem 4.5rem 0.5rem;
}
@media screen and (min-width: 375px) {
  .about__card-text {
    width: 19.875rem;
    min-width: 19.875rem;
    max-width: 19.875rem;
  }
}
@media screen and (min-width: 768px) {
  .about__card-text {
    padding: 0;
    width: 24.1875rem;
    min-width: 24.1875rem;
    max-width: 24.1875rem;
  }
}
.about__card-text h1 {
  margin-bottom: 1rem;
  text-transform: uppercase;
}
.about__card-text p {
  margin-bottom: 1.5rem;
}

@media screen and (min-width: 768px) {
  .stories {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
}
@media screen and (min-width: 1440px) {
  .stories {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
  }
}
.stories__error-modal {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.6);
  display: none;
}
.stories__error-modal-text {
  width: 19rem;
  height: 18.75rem;
  background-color: #FFFFFF;
  text-align: center;
  padding: 1.5rem;
}
.stories__error-modal-text p {
  margin-bottom: 1.75rem;
}
.stories__error-modal-text button {
  border: none;
}
@media screen and (min-width: 600px) {
  .stories__error-modal-text {
    width: 30rem;
    height: 20rem;
    padding: 2.5rem;
  }
}
@media screen and (min-width: 768px) {
  .stories__error-modal-text {
    width: 40rem;
    height: 20rem;
    padding: 4rem;
  }
}
.stories__error-modal--active, .stories__error-modal-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hero {
  color: #FFFFFF;
  margin-top: 5rem;
  position: relative;
}
.hero h1, .hero h4:nth-child(1) {
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.hero p, .hero__date-and-author {
  margin-bottom: 1.5rem;
}
@media screen and (min-width: 768px) {
  .hero {
    min-height: 40.625rem;
  }
}
.hero__img {
  background-image: url("../assets/stories/mobile/moon-of-appalacia.jpg");
  background-repeat: no-repeat;
  min-height: 19.75rem;
  background-size: cover;
}
@media screen and (min-width: 768px) {
  .hero__img {
    min-height: 40.625rem;
    background-image: url("../assets/stories/tablet/moon-of-appalacia.jpg");
  }
}
@media screen and (min-width: 1440px) {
  .hero__img {
    background-image: url("../assets/stories/desktop/moon-of-appalacia.jpg");
  }
}
.hero__text {
  background-color: #000000;
  padding: 3rem 1.75rem;
}
@media screen and (min-width: 768px) {
  .hero__text {
    position: absolute;
    left: 0;
    top: 0;
    width: 24.25rem;
    height: 25.475rem;
    min-height: 25.475rem;
    max-height: 25.475rem;
    background-color: transparent;
    padding: 0;
    margin-left: 2.5rem;
    margin-top: 7.5rem;
  }
}
@media screen and (min-width: 1440px) {
  .hero__text {
    margin-left: 7rem;
  }
}

.banner {
  background-repeat: no-repeat;
  width: 100%;
}
.banner--beta {
  background-image: url("../assets/shared/mobile/bg-beta.jpg");
  background-size: cover;
  height: 18rem;
  color: #FFFFFF;
  padding: 4rem 2rem;
}
.banner--beta h1 {
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  width: 19.375rem;
}
@media screen and (max-width: 374px) {
  .banner--beta h1 {
    width: auto;
    font-size: 1.25rem;
  }
}
@media screen and (min-width: 768px) {
  .banner--beta {
    background-image: url("../assets/shared/tablet/bg-beta.jpg");
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 17.5rem;
    padding: 4.25rem 2.5rem;
  }
  .banner--beta h1 {
    width: 25rem;
  }
}
@media screen and (min-width: 1440px) {
  .banner--beta {
    background-image: url("../assets/shared/desktop/bg-beta.jpg");
    padding: 4.25rem 10.25rem;
  }
}

.footer {
  background-color: #000000;
  color: #FFFFFF;
  display: grid;
  row-gap: 1.4rem;
  grid-template-areas: "logo" "social-medias" "links" "cta" "copyrights";
}
@media screen and (min-width: 768px) {
  .footer {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas: "logo cta" "links ." ". ." "social-medias copyrights";
  }
}
@media screen and (min-width: 1440px) {
  .footer {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "logo links . cta" "social-medias links . copyrights";
    row-gap: 0;
  }
}
.footer__logo, .footer__social-medias, .footer__links, .footer__cta, .footer__copyrights {
  justify-self: center;
}
@media screen and (min-width: 768px) {
  .footer__logo, .footer__social-medias, .footer__links, .footer__cta, .footer__copyrights {
    align-self: center;
  }
}
.footer__logo {
  grid-area: logo;
}
.footer__logo img {
  width: 10.625rem;
  height: 1rem;
}
@media screen and (min-width: 768px) {
  .footer__logo {
    justify-self: start;
  }
}
@media screen and (min-width: 1440px) {
  .footer__logo {
    align-self: start;
  }
}
.footer__logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 768px) {
  .footer__logo-container {
    justify-content: flex-start;
  }
}
.footer__social-medias {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 9.5625rem;
  grid-area: social-medias;
}
@media screen and (min-width: 768px) {
  .footer__social-medias {
    justify-self: start;
  }
}
@media screen and (min-width: 1440px) {
  .footer__social-medias {
    align-self: end;
  }
}
.footer__social-medias li {
  width: 1.25rem;
  height: 1.25rem;
}
.footer__social-medias a {
  width: 100%;
  height: 100%;
  display: block;
  background-repeat: no-repeat;
  background-size: 1.25rem;
  background-position: center;
}
.footer__social-medias #facebook a {
  background-image: url("../assets/shared/desktop/facebook-white.svg");
}
.footer__social-medias #facebook a:hover {
  background-image: url("../assets/shared/desktop/facebook.svg");
}
.footer__social-medias #youtube a {
  background-image: url("../assets/shared/desktop/youtube-white.svg");
}
.footer__social-medias #youtube a:hover {
  background-image: url("../assets/shared/desktop/youtube.svg");
}
.footer__social-medias #twitter a {
  background-image: url("../assets/shared/desktop/twitter-white.svg");
}
.footer__social-medias #twitter a:hover {
  background-image: url("../assets/shared/desktop/twitter.svg");
}
.footer__social-medias #instagram a {
  background-image: url("../assets/shared/desktop/instagram-white.svg");
}
.footer__social-medias #instagram a:hover {
  background-image: url("../assets/shared/desktop/instagram.svg");
}
.footer__social-medias #pinterest a {
  background-image: url("../assets/shared/desktop/pinterest-white.svg");
}
.footer__social-medias #pinterest a:hover {
  background-image: url("../assets/shared/desktop/pinterest.svg");
}
.footer__links {
  grid-area: links;
  text-align: center;
}
@media screen and (min-width: 768px) and (max-width: 1439px) {
  .footer__links {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    justify-self: start;
    align-items: center;
    width: 19.6875rem;
  }
}
.footer__links a {
  color: #FFFFFF;
}
.footer__links a:hover {
  color: #808080;
}
@media screen and (min-width: 1440px) {
  .footer__links-item {
    margin-bottom: 1.125rem;
  }
  .footer__links-item:nth-child(4) {
    margin-bottom: 0;
  }
}
.footer__cta {
  grid-area: cta;
}
@media screen and (min-width: 768px) {
  .footer__cta {
    justify-self: end;
  }
}
@media screen and (min-width: 1440px) {
  .footer__cta {
    align-self: start;
  }
}
.footer__copyrights {
  color: #808080;
  grid-area: copyrights;
}
@media screen and (min-width: 768px) {
  .footer__copyrights {
    justify-self: end;
  }
}
@media screen and (min-width: 1440px) {
  .footer__copyrights {
    align-self: end;
  }
}

.btn {
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 0.9375rem;
  padding: 0.75rem 1.5rem;
  letter-spacing: 0.125rem;
  cursor: pointer;
}
.btn--arrow {
  width: auto;
  padding: 0;
  padding-right: 3.375rem;
  position: relative;
  text-align: left;
}
.btn--arrow:hover {
  text-decoration: underline;
}
.btn--arrow::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 2.75rem;
  height: 1rem;
  background-repeat: no-repeat;
}
.btn--onlight {
  color: #FFFFFF;
  background-color: #000000;
}
.btn--onlight:hover {
  color: #000000;
  background-color: #DFDFDF;
}
.btn--ondark {
  color: #000000;
  background-color: #FFFFFF;
}
.btn--ondark:hover {
  color: #000000;
  background-color: #DFDFDF;
}
.btn--arrow-ondark {
  color: #FFFFFF;
}
.btn--arrow-ondark::after {
  background-image: url("../assets/shared/desktop/arrow-white.svg");
}
.btn--arrow-onlight {
  color: #000000;
}
.btn--arrow-onlight::after {
  background-image: url("../assets/shared/desktop/arrow.svg");
}

.switch {
  width: 4rem;
  height: 2rem;
  border-radius: 2rem;
  background-color: #DFDFDF;
  position: relative;
  cursor: pointer;
}
.switch::after {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 2rem;
  position: absolute;
  top: 0.25rem;
  left: 0.125rem;
  background-color: #000000;
  transition: 0.3s ease-in-out;
}
.switch--active::after {
  left: 2.375rem;
}

.story {
  width: 100%;
  height: 100vw;
  color: #FFFFFF;
  padding: 14.75rem 1.5rem 2.5rem 1.5rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  bottom: 0;
  transition: bottom 0.2s ease-in-out;
  display: flex;
  align-items: flex-end;
}
.story__overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000000;
  opacity: 0;
  z-index: 1;
}
.story__text {
  position: relative;
  z-index: 2;
  width: 100%;
}
.story:hover {
  bottom: 1.5rem;
  cursor: pointer;
  transition: bottom 0.2s ease-in-out;
}
.story:hover .story__overlay {
  opacity: 0.4;
}
.story:hover::after {
  content: "";
  width: 100%;
  height: 0.375rem;
  background: linear-gradient(45deg, #FFC593, #BC7198, #5A77FF);
  position: absolute;
  bottom: -0.375rem;
  left: 0;
}
@media screen and (min-width: 768px) {
  .story {
    height: 34.7222vw;
    padding: 22.5rem 2.5rem 2.5rem 2.5rem;
  }
}
.story__text a {
  color: white;
  text-transform: uppercase;
  margin-top: 1.25rem;
  position: relative;
  display: block;
}
.story__text a::after {
  content: "";
  background-image: url("../assets/shared/desktop/arrow-white.svg");
  background-repeat: no-repeat;
  width: 2.6875rem;
  height: 0.875rem;
  position: absolute;
  top: 0.3rem;
  right: 0;
}
.story__author {
  padding-bottom: 1rem;
  border-bottom: 1px solid white;
}

/*___stories background images____*/
#mountains-story {
  background-image: url("../assets/stories/mobile/mountains.jpg");
}
@media screen and (min-width: 550px) {
  #mountains-story {
    background-image: url("../assets/stories/mobile-xl/mountains.jpg");
  }
}
@media screen and (min-width: 1440px) {
  #mountains-story {
    background-image: url("../assets/stories/desktop/mountains.jpg");
  }
}

#cityscapes-story {
  background-image: url("../assets/stories/mobile/cityscapes.jpg");
}
@media screen and (min-width: 550px) {
  #cityscapes-story {
    background-image: url("../assets/stories/mobile-xl/cityscapes.jpg");
  }
}
@media screen and (min-width: 1440px) {
  #cityscapes-story {
    background-image: url("../assets/stories/desktop/cityscapes.jpg");
  }
}

#eighteen-days-voyage-story {
  background-image: url("../assets/stories/mobile/18-days-voyage.jpg");
}
@media screen and (min-width: 550px) {
  #eighteen-days-voyage-story {
    background-image: url("../assets/stories/mobile-xl/18-days-voyage.jpg");
  }
}
@media screen and (min-width: 1440px) {
  #eighteen-days-voyage-story {
    background-image: url("../assets/stories/desktop/18-days-voyage.jpg");
  }
}

#architecturals-story {
  background-image: url("../assets/stories/mobile/architecturals.jpg");
}
@media screen and (min-width: 550px) {
  #architecturals-story {
    background-image: url("../assets/stories/mobile-xl/architecturals.jpg");
  }
}
@media screen and (min-width: 1440px) {
  #architecturals-story {
    background-image: url("../assets/stories/desktop/architecturals.jpg");
  }
}

#world-tour-story {
  background-image: url("../assets/stories/mobile/world-tour.jpg");
}
@media screen and (min-width: 550px) {
  #world-tour-story {
    background-image: url("../assets/stories/mobile-xl/world-tour.jpg");
  }
}
@media screen and (min-width: 1440px) {
  #world-tour-story {
    background-image: url("../assets/stories/desktop/world-tour.jpg");
  }
}

#unforeseen-corners-story {
  background-image: url("../assets/stories/mobile/unforeseen-corners.jpg");
}
@media screen and (min-width: 550px) {
  #unforeseen-corners-story {
    background-image: url("../assets/stories/mobile-xl/unforeseen-corners.jpg");
  }
}
@media screen and (min-width: 1440px) {
  #unforeseen-corners-story {
    background-image: url("../assets/stories/desktop/unforeseen-corners.jpg");
  }
}

#king-on-africa-story {
  background-image: url("../assets/stories/mobile/king-on-africa.jpg");
}
@media screen and (min-width: 550px) {
  #king-on-africa-story {
    background-image: url("../assets/stories/mobile-xl/king-on-africa.jpg");
  }
}
@media screen and (min-width: 1440px) {
  #king-on-africa-story {
    background-image: url("../assets/stories/desktop/king-on-africa.jpg");
  }
}

#trip-to-nowhere-story {
  background-image: url("../assets/stories/mobile/trip-to-nowhere.jpg");
}
@media screen and (min-width: 550px) {
  #trip-to-nowhere-story {
    background-image: url("../assets/stories/mobile-xl/trip-to-nowhere.jpg");
  }
}
@media screen and (min-width: 1440px) {
  #trip-to-nowhere-story {
    background-image: url("../assets/stories/desktop/trip-to-nowhere.jpg");
  }
}

#rage-of-the-sea-story {
  background-image: url("../assets/stories/mobile/rage-of-the-sea.jpg");
}
@media screen and (min-width: 550px) {
  #rage-of-the-sea-story {
    background-image: url("../assets/stories/mobile-xl/rage-of-the-sea.jpg");
  }
}
@media screen and (min-width: 1440px) {
  #rage-of-the-sea-story {
    background-image: url("../assets/stories/desktop/rage-of-the-sea.jpg");
  }
}

#running-free-story {
  background-image: url("../assets/stories/mobile/running-free.jpg");
}
@media screen and (min-width: 550px) {
  #running-free-story {
    background-image: url("../assets/stories/mobile-xl/running-free.jpg");
  }
}
@media screen and (min-width: 1440px) {
  #running-free-story {
    background-image: url("../assets/stories/desktop/running-free.jpg");
  }
}

#behind-the-waves-story {
  background-image: url("../assets/stories/mobile/behind-the-waves.jpg");
}
@media screen and (min-width: 550px) {
  #behind-the-waves-story {
    background-image: url("../assets/stories/mobile-xl/behind-the-waves.jpg");
  }
}
@media screen and (min-width: 1440px) {
  #behind-the-waves-story {
    background-image: url("../assets/stories/desktop/behind-the-waves.jpg");
  }
}

#calm-waters-story {
  background-image: url("../assets/stories/mobile/calm-waters.jpg");
}
@media screen and (min-width: 550px) {
  #calm-waters-story {
    background-image: url("../assets/stories/mobile-xl/calm-waters.jpg");
  }
}
@media screen and (min-width: 1440px) {
  #calm-waters-story {
    background-image: url("../assets/stories/desktop/calm-waters.jpg");
  }
}

#milky-way-story {
  background-image: url("../assets/stories/mobile/milky-way.jpg");
}
@media screen and (min-width: 550px) {
  #milky-way-story {
    background-image: url("../assets/stories/mobile-xl/milky-way.jpg");
  }
}
@media screen and (min-width: 1440px) {
  #milky-way-story {
    background-image: url("../assets/stories/desktop/milky-way.jpg");
  }
}

#dark-forest-story {
  background-image: url("../assets/stories/mobile/dark-forest.jpg");
}
@media screen and (min-width: 550px) {
  #dark-forest-story {
    background-image: url("../assets/stories/mobile-xl/dark-forest.jpg");
  }
}
@media screen and (min-width: 1440px) {
  #dark-forest-story {
    background-image: url("../assets/stories/desktop/dark-forest.jpg");
  }
}

#somwarpet-story {
  background-image: url("../assets/stories/mobile/somwarpet.jpg");
}
@media screen and (min-width: 550px) {
  #somwarpet-story {
    background-image: url("../assets/stories/mobile-xl/somwarpet.jpg");
  }
}
@media screen and (min-width: 1440px) {
  #somwarpet-story {
    background-image: url("../assets/stories/desktop/somwarpet.jpg");
  }
}

#land-of-dreams-story {
  background-image: url("../assets/stories/mobile/land-of-dreams.jpg");
}
@media screen and (min-width: 550px) {
  #land-of-dreams-story {
    background-image: url("../assets/stories/mobile-xl/land-of-dreams.jpg");
  }
}
@media screen and (min-width: 1440px) {
  #land-of-dreams-story {
    background-image: url("../assets/stories/desktop/land-of-dreams.jpg");
  }
}

.feature {
  text-align: center;
  margin-bottom: 3.5rem;
  justify-self: center;
  align-self: flex-start;
}
@media screen and (min-width: 768px) {
  .feature {
    margin: auto;
    margin-bottom: 5rem;
    width: 28.5rem;
    max-width: 28.5rem;
  }
}
@media screen and (min-width: 1440px) {
  .feature {
    width: 21.875rem;
    min-width: 21.875rem;
    max-width: 21.875rem;
    margin: 0;
  }
}
.feature__img {
  margin-bottom: 3rem;
  height: 4.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.feature h3 {
  margin-bottom: 1rem;
}

@media screen and (min-width: 768px) {
  .home__stories {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
}
@media screen and (min-width: 1440px) {
  .home__stories {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
  }
}

.features {
  padding: 5rem 2rem;
  display: grid;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 768px) {
  .features {
    padding: 7.5rem 9.75rem;
  }
}
@media screen and (min-width: 1440px) {
  .features {
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 6.5rem;
    max-width: 125rem;
    margin: auto;
  }
}

.pricing__card {
  background-color: #F5F5F5;
  padding: 3.5rem 1.5rem 2.5rem 1.5rem;
  margin-bottom: 1.5rem;
}
.pricing__card--best {
  background-color: #000000;
  color: #FFFFFF;
  padding: 3rem 1.5rem;
  position: relative;
}
.pricing__card--best::after {
  content: "";
  width: 100%;
  height: 0.375rem;
  background: linear-gradient(45deg, #FFC593, #BC7198, #5A77FF);
  position: absolute;
  top: -0.375rem;
  left: 0;
}
@media screen and (min-width: 768px) and (max-width: 1439px) {
  .pricing__card--best::after {
    top: 0;
    left: -0.375;
    height: 100%;
    width: 0.375rem;
  }
}
.pricing__card-text, .pricing__card-price, .pricing__card .pricing__cta {
  margin-bottom: 2.5rem;
  text-align: center;
}
.pricing__card-text h2 {
  margin-bottom: 1.125rem;
}
@media screen and (min-width: 1440px) {
  .pricing__card {
    width: 21.875rem;
    height: 25.375rem;
    padding: 2.5rem;
    padding-top: 3.5rem;
  }
  .pricing__card--best {
    height: 29.375rem;
    padding: 5.5rem 2.5rem 4.5rem 2.5rem;
  }
}
.pricing__cta {
  display: block;
  margin: auto;
}
.pricing__switch-selection {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2.5rem;
}
.pricing__mode {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.5rem;
  color: #808080;
}
.pricing__mode--selected {
  color: #000000;
}
.pricing #monthly-pricing-mode {
  margin-right: 2rem;
}
.pricing #yearly-pricing-mode {
  margin-left: 2rem;
}
@media screen and (min-width: 768px) and (max-width: 1439px) {
  .pricing__card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "description price" "cta .";
    height: 16.875rem;
    padding: 3rem;
    max-width: 62.5rem;
    margin: auto;
    margin-bottom: 1.5rem;
  }
  .pricing__card-price {
    grid-area: price;
    justify-self: center;
    text-align: right;
  }
  .pricing__card-price span {
    margin-right: 0.5rem;
  }
  .pricing__card-text {
    grid-area: description;
    justify-self: center;
    text-align: left;
    width: 16.875rem;
  }
  .pricing__cta {
    grid-area: cta;
    margin: 0;
    width: 16.875rem;
    height: 2.5rem;
    justify-self: center;
  }
}
@media screen and (min-width: 1440px) {
  .pricing {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width: 90rem;
    padding-left: 10.3125rem;
    padding-right: 10.3125rem;
    margin: auto;
    position: relative;
  }
  .pricing__switch-selection {
    position: absolute;
    top: 7.5rem;
    left: 0;
    width: 100%;
  }
}

.compare h1, .compare td, .compare th {
  text-transform: uppercase;
}
.compare h1 {
  text-align: center;
  padding-bottom: 4rem;
}
.compare h1, .compare table {
  margin: auto;
}
.compare table {
  border-collapse: collapse;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1rem;
  letter-spacing: 0.125rem;
}
.compare td, .compare th {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.compare thead tr {
  border-bottom: 1px solid #000000;
}
.compare tbody tr {
  border-bottom: 1px solid #DFDFDF;
}
.compare tr td, .compare tr th {
  width: 8.75rem;
}
.compare tr td:nth-child(1), .compare tr th:nth-child(1) {
  width: 15.5rem;
  padding-left: 1.5rem;
}
.compare tr th:nth-child(1) {
  text-align: left;
}
.compare .checked {
  background-image: url("../assets/pricing/desktop/check.svg");
  background-repeat: no-repeat;
  background-position: center;
  width: 1.125rem;
  height: 0.9375rem;
}
@media screen and (max-width: 767px) {
  .compare table {
    width: 100%;
  }
  .compare th:not(:nth-child(1)) {
    display: none;
  }
  .compare tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "tag tag tag" "check1 check2 check3";
  }
  .compare tbody td {
    place-self: center;
    position: relative;
    justify-self: flex-start;
  }
  .compare tbody td::before {
    color: #808080;
    position: absolute;
    top: -0.5rem;
  }
  .compare tbody td:nth-child(1) {
    grid-area: tag;
    place-self: center flex-start;
    width: 100%;
    padding-left: 0;
  }
  .compare tbody td:nth-child(2) {
    grid-area: check1;
  }
  .compare tbody td:nth-child(2)::before {
    content: "basic";
  }
  .compare tbody td:nth-child(3) {
    grid-area: check2;
  }
  .compare tbody td:nth-child(3)::before {
    content: "pro";
  }
  .compare tbody td:nth-child(4) {
    grid-area: check3;
  }
  .compare tbody td:nth-child(4)::before {
    content: "business";
  }
  .compare tr td {
    width: 3.75rem;
  }
}

/*# sourceMappingURL=styles.css.map */