.container {
  width: calc(100vw * 1248 / 1920);
}

.container-header {
  width: calc(100vw * 1248 / 1920);
  height: calc(100vw * 90 / 1920);
  position: relative;
}

.container-header-box {
  width: calc(100vw * 188 / 1920);
  height: 100%;
  background-color: #cb2529;
  color: #fff;
  font-weight: 300;
  letter-spacing: calc(100vw * 3 / 1920);
}

.container-header-box p {
  font-size: calc(100vw * 26 / 1920);
  line-height: calc(100vw * 26 / 1920);
}

.container-header h3 {
  position: absolute;
  right: calc(100vw * 27 / 1920);
  bottom: 0;
  text-transform: uppercase;
  font-size: calc(100vw * 14 / 1920);
  line-height: calc(100vw * 14 / 1920);
  letter-spacing: calc(100vw * 2 / 1920);
  color: #d8d8d8;
  font-weight: 300;
}

.container-header::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(100vw * 14 / 1920);
  height: calc(100vw * 30 / 1920);
  background-color: #c42426;
}

.container-flex {
  display: flex;
}

.container-justify-center {
  justify-content: center;
}

.container-align-center {
  align-items: center;
}

.container-column {
  flex-direction: column;
}

.container-grid {
  display: grid;
}

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

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

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

.left-btn {
  left: calc(100vw * -63 / 1920);
  transform: translate(-100%, -50%) rotate(180deg);
}

.right-btn {
  right: calc(100vw * -63 / 1920);
  transform: translate(100%, -50%);
}

.font-color{
    color: #3b3b3b;
}