@media screen and (min-width: 768px) {

  /* General */
  html {
     display: inline;
  }

  /*HEADER*/
  .header {
     grid-template-columns: auto 1fr auto auto;
     grid-template-areas: "logo . navbar button";
  }

  .headerNavLink[data-active=true] {
     border-top: 3px solid #0065FC;
     border-top: 3px transparent solid;
     border-bottom: 3px transparent solid;
  }

  .headerNavLink:hover {
     border-top: 3px solid #0065FC;
  }

  /* NavBar HEADER*/
  /* FILTRES */
  .searchFormSubmitinputText {
     display: block;
  }

  .searchFormSubmitinputIcon {
     display: none !important;
  }

  .searchFilters {
     font-size: smaller;
  }

  /* Hosting */
  .hostingMain {
     grid-template-columns: repeat(3, 1fr);
     padding: 0 4rem;
  }
  
  /* ACTIVITY */
  .activity {
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: 1rem 3rem 2rem 14rem;
     min-width: 12rem;
     height: 48rem;
     padding-bottom: 2rem;
     padding-left: 1rem;

  }

  .activityCard1 {
     grid-row: 2/7;
     grid-column: 1/2;
     min-width: 12rem;
  }

  .activityCard2 {
     grid-column: 2/3;
     grid-row: 2/7;
     min-width: 12rem;
     height: 46rem;
  }

  .activityCard3 {
     grid-column: 3/4;
     grid-row: 2/7;
     min-width: 12rem;
     height: 46rem;
  }

  .activityCard4 {
     grid-column: 4/5;
     grid-row: 2/7;
     min-width: 12rem;
     height: 46rem;
  }

  /* FOOTER */
  .footerColumnwrapper {
     flex-direction: inherit;
  }
}


@media screen and (max-width: 768px) {

  /* General */
  body main {
     padding: inherit;
  }

  /*HEADER*/
  .headerImg {
     height: 1.5rem;
     align-items: center;
  }

  /* NavBar HEADER*/
  .search-container .search {
     width: 50px;
     border-radius: 15px;
     border-bottom: 1px solid #F2F2F2;
     border-top: 1px solid #F2F2F2;
  }

  .search-container {
     padding: 1rem;
     padding-left: 4rem;
     font-size: larger;
  }

  .searchHeaderSubtitle {
     padding: 0.9rem;
     margin: 0px;
     padding-left: 4rem;
     font-size: larger;
  }

  .searchHeaderTitle {
     padding: 1rem;
     margin: auto;
     padding-left: 4rem;
     font-size: x-large;
  }

  .desktopNone {
     display: block;
  }

  .mobileNone {
     display: none;
  }

  .searchResult {
     padding: 1rem;
  }

  .search-container .search {
     width: 50px;
     border-radius: 15px;
     border-bottom: 1px solid #F2F2F2;
     border-top: 1px solid #F2F2F2;

  }

  .desktopNone {
     display: block;
  }

  .mobileNone {
     display: none;
  }

  /* FILTRES */
  .searchForm {
     display: flex;
     width: 100%;
  }

  .searchFormSearchinput {
     flex: 1;
  }

  .searchFormSubmitinputText {
     display: none;
  }

  .searchFormSubmitinputIcon {
     display: block;
  }

  .searchFilters {
     display: flex;
     font-size: small;
     padding-left: 4rem;
  }

  .searchFiltersTitle {
     width: 100%;
  }

  .searchFiltersFilter {
     margin-right: 1rem;
     font-size: medium;
  }

  /* Hosting */

  .hostingPopular {
     grid-row-start: 1;
     background-color: #F2F2F2;
     padding: 1.7rem;
  }

  .hostingMain {
     padding: 1.7rem;
     display: flex;
     flex-direction: column;
  }

  .hosting {
     padding: 0rem;
  }

  .hostingPopularWrapcontentContent {
   max-width: 303px;
}



  /* ACTIVITY */
  .activityCard .activityCard1 .activityCard2 .activityCard3 .activityCard4 {
     flex-direction: inherit;
     grid-template-rows: auto 1rem 1rem 1rem 1rem 1rem;
  }

  .activityCard1 {
     height: 45rem;
  }

  .activity-section {
     padding: 1rem;
     margin: auto;
     padding-top: 1rem;
     padding-bottom: 4rem;
  }

  /* FOOTER */
  .footerColumnwrapper {
     flex-direction: column;
     padding: 2rem;
  }
}