Отдельный класс в html или миксин scss?

@mixin container {
  max-width: 1400px;

  @media (max-width: 1400px) {
    max-width: 1100px;
  }
}


.about {
  @include container;
}

.faq {
  @include container;
}

.about {
  max-width: 1400px;
}
@media (max-width: 1400px) {
  .about {
    max-width: 1100px;
  }
}

.faq {
  max-width: 1400px;
}
@media (max-width: 1400px) {
  .faq {
    max-width: 1100px;
  }
}

//вариант 1
%container{
	max-width:1400px;

	@media (max-width:1400px){
		max-width:1100px;
	}
}
.about{
	@extend %container;
}
.faq{
	@extend %container;
}

//вариант 2
.container{
	max-width:1400px;

	@media (max-width:1400px){
		max-width:1100px;
	}
}
.about{

}
.faq{

}

.test1 {
  width: 100px;

  @media (max-width: 100px) {
    width: 50px;
  }
}

.test2 {
  width: 100px;

  @media (max-width: 100px) {
    width: 150px;
  }
}

.test1 {
  width: 100px;
}
@media (max-width: 100px) {
  .test1 {
    width: 50px;
  }
}

.test2 {
  width: 100px;
}
@media (max-width: 100px) {
  .test2 {
    width: 150px;
  }
}