@media screen and (min-width: 640px) {
  .main-layout {
    padding-block: 32px;
  }

  body,
  .top-bar__wrapper {
    padding-inline: 24px;
  }

  .top-bar__wrapper {
    width: 100%;
    margin: 0 auto;
  }

  .contact-cards__wrapper {
    grid-template-columns: 1fr 1fr;
  }
  .widget__list {
    flex-direction: row;
  }

  .top-bar__subtitle {
    display: block;
  }

  .btn--icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .top-bar__btn span {
    display: inline-block;
  }
  .form-btn__action {
  
  flex-direction: row;
}
}

/*  meduim screen devices  */

@media screen and (min-width: 768px) {
  .md-100 {
    width: 100%;
  }
  .md-50 {
    width: 50%;
  }
  .md-33 {
    width: 33.333%;
  }
  .md-25 {
    width: 25%;
  }
  .md-20 {
    width: 20%;
  }
  .md-16 {
    width: 16.666%;
  }
}
/*  large screen devices  */

@media screen and (min-width: 1024px) {
  body,
  .top-bar__wrapper {
    padding-inline: 32px ;
  }
}
/*  extra large screen devices  */

@media screen and (min-width: 1280px) {
  .main-layout,
  .stats-row,
  .top-bar__wrapper {
    width: 80%;
    margin: 0 auto;
  }
  .main-layout {
    grid-template-columns: 1fr 320px;
  }
  .widget__list {
    flex-direction: column;
  }

  .widget__desc {
    display: block;
  }
  .widget__desc-hidden {
    display: none;
  }
}
/*  extra  extra large screen devices  */

@media screen and (min-width: 1536px) {
  .xxl-100 {
    width: 100%;
  }
  .xxl-50 {
    width: 50%;
  }
  .xxl-33 {
    width: 33.333%;
  }
  .xxl-25 {
    width: 25%;
  }
  .xxl-20 {
    width: 20%;
  }
  .xxl-16 {
    width: 16.666%;
  }
}