@-webkit-keyframes moveInLeft {
  /* Start */
  0% {
    opacity: 0;
    -webkit-transform: translateX(-10rem);
            transform: translateX(-10rem);
  }
  80% {
    /* Give a little bit of a bouncing effect. Our transform property is in relation to the initial state of the element we're applying this to. */
    -webkit-transform: translateX(1rem);
            transform: translateX(1rem);
  }
  /* We don't need to set 100% since our element will return to its initial state by itself once the animation is completed.
  But it's still good practice to for readability and to avoid unexpected behavior.

  We are working with the state of the initial state of the element throughout our animation, transform does not affect the document flow of the element.
  If it did, we would have to consider the state of the element along the way as the position and state of the element would be relative. */
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes moveInLeft {
  /* Start */
  0% {
    opacity: 0;
    -webkit-transform: translateX(-10rem);
            transform: translateX(-10rem);
  }
  80% {
    /* Give a little bit of a bouncing effect. Our transform property is in relation to the initial state of the element we're applying this to. */
    -webkit-transform: translateX(1rem);
            transform: translateX(1rem);
  }
  /* We don't need to set 100% since our element will return to its initial state by itself once the animation is completed.
  But it's still good practice to for readability and to avoid unexpected behavior.

  We are working with the state of the initial state of the element throughout our animation, transform does not affect the document flow of the element.
  If it did, we would have to consider the state of the element along the way as the position and state of the element would be relative. */
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@-webkit-keyframes moveInRight {
  /* Start */
  0% {
    opacity: 0;
    -webkit-transform: translateX(10rem);
            transform: translateX(10rem);
  }
  80% {
    /* Give a little bit of a bouncing effect */
    -webkit-transform: translateX(-1rem);
            transform: translateX(-1rem);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes moveInRight {
  /* Start */
  0% {
    opacity: 0;
    -webkit-transform: translateX(10rem);
            transform: translateX(10rem);
  }
  80% {
    /* Give a little bit of a bouncing effect */
    -webkit-transform: translateX(-1rem);
            transform: translateX(-1rem);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@-webkit-keyframes moveInBottom {
  /* Start */
  0% {
    opacity: 0;
    -webkit-transform: translateY(3rem);
            transform: translateY(3rem);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes moveInBottom {
  /* Start */
  0% {
    opacity: 0;
    -webkit-transform: translateY(3rem);
            transform: translateY(3rem);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
/* 0 - 600px:     Phone
601px - 900px:    Portrait Tablet
901px - 1200px:   Landscape Tablet
1201px - 1800px:  Base Style (Desktop)
1800px+:          Large Screens 

Arguments: phone, tab-port, tab-land, desk-large 

We go from largest to smallest in desktop-first to ensure the smaller screens override our larger styles.
The ranges are not strict. Meaning, that styles one media query may be applied to two different screen sizes if the screen size satisfies both conditions.
For example, If a screen size is 500px, it will satify both phone and tab-port condition. This is okay as we want our styles to be transferrable.
The ranges are just to help us get an overall idea to categorize the ranges. */
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  /* Instead of applying box-sizing: border-box to every single element individually, we use the inherit this from */
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}
@media only screen and (min-width: 112.5em) {
  html {
    font-size: 75%;
  }
}
@media only screen and (max-width: 75em) {
  html {
    font-size: 56.25%;
  }
}
@media only screen and (max-width: 56.25em) {
  html {
    font-size: 50%;
  }
}

body {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 3rem;
}
@media only screen and (max-width: 56.25em) {
  body {
    padding: 0;
  }
}

::-moz-selection {
  background-color: #55c57a;
  color: #fff;
}

::selection {
  background-color: #55c57a;
  color: #fff;
}

body {
  font-family: "Lato", "sans-serif";
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.7;
  color: #777;
}

.heading-primary {
  color: #fff;
  text-transform: uppercase;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  margin-bottom: 6rem;
}
.heading-primary__main {
  font-size: 6rem;
  font-weight: 400;
  letter-spacing: 3.5rem;
  -webkit-animation-name: moveInLeft;
          animation-name: moveInLeft;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}
@media only screen and (max-width: 37.5em) {
  .heading-primary__main {
    font-size: 5rem;
    letter-spacing: 1rem;
  }
}
.heading-primary__sub {
  font-size: 2rem;
  /* Since this text is smaller, we use more font-weight */
  font-weight: 700;
  letter-spacing: 1.75rem;
  -webkit-animation: moveInRight 1s ease-out;
          animation: moveInRight 1s ease-out;
}
@media only screen and (max-width: 37.5em) {
  .heading-primary__sub {
    letter-spacing: 0.5rem;
  }
}

.heading-secondary {
  font-size: 3.5rem;
  text-transform: uppercase;
  font-weight: 700;
  display: inline-block;
  background-image: -webkit-gradient(linear, left top, right top, from(#7ed56f), to(#28b485));
  background-image: linear-gradient(to right, #7ed56f, #28b485);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  letter-spacing: 0.2rem;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
@media only screen and (max-width: 37.5em) {
  .heading-secondary {
    font-size: 2.5rem;
  }
}
.heading-secondary:hover {
  -webkit-transform: skew(15deg, 2deg) scale(1.1);
      -ms-transform: skew(15deg, 2deg) scale(1.1);
          transform: skew(15deg, 2deg) scale(1.1);
  text-shadow: 0.5rem 1rem 2rem rgba(0, 0, 0, 0.2);
}

.heading-tertiary {
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase;
}

.paragraph {
  font-size: 1.6rem;
}
.paragraph:not(:last-of-type) {
  margin-bottom: 3rem;
}

.u-container {
  max-width: 114rem !important;
  margin: 0 auto !important;
}
@media only screen and (max-width: 56.25em) {
  .u-container {
    max-width: 50rem !important;
  }
}

.u-center-text {
  text-align: center !important;
}

.u-margin-bottom-small {
  margin-bottom: 1.5rem !important;
}

.u-margin-bottom-medium {
  margin-bottom: 4rem !important;
}
@media only screen and (max-width: 56.25em) {
  .u-margin-bottom-medium {
    margin-bottom: 2rem !important;
  }
}

.u-margin-bottom-big {
  margin-bottom: 8rem !important;
}
@media only screen and (max-width: 56.25em) {
  .u-margin-bottom-big {
    margin-bottom: 5rem !important;
  }
}

.u-margin-bottom-huge {
  margin-bottom: 10rem !important;
}

.u-column-gap-huge {
  -webkit-column-gap: 25rem !important;
     -moz-column-gap: 25rem !important;
          column-gap: 25rem !important;
}

.header {
  /* 95vh stands for 95% of the viewport height. The viewport is the visible area of the web page in the browser window.
  So, if the viewport height is 1000 pixels, 95vh would be 950 pixels.
  If the total height of the content on your page exceeds the viewport height (including the element with 95vh), then the page will be scrollable. */
  height: 95vh;
  background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(126, 213, 111, 0.8)), to(rgba(40, 180, 133, 0.8))), url(../img/hero-small.jpg);
  background-image: linear-gradient(to right bottom, rgba(126, 213, 111, 0.8), rgba(40, 180, 133, 0.8)), url(../img/hero-small.jpg);
  /* Our image will dynamically resize to fully cover our header element */
  background-size: cover;
  /* Want our image to be positioned from center top rather than left top (default) */
  background-position: center top;
  /* Reference point is the top left going from top left edge, top right edge, bottom right edge, bottom left edge */
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 80vh, 0 100%);
          clip-path: polygon(0 0, 100% 0, 100% 80vh, 0 100%);
  position: relative;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 37.5em), only screen and (min-resolution: 2dppx) and (min-width: 37.5em), only screen and (min-width: 125em) {
  .header {
    background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(126, 213, 111, 0.8)), to(rgba(40, 180, 133, 0.8))), url(../img/hero.jpg);
    background-image: linear-gradient(to right bottom, rgba(126, 213, 111, 0.8), rgba(40, 180, 133, 0.8)), url(../img/hero.jpg);
  }
}
@media only screen and (min-width: 112.5em) {
  .header {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
  }
}
@media only screen and (max-width: 75em) {
  .header {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 86vh, 0 99%);
            clip-path: polygon(0 0, 100% 0, 100% 86vh, 0 99%);
  }
}
.header__logo-box {
  position: absolute;
  top: 4rem;
  left: 4rem;
}
.header__logo {
  height: 3.5rem;
}
.header__text-box {
  position: absolute;
  /* Because we cropped part of the image, we adjust our vertical positioning accordingly */
  top: 40%;
  left: 50%;
  /* Recall that translate shifts based off the size of the element itself */
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-align: center;
}

.grid {
  display: grid;
  row-gap: 8rem;
  -webkit-column-gap: 6rem;
     -moz-column-gap: 6rem;
          column-gap: 6rem;
}

.grid--x-center {
  justify-items: center;
}

.grid--y-center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.grid--1-col {
  grid-template-columns: 1fr;
}

.grid--2-cols {
  grid-template-columns: repeat(2, 1fr);
}
@media only screen and (max-width: 56.25em) {
  .grid--2-cols {
    grid-template-columns: 1fr;
    row-gap: 6rem;
  }
}

.grid--3-cols {
  grid-template-columns: repeat(3, 1fr);
}
@media only screen and (max-width: 56.25em) {
  .grid--3-cols {
    grid-template-columns: 1fr;
    row-gap: 6rem;
  }
}

.grid--4-cols {
  grid-template-columns: repeat(4, 1fr);
}
@media only screen and (max-width: 56.25em) {
  .grid--4-cols {
    grid-template-columns: 1fr;
    row-gap: 6rem;
  }
}

.footer {
  color: #f7f7f7;
  background-color: #333;
  padding: 10rem 0;
  font-size: 1.4rem;
}
@media only screen and (max-width: 56.25em) {
  .footer {
    padding: 8rem 0;
  }
}
.footer__logo-box {
  text-align: center;
}
@media only screen and (max-width: 56.25em) {
  .footer__logo-box {
    margin-bottom: 6rem;
  }
}
.footer__logo {
  width: 15rem;
}
.footer__navigation {
  border-top: 0.1rem solid #777;
  padding-top: 2rem;
  justify-self: end;
}
@media only screen and (max-width: 56.25em) {
  .footer__navigation {
    justify-self: center;
  }
}
.footer__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  gap: 1.5rem;
}
.footer__link:link, .footer__link:visited {
  display: inline-block;
  color: #f7f7f7;
  text-decoration: none;
  text-transform: uppercase;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.footer__link:hover, .footer__link:active {
  color: #55c57a;
  -webkit-box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4);
          box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4);
  -webkit-transform: rotate(5deg) scale(1.3);
      -ms-transform: rotate(5deg) scale(1.3);
          transform: rotate(5deg) scale(1.3);
  background-color: #333;
}
.footer__copyright {
  border-top: 0.1rem solid #777;
  padding-top: 2rem;
  width: 45%;
}
@media only screen and (max-width: 56.25em) {
  .footer__copyright {
    justify-self: center;
  }
}

.navigation__checkbox {
  display: none;
}
.navigation__button {
  cursor: pointer;
  background-color: #fff;
  height: 7rem;
  width: 7rem;
  border-radius: 50%;
  position: fixed;
  top: 6rem;
  right: 6rem;
  -webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  text-align: center;
}
@media only screen and (max-width: 56.25em) {
  .navigation__button {
    top: 4rem;
    right: 4rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .navigation__button {
    top: 3rem;
    right: 3rem;
  }
}
.navigation__background {
  height: 6rem;
  width: 6rem;
  border-radius: 50%;
  position: fixed;
  top: 6.5rem;
  right: 6.5rem;
  background-image: radial-gradient(circle at center, #7ed56f, #28b485);
  z-index: 998;
  -webkit-transition: all 0.8s cubic-bezier(0.83, 0, 0.17, 1);
  transition: all 0.8s cubic-bezier(0.83, 0, 0.17, 1);
}
@media only screen and (max-width: 56.25em) {
  .navigation__background {
    top: 4.5rem;
    right: 4.5rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .navigation__background {
    top: 3.5rem;
    right: 3.5rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .navigation__background {
    top: 4rem;
    right: 4rem;
  }
}
.navigation__nav {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.8s cubic-bezier(0.68, -0.6, 0.32, 1.6);
  transition: all 0.8s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
.navigation__list {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  list-style: none;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}
.navigation__link:link, .navigation__link:visited {
  color: #fff;
  font-size: 3rem;
  font-weight: 300;
  text-decoration: none;
  text-transform: uppercase;
  padding: 1rem 2rem;
  background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #fff 50%);
  background-size: 240%;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.navigation__link:hover, .navigation__link:active {
  background-position: 100%;
  color: #55c57a;
  -webkit-transform: translateX(1rem);
      -ms-transform: translateX(1rem);
          transform: translateX(1rem);
}
.navigation__link span {
  display: inline-block;
  margin-right: 1.5rem;
}
.navigation__checkbox:checked ~ .navigation__background {
  -webkit-transform: scale(150);
      -ms-transform: scale(150);
          transform: scale(150);
}
.navigation__checkbox:checked ~ .navigation__nav {
  opacity: 1;
  visibility: visible;
}
.navigation__icon {
  position: relative;
  margin-top: 3.5rem;
}
.navigation__icon, .navigation__icon::before, .navigation__icon::after {
  display: inline-block;
  width: 3rem;
  height: 2px;
  background-color: #333;
}
.navigation__icon::before, .navigation__icon::after {
  content: "";
  position: absolute;
  left: 0;
}
.navigation__icon::before {
  top: -0.8rem;
}
.navigation__icon::after {
  top: 0.8rem;
}
.navigation__button:hover .navigation__icon {
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.navigation__button:hover .navigation__icon::before {
  top: -1rem;
}
.navigation__button:hover .navigation__icon::after {
  top: 1rem;
}
.navigation__checkbox:checked + .navigation__button .navigation__icon {
  background-color: transparent;
}
.navigation__checkbox:checked + .navigation__button .navigation__icon::before {
  top: 0;
  -webkit-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
          transform: rotate(135deg);
}
.navigation__checkbox:checked + .navigation__button .navigation__icon::after {
  top: 0;
  -webkit-transform: rotate(-135deg);
      -ms-transform: rotate(-135deg);
          transform: rotate(-135deg);
}

.btn {
  /* Put this into its own reusable class */
}
.btn, .btn:link, .btn:visited {
  display: inline-block;
  font-size: 1.6rem;
  text-decoration: none;
  text-transform: uppercase;
  padding: 1.5rem 4rem;
  border-radius: 10rem;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  position: relative;
  border: none;
  cursor: pointer;
}
.btn:hover {
  -webkit-transform: translateY(-0.3rem);
      -ms-transform: translateY(-0.3rem);
          transform: translateY(-0.3rem);
  /* No horizontal offset, set the shadow 10 pixels down to give an illusion of lifting the button up, create a strong blur to continue the effect of
  the button lifting up */
  -webkit-box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
          box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
  /* Targets the ::after pseudo-element of any element with the class .btn when it is in the :hover state */
}
.btn:hover::after {
  /* Increase our duplicate button to give the illusion that our button grew. We want to scale y a bit more than x as our button naturally has les
  height than width, but we still want our vertical effect to look significant as well */
  -webkit-transform: scaleX(1.4) scaleY(1.6);
      -ms-transform: scaleX(1.4) scaleY(1.6);
          transform: scaleX(1.4) scaleY(1.6);
  /* With our transition on our ::after pseudo-element, this will lead to an animated fade-out transition */
  opacity: 0;
}
.btn:focus, .btn:active {
  outline: none;
  /* transform is in relation to the initial state */
  -webkit-transform: translateY(-0.1rem);
      -ms-transform: translateY(-0.1rem);
          transform: translateY(-0.1rem);
  /* No horizontal offset, set the shadow only 5 pixels down to give an illusion of pushing the button down, weaken the blur to continue the effect of
  the button going down */
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}
.btn::after {
  /* Create a duplicate button behind our original button so that when we hover over our button, the duplicate button
  grows and fades out in order to create a cool effect */
  /* We always need content otherwise the element will not be rendered. We don't need to duplicate the text for our effect. */
  content: "";
  /* Pseudo-elements default to inline display. We don't want that in this case */
  display: inline-block;
  /* Pseudo-element is treated as a child of the element that we're applying the pseudo-element to */
  width: 100%;
  height: 100%;
  border-radius: 10rem;
  /* Set our position relative to our original button so that we can place our duplicate directly behind our original */
  position: absolute;
  top: 0;
  left: 0;
  /* Set z-index so that our duplicate button is behind our original button */
  z-index: -1;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.btn--animated {
  -webkit-animation: moveInBottom 0.5s ease-out 0.75s;
          animation: moveInBottom 0.5s ease-out 0.75s;
  /* Applies the styles of 0% before the animation begins */
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
}
.btn--white {
  background-color: #fff;
  color: #777;
  /* We want to separate our stylings similarly to how we did with our original button to allow reusability */
}
.btn--white::after {
  background-color: #fff;
}
.btn--green {
  background-color: #55c57a;
  color: #fff;
  /* We want to separate our stylings similarly to how we did with our original button to allow reusability */
}
.btn--green::after {
  background-color: #55c57a;
}

.btn-text:link, .btn-text:visited {
  display: inline-block;
  font-size: 1.6rem;
  text-decoration: none;
  color: #55c57a;
  border: 0.1rem solid #55c57a;
  padding: 0.3rem;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.btn-text:hover {
  background-color: #55c57a;
  color: white;
  -webkit-box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
          box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
  -webkit-transform: translateY(-2px);
      -ms-transform: translateY(-2px);
          transform: translateY(-2px);
}
.btn-text:active {
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}

.composition {
  position: relative;
  /* We are looking for descendants from the container element, and since the container element has no size, but the child elements do, when we hover over the child element, this would initiate the container hover and initiate this rule */
}
.composition__photo {
  width: 55%;
  -webkit-box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.4);
          box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.4);
  border-radius: 0.2rem;
  z-index: 1;
  position: absolute;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
@media only screen and (max-width: 56.25em) {
  .composition__photo {
    position: relative;
    width: 33.3333333333%;
    -webkit-box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.2);
            box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.2);
  }
}
.composition__photo-p1 {
  left: 0;
  top: -2rem;
}
@media only screen and (max-width: 56.25em) {
  .composition__photo-p1 {
    top: 0;
    -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
            transform: scale(1.2);
  }
}
.composition__photo-p2 {
  right: 0;
  top: 2rem;
}
@media only screen and (max-width: 56.25em) {
  .composition__photo-p2 {
    top: -1rem;
    -webkit-transform: scale(1.3);
        -ms-transform: scale(1.3);
            transform: scale(1.3);
    z-index: 2;
  }
}
.composition__photo-p3 {
  left: 20%;
  top: 10rem;
}
@media only screen and (max-width: 56.25em) {
  .composition__photo-p3 {
    top: 1rem;
    left: 0;
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
  }
}
.composition__photo:hover {
  -webkit-transform: scale(1.05) translateY(0.5rem);
      -ms-transform: scale(1.05) translateY(0.5rem);
          transform: scale(1.05) translateY(0.5rem);
  -webkit-box-shadow: 0 2.5rem 4rem rgba(0, 0, 0, 0.5);
          box-shadow: 0 2.5rem 4rem rgba(0, 0, 0, 0.5);
  z-index: 1;
  outline: 1.5rem solid #55c57a;
  outline-offset: 2rem;
}
.composition:hover .composition__photo:not(:hover) {
  -webkit-transform: scale(0.95);
      -ms-transform: scale(0.95);
          transform: scale(0.95);
}

.feature-box {
  background-color: rgba(255, 255, 255, 0.8);
  font-size: 1.5rem;
  padding: 2.5rem;
  border-radius: 0.3rem;
  -webkit-box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.15);
          box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.15);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media only screen and (max-width: 56.25em) {
  .feature-box {
    padding: 2rem;
  }
}
.feature-box__icon {
  font-size: 6rem;
  margin-bottom: 0.5rem;
  background: -webkit-gradient(linear, left top, right top, from(#7ed56f), to(#28b485));
  background: linear-gradient(to right, #7ed56f, #28b485);
  display: inline-block;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
@media only screen and (max-width: 56.25em) {
  .feature-box__icon {
    margin-bottom: 0;
  }
}
.feature-box:hover {
  -webkit-transform: translateY(-1.5rem) scale(1.03);
      -ms-transform: translateY(-1.5rem) scale(1.03);
          transform: translateY(-1.5rem) scale(1.03);
  -webkit-box-shadow: 0 2.5rem 4rem rgba(0, 0, 0, 0.2);
          box-shadow: 0 2.5rem 4rem rgba(0, 0, 0, 0.2);
}

.card {
  -webkit-perspective: 150rem;
          perspective: 150rem;
  height: 52rem;
  position: relative;
}
.card__side {
  height: 100%;
  width: 100%;
  border-radius: 0.3rem;
  -webkit-box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
          box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
  -webkit-transition: all 0.8s ease;
  transition: all 0.8s ease;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  overflow: hidden;
}
.card__side--front--1 {
  background: #fff;
}
.card__side--front--2 {
  background: #fff;
}
.card__side--front--3 {
  background: #fff;
}
.card__side--back {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.card__side--back--1 {
  background: -webkit-gradient(linear, left top, right bottom, from(#ffb900), to(#ff7730));
  background: linear-gradient(to right bottom, #ffb900, #ff7730);
}
.card__side--back--2 {
  background: -webkit-gradient(linear, left top, right bottom, from(#7ed56f), to(#28b485));
  background: linear-gradient(to right bottom, #7ed56f, #28b485);
}
.card__side--back--3 {
  background: -webkit-gradient(linear, left top, right bottom, from(#2998ff), to(#5643fa));
  background: linear-gradient(to right bottom, #2998ff, #5643fa);
}
.card:hover .card__side--front {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.card:hover .card__side--back {
  -webkit-transform: rotateY(360deg);
          transform: rotateY(360deg);
}
.card__picture {
  background-size: cover;
  height: 23rem;
  background-blend-mode: screen;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}
.card__picture--1 {
  background-image: -webkit-gradient(linear, left top, right bottom, from(#ffb900), to(#ff7730)), url("../img/nat-5-small.jpg");
  background-image: linear-gradient(to right bottom, #ffb900, #ff7730), url("../img/nat-5-small.jpg");
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 37.5em), only screen and (min-resolution: 2dppx) and (min-width: 37.5em), only screen and (min-width: 125em) {
  .card__picture--1 {
    background-image: -webkit-gradient(linear, left top, right bottom, from(#ffb900), to(#ff7730)), url(../img/nat-5.jpg);
    background-image: linear-gradient(to right bottom, #ffb900, #ff7730), url(../img/nat-5.jpg);
  }
}
.card__picture--2 {
  background-image: -webkit-gradient(linear, left top, right bottom, from(#7ed56f), to(#28b485)), url("../img/nat-6-small.jpg");
  background-image: linear-gradient(to right bottom, #7ed56f, #28b485), url("../img/nat-6-small.jpg");
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 37.5em), only screen and (min-resolution: 2dppx) and (min-width: 37.5em), only screen and (min-width: 125em) {
  .card__picture--2 {
    background-image: -webkit-gradient(linear, left top, right bottom, from(#7ed56f), to(#28b485)), url(../img/nat-6.jpg);
    background-image: linear-gradient(to right bottom, #7ed56f, #28b485), url(../img/nat-6.jpg);
  }
}
.card__picture--3 {
  background-image: -webkit-gradient(linear, left top, right bottom, from(#2998ff), to(#5643fa)), url("../img/nat-7-small.jpg");
  background-image: linear-gradient(to right bottom, #2998ff, #5643fa), url("../img/nat-7-small.jpg");
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 37.5em), only screen and (min-resolution: 2dppx) and (min-width: 37.5em), only screen and (min-width: 125em) {
  .card__picture--3 {
    background-image: -webkit-gradient(linear, left top, right bottom, from(#7ed56f), to(#28b485)), url(../img/nat-7.jpg);
    background-image: linear-gradient(to right bottom, #7ed56f, #28b485), url(../img/nat-7.jpg);
  }
}
.card__heading {
  font-size: 2.8rem;
  font-weight: 300;
  text-transform: uppercase;
  color: #fff;
  position: absolute;
  top: 12rem;
  right: 2rem;
  text-align: right;
  width: 75%;
}
.card__heading-span {
  padding: 1rem 1.5rem;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.card__heading-span--1 {
  background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(255, 185, 0, 0.85)), to(rgba(255, 119, 48, 0.85)));
  background-image: linear-gradient(to bottom right, rgba(255, 185, 0, 0.85), rgba(255, 119, 48, 0.85));
}
.card__heading-span--2 {
  background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(126, 213, 111, 0.85)), to(rgba(40, 180, 133, 0.85)));
  background-image: linear-gradient(to bottom right, rgba(126, 213, 111, 0.85), rgba(40, 180, 133, 0.85));
}
.card__heading-span--3 {
  background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(41, 152, 255, 0.85)), to(rgba(86, 67, 250, 0.85)));
  background-image: linear-gradient(to bottom right, rgba(41, 152, 255, 0.85), rgba(86, 67, 250, 0.85));
}
.card__details {
  padding: 3rem;
  width: 80%;
  margin: 0 auto;
}
.card__details ul {
  list-style: none;
}
.card__details ul li {
  text-align: center;
  font-size: 1.5rem;
  padding: 1rem;
}
.card__details ul li:not(:last-child) {
  border-bottom: 1px solid #eee;
}
.card__details {
  padding: 1rem 3rem;
}
.card__cta {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
}
.card__price-box {
  margin-bottom: 8rem;
  color: #fff;
}
.card__price-only {
  font-size: 1.4rem;
  text-transform: uppercase;
}
.card__price-value {
  font-size: 6rem;
  font-weight: 100;
}
@media only screen and (max-width: 56.25em), only screen and (hover: none) {
  .card {
    height: auto;
    border-radius: 0.3rem;
    background-color: #fff;
    -webkit-box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
            box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
  }
  .card__side {
    height: auto;
    -webkit-box-shadow: none;
            box-shadow: none;
    position: relative;
  }
  .card__side--back {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
    -webkit-clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
  }
  .card:hover .card__side--front {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  .card:hover .card__side--back {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  .card__cta {
    position: relative;
    top: 0;
    left: 0;
    -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
            transform: translate(0, 0);
    padding: 7rem 4rem 4rem 4rem;
  }
  .card__price-box {
    margin-bottom: 3rem;
  }
  .card__price-value {
    font-size: 4rem;
  }
}

.story {
  width: 75%;
  -webkit-box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 0.3rem;
  padding: 6rem 6rem 6rem 9rem;
  font-size: 1.6rem;
  -webkit-transform: skewX(-12deg);
      -ms-transform: skewX(-12deg);
          transform: skewX(-12deg);
}
@media only screen and (max-width: 56.25em) {
  .story {
    width: 100%;
    padding: 4rem 4rem 4rem 7rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .story {
    -webkit-transform: skewX(0);
        -ms-transform: skewX(0);
            transform: skewX(0);
  }
}
.story__shape {
  height: 15rem;
  width: 15rem;
  float: left;
  shape-outside: circle(50% at 50% 50%);
  -webkit-clip-path: circle(50% at 50% 50%);
          clip-path: circle(50% at 50% 50%);
  -webkit-transform: translateX(-3rem) skewX(12deg);
      -ms-transform: translateX(-3rem) skewX(12deg);
          transform: translateX(-3rem) skewX(12deg);
  position: relative;
}
@media only screen and (max-width: 37.5em) {
  .story__shape {
    -webkit-transform: translateX(-3rem) skewX(0);
        -ms-transform: translateX(-3rem) skewX(0);
            transform: translateX(-3rem) skewX(0);
  }
}
.story__image {
  width: 100%;
  height: 100%;
  scale: 1.4;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.story__text {
  -webkit-transform: skewX(12deg);
      -ms-transform: skewX(12deg);
          transform: skewX(12deg);
}
@media only screen and (max-width: 37.5em) {
  .story__text {
    -webkit-transform: skewX(0);
        -ms-transform: skewX(0);
            transform: skewX(0);
  }
}
.story__caption {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, 20%);
      -ms-transform: translate(-50%, 20%);
          transform: translate(-50%, 20%);
  opacity: 0;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.7rem;
  text-align: center;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.story:hover .story__caption {
  opacity: 1;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.story:hover .story__image {
  scale: 1;
  -webkit-filter: blur(3px) brightness(80%);
          filter: blur(3px) brightness(80%);
}

.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0.15;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.bg-video__content {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover; /* Ensures the video covers the whole area */
}

.form__group:not(:last-child) {
  margin-bottom: 2rem;
}
.form__input {
  display: block;
  font-family: inherit;
  color: inherit;
  font-size: 1.5rem;
  border: none;
  width: 90%;
  padding: 1.5rem 2rem;
  border-radius: 0.2rem;
  background-color: rgba(255, 255, 255, 0.5);
  border-bottom: 0.3rem solid transparent;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media only screen and (max-width: 56.25em) {
  .form__input {
    width: 100%;
  }
}
.form__input:focus {
  outline: none;
  -webkit-box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
  border-bottom: 0.3rem solid #55c57a;
}
.form__input:focus:invalid {
  -webkit-box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
  border-bottom: 0.3rem solid #ff7730;
}
.form__input ::-webkit-input-placeholder {
  color: #999;
}
.form__input ::-moz-placeholder {
  color: #999;
}
.form__input :-ms-input-placeholder {
  color: #999;
}
.form__input ::-ms-input-placeholder {
  color: #999;
}
.form__input ::placeholder {
  color: #999;
}
.form__label {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  margin-left: 2rem;
  margin-top: 0.7rem;
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.form__input:-moz-placeholder-shown + .form__label {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4rem);
}
.form__input:-ms-input-placeholder + .form__label {
  opacity: 0;
  visibility: hidden;
  -ms-transform: translateY(-4rem);
      transform: translateY(-4rem);
}
.form__input:placeholder-shown + .form__label {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(-4rem);
      -ms-transform: translateY(-4rem);
          transform: translateY(-4rem);
}
.form__radio {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 7rem;
}
@media only screen and (max-width: 56.25em) {
  .form__radio {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 2rem;
  }
}
.form__radio-input {
  display: none;
}
.form__radio-label {
  font-size: 1.6rem;
  cursor: pointer;
  padding-left: 4.5rem;
  position: relative;
}
.form__radio-button {
  display: inline-block;
  height: 3rem;
  width: 3rem;
  border-radius: 50%;
  border: 0.5rem solid #55c57a;
  position: absolute;
  top: -0.4rem;
  left: 0;
}
.form__radio-button::after {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  content: "";
  display: inline-block;
  height: 1.3rem;
  width: 1.3rem;
  border-radius: 50%;
  background-color: #55c57a;
  opacity: 0;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.form__radio-input:checked + .form__radio-label .form__radio-button::after {
  opacity: 1;
}

.popup {
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.popup:target {
  opacity: 1;
  visibility: visible;
}
.popup__content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: #fff;
  width: 75%;
  -webkit-box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.2);
          box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 2fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transform: translate(-50%, -50%) scale(0.2);
      -ms-transform: translate(-50%, -50%) scale(0.2);
          transform: translate(-50%, -50%) scale(0.2);
  opacity: 0;
  -webkit-transition: all 0.4s 0.2s;
  transition: all 0.4s 0.2s;
}
@media only screen and (max-width: 75em) {
  .popup__content {
    grid-template-columns: 1fr;
  }
}
.popup__left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media only screen and (max-width: 75em) {
  .popup__left {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
.popup__right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1.5rem;
  padding: 0 5rem;
}
@media only screen and (max-width: 75em) {
  .popup__right {
    padding: 0 2.5rem 2rem 2.5rem;
  }
}
.popup__img {
  width: 100%;
}
@media only screen and (max-width: 75em) {
  .popup__img {
    width: 50%;
  }
}
.popup__text {
  font-size: 1.4rem;
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
  -webkit-column-gap: 4rem;
     -moz-column-gap: 4rem;
          column-gap: 4rem;
  -webkit-column-rule: 1px solid #eee;
     -moz-column-rule: 1px solid #eee;
          column-rule: 1px solid #eee;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
}
@media only screen and (max-width: 56.25em) {
  .popup__text {
    -webkit-column-count: 1;
       -moz-column-count: 1;
            column-count: 1;
  }
}
@media only screen and (max-width: 75em) {
  .popup__btn {
    margin: 0 auto;
  }
}
.popup:target .popup__content {
  -webkit-transform: translate(-50%, -50%) scale(1);
      -ms-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.popup__close:link, .popup__close:visited {
  color: #777;
  line-height: 0;
  position: absolute;
  top: 3rem;
  right: 2rem;
  font-size: 3rem;
  text-decoration: none;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.popup__close:hover, .popup__close:active {
  color: #55c57a;
}
.popup__close--outer {
  display: block;
  width: 100%;
  height: 100%;
  cursor: default;
}

.section-about {
  background-color: #f7f7f7;
  padding: 25rem 0;
  margin-top: -15vh;
}
@media only screen and (min-width: 112.5em) {
  .section-about {
    margin-top: -20vh;
  }
}
@media only screen and (max-width: 56.25em) {
  .section-about {
    margin-top: -10vh;
    padding: 20rem 0;
  }
}

.section-features {
  padding: 20rem 0;
  background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(126, 213, 111, 0.8)), to(rgba(40, 180, 133, 0.8))), url(../img/nat-4-small.jpg);
  background-image: linear-gradient(to right bottom, rgba(126, 213, 111, 0.8), rgba(40, 180, 133, 0.8)), url(../img/nat-4-small.jpg);
  /* Our image will dynamically resize to fully cover our section-features element */
  background-size: cover;
  margin-top: -10rem;
  -webkit-transform: skewY(-7deg);
      -ms-transform: skewY(-7deg);
          transform: skewY(-7deg);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 37.5em), only screen and (min-resolution: 2dppx) and (min-width: 37.5em), only screen and (min-width: 125em) {
  .section-features {
    background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(126, 213, 111, 0.8)), to(rgba(40, 180, 133, 0.8))), url(../img/nat-4.jpg);
    background-image: linear-gradient(to right bottom, rgba(126, 213, 111, 0.8), rgba(40, 180, 133, 0.8)), url(../img/nat-4.jpg);
  }
}
.section-features .u-container > * {
  -webkit-transform: skewY(7deg);
      -ms-transform: skewY(7deg);
          transform: skewY(7deg);
}
@media only screen and (max-width: 56.25em) {
  .section-features {
    padding: 15rem 0;
  }
}

.section-tours {
  background-color: #f7f7f7;
  padding: 25rem 0 15rem 0;
  margin-top: -10rem;
}
@media only screen and (max-width: 56.25em) {
  .section-tours {
    padding: 20rem 0 10rem 0;
  }
}

.section-stories {
  position: relative;
  padding: 15rem 0;
}
@media only screen and (max-width: 56.25em) {
  .section-stories {
    padding: 10rem 0;
  }
}

.section-book {
  padding: 15rem 0;
  background-image: -webkit-gradient(linear, left top, right bottom, from(#7ed56f), to(#28b485));
  background-image: linear-gradient(to right bottom, #7ed56f, #28b485);
}
@media only screen and (max-width: 56.25em) {
  .section-book {
    padding: 10rem 0;
  }
}

.book {
  background-image: linear-gradient(105deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 50%, transparent 50%), url(../img/nat-10.jpg);
  background-size: 100%;
  border-radius: 0.3rem;
  -webkit-box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.2);
          box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.2);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 37.5em), only screen and (min-resolution: 2dppx) and (min-width: 37.5em), only screen and (min-width: 125em) {
  .book {
    background-image: linear-gradient(105deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 50%, transparent 50%), url(../img/nat-10.jpg);
  }
}
@media only screen and (max-width: 75em) {
  .book {
    background-image: linear-gradient(105deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 65%, transparent 65%), url(../img/nat-10.jpg);
    background-size: cover;
  }
}
@media only screen and (max-width: 56.25em) {
  .book {
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.9)), to(rgba(255, 255, 255, 0.9))), url(../img/nat-10.jpg);
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 100%), url(../img/nat-10.jpg);
  }
}
.book__form {
  width: 50%;
  padding: 6rem;
}
@media only screen and (max-width: 75em) {
  .book__form {
    width: 65%;
  }
}
@media only screen and (max-width: 56.25em) {
  .book__form {
    width: 100%;
  }
}