
  

@media screen and (max-width: 1024px) {
  .navigation {
  display: block;
}


.header__action-block {
  display: flex;
}
.header__container {
   max-width: 960px; 

}
.header__logo-container {
  padding-right: 32px;
}
.navigation__list {
  column-gap: 16px;
}
.navigation__link {
  font-size: 16px;
  padding: 8px 0;
}
.button--green {
  width: 230px;
  padding: 12px 24px;
  font-size: 16px;
}
.breadcrumb {
  margin-bottom: 40px;
}
main {
padding:0 32px 0 32px ;

}

}

@media (max-width: 1023px) {
  .navigation {
    display: none; 
  }
  .hamburger {
    display: flex; 
  }
  .header__container {
  max-width: 960px;
padding: 0 32px;
}
  .header__action-block {
    display: none; 
  }
  .navigation__link {
    font-size: 14px;
  }
  .button--green {
    min-width: 180px;
    padding: 10px 16px;
    font-size: 14px;
  }
  .mobile-menu {
    top: 76px;
  }
  .social-block {
  align-items: center; 
}
   
 
}

@media  (max-width:912px) {
  .header__container {
    padding: 0 32px 0 32px;
  }
  .one img,
.two img,
.card-image img {
  width: 100%;
  height: auto; 
  max-width: 100%;
}
  .div1,
.div2 {
grid-column: span 3;
}
.div3,
.div4,
.div5,
.div6,
.div7,
.div8 {
grid-column: span 2;
}

.div1 { grid-row: 1; grid-column: 1 / 7; }
.div2 { grid-row: 2; grid-column: 1 / 7; }
.div3 { grid-row: 3; grid-column: 1 / 4; }
.div4 { grid-row: 3; grid-column: 4 / 7; }
.div5 { grid-row: 4; grid-column: 1 / 4; }
.div6 { grid-row: 4; grid-column: 4 / 7; }
.div7 { grid-row: 5; grid-column: 1 / 4; }
.div8 { grid-row: 5; grid-column: 4 / 7; }
.footer-container {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto auto auto; 
    
    padding: 35px 32px 0px 32px; 
  }

  
  .footer-menu-wrapper {
    grid-column: 1 / 2; 
    grid-row: 1 / 2; 
    gap: 70px;
    
  }

  
  .newsletter-block {
    grid-column: 2 / 6; 
    grid-row: 1 / 3; 
    padding-left: 45px;
  }

  
  .social-block {
    grid-column: 2 / 1; 
    grid-row: 2 / 2; 
    gap: 0px;
    align-items: center;
  }

  
  .footer-bottom {
    grid-column: 1 / 6; 
    grid-row: 3 / 6; 
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 23px;
    
  }

  .social-icons-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
   
  }
  .social-icon {
    width: 28px;
    height: 28px;
  }

  
  .footer-bottom-list {
    flex-wrap: wrap;
    gap: 48px; 
    justify-content: center;
  }

}

@media (max-width: 768px) {
  .header__container {
    
    padding: 0 18px;
  }
  .navigation__list {
    column-gap: 16px;
  }
  .navigation__link {
    font-size: 13px;
    padding: 6px 0;
  }
  mobile-menu {
    top: 72px;
  }
 

.card-excerpt {
padding-bottom: 73px;
}
.card-excerpt--truncated{
  padding-bottom: 50px;
}
.footer-container {
 padding: 35px 20px 0px 20px; 
}
.footer-menu-wrapper {
    gap: 30px;
  }
    .newsletter-block {
    padding-left: 15px;
  }
  main {
    padding-left: 20px;
    padding-right: 20px;
  }

} 
@media (max-width: 620px) {
  .grid-card .div4, .div5,
  .div6,
  .div7,
  .div8 {
    display: none;
  }
  .div1 {
  grid-column: 1 / 7; /* с 1‑й по 7‑ю линию (т. е. 6 колонок) */
}
.div1 { grid-row: 1; grid-column: 1 / 7; }
.div2 { grid-row: 2; grid-column: 1 / 7; }
.div3 { grid-row: 3; grid-column: 1 / 7; }
.div4 { grid-row: 4; grid-column: 1 / 7; }
main {
padding:0 20px 0 20px ;}
 
 
  .footer-container {
    grid-template-columns: repeat(3, 1fr); 
    grid-template-rows: auto auto auto auto; 
    gap: 10px; 
    align-items: start; 
  }

  
  .footer-menu-wrapper {
    grid-column: 1 / 4;
    grid-row: 1 / 2;
    display: flex;
    justify-content: space-between; 
    text-align: left; 
    padding-bottom: 10px;
  }

  .menu-column .footer-list {
    padding: 0;
    margin: 0;
   
  }

  .newsletter-block {
    grid-column: 1 / 4;
    grid-row: 2 / 3;
 padding-left: 0;
  }
  

  .social-block {
    grid-column: 1 / 4;
    grid-row: 3 / 4;
   align-items: start;
  }

  .footer-bottom {
    grid-column: 1 / 4;
    grid-row: 4 / 5;
    
  }
  .footer-bottom-list {
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }
}

@media (max-width: 480px) {
  .header__container {
    height: 72px;
    max-width: 440px;
  }
  .logo__image {
    height: 34px;
    max-width: 48px;
  }
  .navigation__list {
    column-gap: 14px;
  }
  .navigation__link {
    font-size: 12px;
    padding: 5px 0;
  }
  .breadcrumb {
    margin-bottom: 32px;
  }
  h1 {
    line-height: 40px;
    font-size: 32px;
  }
  .filter-container {
    margin-top: 24px;
    margin-bottom: 16px;
  }
}
@media (max-width: 414px) {
   .filter-container {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .filter-container::-webkit-scrollbar {
    display: none;
  }

  .filter-container:hover {
    scrollbar-width: thin;
  }

  .filter-container:hover::-webkit-scrollbar {
    display: none;
    height: 6px;
    border-radius: 3px;
  }

  .filter-container:hover::-webkit-scrollbar-track {
    background: #f5f5f5;
  }

  .filter-container:hover::-webkit-scrollbar-thumb {
    background: #bbb;
    border-radius: 3px;
  }

  .filter-item {
    min-width: max-content;
    white-space: nowrap;
    margin-bottom: 8px;
  }

  .filter-item {
    font-size: 14px;
    padding: 5px 8px;
  }

  .with-emoji::before {
    margin-right: 4px;
  }

  .filter-item img {
    width: 18px;
    height: 18px;
    margin-right: 6px;
  }

  body {
background-position: center 386px;
  }
  .one img {
  display: none;
}

.one img,
.two img,
  .three img,
  .four img {
   height: 206px;
    width: 100%;
  }
.one 
  {
  width: 100%;
  background-image: url('../img2/Rectangle\ \(10\).png'); 
  background-size: cover;
  background-position: bottom;
  position: relative;
  height: 206px;
  background-repeat: no-repeat;
  display: flex;
}
 
  }
@media (max-width: 375px){
  main {
padding:0 16px 0 16px ;}
.footer-container {
        padding: 35px 16px 0px 16px;
    }
  }
@media (max-width: 320px)
{
 .submit-btn {
    display: none; 
  }

  .with-icon::before {
    display: none; 
  }
  .email-input {
    width: 100%; 
    
  }
}
