/* media queries

@media (max-width: 1536px) {

  }
  @media (max-width: 1280px) {

  }

  @media (max-width: 1024px) {

  }
  @media (max-width: 768px) {

  }

  @media (max-width: 640px) {

  }
  
   xs
  @media (max-width: 475px) {

  } */

.container {
  max-width: 1536px;
  margin-inline: auto;
  padding-inline: 0.5rem;
}

/* utility class */
.box {
  max-width: 1000px;
  margin: 0 auto;
  margin-top: 8rem;
  padding: 50px;
  padding-bottom: 15px;
}

/* 2xl */
@media (max-width: 1536px) {
  .container {
    max-width: 1280px;
  }
}

/* xl */
@media (max-width: 1280px) {
  .container {
    max-width: 1024px;
  }
}

/* lg */
@media (max-width: 1024px) {
  .container {
    max-width: 768px;
  }
}

/* md */
@media (max-width: 768px) {
  .container {
    max-width: 640px;
  }
}

/* sm */
@media (max-width: 640px) {
  .container {
    max-width: 475px;
  }
}

/* xs */
@media (max-width: 475px) {
  .container {
    max-width: 100%;
  }
}