/* Адаптивность */
@media (max-width: 1200px) {
  .container {
    padding: 0 20px;
    box-sizing: border-box;
  }

  .stn-portfolio__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1000px) {
  .stn-contacts__block {
    flex-direction: column;
    row-gap: 20px;
  }

  .footer__top {
    flex-wrap: wrap;
  }

  .footer__top .footer-group:last-of-type {
    width: 100%;
    margin-top: 40px;
  }

  .footer-socials__item {
    width: 50%;
    box-sizing: border-box;
    padding: 20px 20px 20px 20px;
    flex-direction: row;
    align-items: center;
  }

  .footer-socials__link {
    margin: 0;
  }

  .categories__list {
    grid-template-columns: repeat(4, 1fr);
  }

  .products__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .burger-btn {
    display: block;
  }

  .header-nav {
    display: none;
  }

  #menu {
    display: block;
  }

  .header .container {
    justify-content: normal;
  }

  .header-logo {
    margin-left: 40px;
    margin-right: auto;
  }

  .hero-slider .slide {
    height: 600px;
  }

  .hero-slider .slide .container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .hero-slider .slide-content {
    background: rgba(255, 255, 255, 0.9);
    height: auto;
    padding: 40px;
    border-radius: 20px;
  }

  .hero-slider .slide-image {
    width: 100%;
  }

  .stn-services__header,
  .stn-portfolio__header {
    flex-direction: column;
    align-items: start;
    row-gap: 30px;
  }
}

@media (max-width: 768px) {
  .hero-slider .slide-content {
    width: 100%;
  }

  .hero-slider .slide-content h2 {
    font-size: 40px;
    word-break: break-all;
  }

  .stn-contacts {
    padding: 0 20px;
  }

  .stn-contacts .container {
    margin-top: 0;
    background: var(--neutral-200);
    flex-direction: column;
    max-width: 540px;
  }

  .stn-contacts__divider {
    height: 1px;
    width: 100%;
    margin: 20px 0;
  }

  .stn-contacts__block {
    flex-direction: row;
  }

  .product-page {
    padding: 40px 20px;
  }

  .employeee-page {
    padding: 40px 20px;
  }

  .product-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .employee-container {
    /* grid-template-columns: 1fr; */
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .employee-info-section {
    order: 1;
  }

  .product-main-image {
    height: 300px;
  }

  .employee-main-image {
    height: 300px;
  }

  .product-title {
    font-size: 24px;
  }

  .employee-title {
    font-size: 24px;
  }

  .product-price {
    font-size: 22px;
  }

  .employee-price {
    font-size: 22px;
  }

  .stn-about__images {
    display: none;
  }

  .stn-services,
  .stn-about,
  .stn-team,
  .stn-portfolio,
  .stn-map {
    padding: 100px 0;
  }

  .stn-services__title,
  .stn-portfolio__title {
    width: 100%;
  }

  .footer {
    padding-top: 20px;
  }
}

@media (max-width: 600px) {
  .stn-team__desc {
    width: 100%;
  }

  .stn-portfolio__list {
    grid-template-columns: repeat(1, 1fr);
  }

  .stn-map .container {
    flex-direction: column-reverse;
  }

  .stn-map__content {
    padding: 0;
    width: 100%;
  }

  .stn-map__map {
    width: 100%;
    height: 300px !important;
    margin-top: 0;
    margin-bottom: 50px;
  }

  .header-logo {
    margin-left: 20px;
  }

  .header-logo__img {
    height: 55px;
  }

  .header-actions > a > span {
    display: none;
  }

  .header-actions > a {
    padding: 10px 15px;
  }

  .footer-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
  }

  .footer-nav {
    width: 100%;
  }

  .footer-group__title {
    margin-left: 0;
    text-align: center;
    width: 100%;
    display: block;
  }
  
  .footer-nav__item a {
    text-align: center;
    width: 100%;
    padding: 9px 0;
  }

  .footer-contacts__link {
    display: flex;
    justify-content: center;
  }

  .categories__list {
    grid-template-columns: repeat(3, 1fr);
  }

  .products__list {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (max-width: 450px) {
  .stn-contacts .container {
    padding: 40px 20px;
  }

  .categories__list {
    grid-template-columns: repeat(2, 1fr);
  }
}