.packaging, .packaging__background {
  padding: 6em calc((100vw - (1280px / 1)) / 2); }
  @media screen and (max-width: 1400px) {
    .packaging, .packaging__background {
      padding: 6em 3em; } }
  @media screen and (max-width: 400px) {
    .packaging, .packaging__background {
      padding: 3em 1em; } }

.packaging {
  padding-bottom: 12em; }
  .packaging h2 {
    margin-left: calc(40% - 4em); }
  .packaging .info {
    max-width: 40%;
    margin-left: 40%; }
  .packaging__background {
    padding-top: 0;
    background-color: black;
    color: white; }
    .packaging__background > figure {
      margin: -8em auto 3em;
      width: 100%;
      height: auto;
      display: inline-block; }
      .packaging__background > figure img {
        width: 100%;
        height: auto; }
    .packaging__background h3 {
      margin-bottom: 0.3em; }
  .packaging__columns {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-flow: row wrap;
    -webkit-box-pack: center;
            justify-content: center;
    -webkit-box-align: start;
            align-items: flex-start; }
    .packaging__columns > article {
      -webkit-box-flex: 1;
              flex: 1 0 calc(33.3% + 2em);
      max-width: calc(33.3% + 2em);
      margin: 0 1em; }
      .packaging__columns > article figure {
        width: 100%;
        height: auto; }
  @media screen and (max-width: 768px) {
    .packaging h2 {
      margin-left: 0; }
    .packaging .info {
      max-width: 100%;
      margin-left: 0; }
    .packaging__columns > article {
      -webkit-box-flex: 1;
              flex: 1 0 100%;
      max-width: 100%;
      margin-bottom: 3em; }
      .packaging__columns > article img {
        width: 100%;
        height: auto; } }