/* font size and content margins */

@media(max-width: 1000px){
  html{
    font-size: 16px;
  }
  .content-margin{
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }
}
@media(max-width: 800px){
  html{
    font-size: 15px;
  }
  .content-margin{
    margin-left: 1.2rem;
    margin-right: 1.2rem;
  }
}
@media(max-width: 500px){
  html{
    font-size: 14px;
  }
  .content-margin{
    margin-left: 1rem;
    margin-right: 1rem;
  }
}




/* other elements */
@media(max-width: 1300px){
  .place-block__name{
    font-size: 1.3rem;
  }
  .place-block__map-link{
    font-size: .9rem;
  }
}

@media(max-width: 1200px){
  .hp-top__headline,
  .other-trails__headline{
    font-size: 3rem;
  }
  .hp-top__subheadline,
  .other-trails__subheadline{
    font-size: 1.4rem;
  }
}

@media(max-width: 1100px){
  .bottom-footer__img{
    display: none;
  }
  .bottom-footer__content-cover{
    width: 100%;
  }
  .bottom-footer__content{
    grid: auto / repeat(3, auto);
    place-items: flex-start center;
  }
}

@media(max-width: 1000px){
  .trails-list__elem{
    padding: .8rem .5rem;
  }
  .trails-list__elem__name{
    font-size: 1.1rem;
    margin-top: .3em;
  }

  .event-card{
    width: calc(33.3333% - .4rem);
    margin: 0 0.3rem 2.1rem 0.3rem;
  }

  .places-blocks {
    grid: auto / repeat(2, 1fr);
  }
  .place-block{
    height: 42vw;
  }
  .place-block__name {
    font-size: 1.7rem;
  }
}

@media(max-width: 800px){
  .event-block__img{
    width: calc(45% - 2rem);
  }
  .event-block__about{
    width: 50%;
    margin-left: 2rem;
  } 
}

@media(min-width: 751px){
  .menu{
    display: flex !important;
  }
}

@media(max-width: 750px){
  .header__content{
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
  }
  .header__content--menu-open{
    background-color: var(--light-gray);
  }
  .header__logo{
    order: 1;
    padding: 1rem;
    /* centering */
    flex-grow: 1;
    text-align: center;
    margin-left: calc(40px + 2em);
  }
  .resp-menu{
    order: 2;
    display: block;    
    margin: 1rem
  }
  .header__content--scrolled .resp-menu{
    font-size: 36px;
  }
  .menu{
    order: 3;
    display: none;
    width: 100%;
    padding-top: .5rem;
    background: white;
    margin-top: .3rem;
  }
  .menu__pages-menu{
    flex-direction: column;
  }
  .menu__item{
    font-size: 1.8rem;
    margin: .8em 0;
  }
  .menu__item--lang{
    margin: .5em;
  }
  .menu__lang-menu{
    margin: 0;
    justify-content: center;
    margin-top: .5em;
    padding: .5em 0;
    background: var(--light-gray);
  }

  .hp-top__headline,
  .other-trails__headline{
    font-size: 2.5rem;
  }
  .hp-top__subheadline,
  .other-trails__subheadline{
    font-size: 1.3rem;
    font-weight: 500;
  } 

  .trail-page-top{
    margin-bottom: 3rem;
  }
  .trail-page-top__content > *{
    width: unset;
  }
  .trail-page-top__desc{
    padding-right: 0;
    min-height: unset;
  }
  .trail-page-top__map-cover{
    position: relative;
  }
  .trail-page-info__sign img{
    width: 8rem;
  }

}

@media(max-width: 700px){
  .event-block__headline{
    font-size: 2.3rem;
    margin-bottom: .5em;
  }
  .event-block__title{
    font-size: 1.3rem;
  }
  .event-block__info{
    margin-bottom: .7em;
  }
  .event-block__img {
    width: calc(50% - 2rem);
  }


  .places-cards--justified__place{
    width: calc(33.333% - .4rem);
    margin: 0 .3rem .6rem;
  }
  .places-cards--justified__place:nth-child(4n+1){
    margin-left: .3rem;
  }
  .places-cards--justified__place:nth-child(4n+4){
    margin-right: .3rem;
  }
  .places-cards--justified__place:nth-child(3n+1){
    margin-left: 0;
  }
  .places-cards--justified__place:nth-child(3n+3){
    margin-right: 0;
  }
}

@media(max-width: 650px){
  .hp-top__headline,
  .other-trails__headline{
    font-size: 2.2rem;
  }
}

@media(max-width: 600px){
  .hp-top__image{
    margin-bottom: 8.5rem;
  }
  .trails-list{
    flex-wrap: wrap;
  }
  .trails-list__elem{
    width: 33.3333%;
  }
  .place-block__name{
    font-size: 1.4rem;
  }

  .bottom-footer__content{
    grid: repeat(2, auto) / repeat(2, auto);
  }
  .bottom-footer__col{
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .bottom-footer__col--contacts{
    grid-row: 2;
    grid-column-start: 1;
    grid-column-end: 3;
  }

  .other-trails__image{
    height: 25rem;
  }

  .trail-desc-top__headline,
  .place-desc-top__headline{
    font-size: 2.5rem;
  }

  .event-desc-top{
    margin-bottom: 2rem;
    display: block;
  }
  .event-desc-top__left > *{
    text-align: center;
  }
  .event-desc-top__right > *{
    text-align: center;
  }
  .event-desc-top__headline{
    margin: .7em 0 .4em;
  }
  .event-desc-top__date{
    margin-left: 0;
  }
}

@media(max-width: 550px){
  .hp-top__headline{
    font-size: 2rem;
  }
}

@media(max-width: 500px){
  .header__logo__img--scrolled{
    height: 3.5rem;
  }
  .other-events{
    margin-top: 6rem;
  }
  .events-list{
    flex-direction: column;
  }  
  .event-card{
    width: 100%;
    margin: 0 0 1.5rem !important;
    height: 50vw;
    min-height: 15rem;
  }
  .event-card__title{
    font-size: 1.4rem;
  }
  .event-card__info{
    font-size: 1.1rem;
    font-weight: 500;
  }
  
  .partners-list {
    grid: auto / 1fr;
    gap: 3.5rem;
  }
  .partners-list__elem{
    max-width: 15rem;
  }

  .trail-desc-top__head{
    flex-direction: column;
    background: linear-gradient(0deg, #ffffff00, #ffffff);
  }
  .trail-desc-top__headline{
    margin-bottom: 0;
    text-align: center;
  }
  .place-desc-top__headline{
    text-align: center;
  }

  .trail-info{
    gap: 0;
  }
  .trail-info__elem{
    padding: .7rem;
  }
  .trail-info__elem__value{
    font-size: 1.3rem;
  }
  .trail-info__elem__desc{
    font-size: .9rem;
  }


  .trail-page-top__desc__headline,
  .trail-page-top__desc,
  .trail-page-info h2{
    text-align: center;
  }
  .trail-page-top__desc__par,
  .trail-page-info__surface{
    text-align: justify;
  }
  .trail-page-info__sign{
    flex-direction: column;
  }
  .places-cards__places{
    justify-content: center;
  }
  .places-cards__place{
    width: calc(50% - .3rem);
    margin-bottom: .6rem;
  }
  .places-cards__place:nth-child(2n+1){
    margin-left: 0;
    margin-right: .3rem;
  }
  .places-cards__place:nth-child(2n+2){
    margin-left: .3rem;
    margin-right: 0;
  }
  .places-cards__place__img{
    height: 10rem;
  }
}

@media(max-width: 470px){
  .event-block{
    position: relative;
  }
  .event-block__img{
    position: absolute;
    left: 0;
    right: 0;
    top: 4.7rem;
    bottom: 0;
    width: unset;
  }
  .event-block__about,
  .event-block__headline,
  .event-block__title,
  .event-block__info{
    text-align: center;
  }
  .event-block__about{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-left: unset;
    margin-bottom: 0;
    width: 100%;
    min-height: calc(70vw + 4rem);
  }
  .event-block__about__event-data{
    padding: 1rem;
  }
  .event-block__headline{
    font-size: 2.75rem;
    margin-bottom: 0.75em;
  }
  .event-block__title,
  .event-block__info{
    color: white;
    text-shadow: 0 .1em .4em black;
  }
  .event-block__info{
    font-weight: 500;
  }

  .place-block__name{
    font-size: 1.1rem;
  }
  .place-block__map-link {
    font-size: .8rem;
  }
}

@media(max-width: 400px){
  .trails-list__elem__icon svg{
    font-size: 1.8rem;
  }
  .trails-list__elem__name{
    font-size: .9rem;
  }

  .bottom-footer__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .footer-menu__elem, 
  .footer-socials__elem,
  .footer-menu__subelem,
  .bottom-footer__col--contacts *{
    text-align: center;
  }
  .footer-menu__subelem{
    font-size: 1rem;
  }

  .other-trails__headline{
    font-size: 1.9rem;
  }
  .other-trails__subheadline{
    font-size: 1.2rem;
  }
}

@media(max-width: 350px){
  .places-cards__place{
    width: 100%;
    margin: 0 0 1rem 0 !important;
  }
  .places-cards__place__img{
    height: 13rem;
  }
}

@media(max-width: 330px){
  .places-blocks {
    grid: auto / 1fr;
  }
  .place-block {
    height: 84vw;
  }
  .place-block__name {
    font-size: 1.6rem;
  }
  .place-block__map-link {
    font-size: .9rem;
  }
}