/**
* Box
*/
.box-container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  align-items: flex-start;
  background: #fff;
  border-radius: 16px;
  border: var(--space-0-250, 2px) solid var(--gray-secondary-50, #e7e7f2);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  flex: 1 0 0;
  gap: 8px;
  justify-content: center;
  line-height: 1;
  padding: 24px var(--space-3-500, 28px);
}

/* 360px 이하 화면용 스타일 (mobile) */
@media (max-width: 360px) {
  .box-container {
    gap: calc(var(--spacing) * 3.333333);
  }
  .box {
    min-width: 300px;
  }
}

/* 361px ~ 480px 화면용 스타일 (mobile) */
@media (min-width: 361px) and (max-width: 480px) {
  .box-container {
    gap: calc(var(--spacing) * 3.97058);
  }
  .box {
    min-width: 300px;
  }
}

/* 481px ~ 760px 화면용 스타일 (mobile) */
@media (min-width: 481px) and (max-width: 760px) {
  .box-container {
    gap: calc(var(--spacing) * 4.473684);
  }
  .box {
    min-width: 400px;
  }
}

/* 761px ~ 960px 화면용 스타일 (tablet) */
@media (min-width: 761px) and (max-width: 960px) {
  .box-container {
    gap: calc(var(--spacing) * 4.880952);
  }
}

/* 961px ~ 1200px 화면용 스타일 (tablet) */
@media (min-width: 961px) and (max-width: 1200px) {
  .box-container {
    gap: calc(var(--spacing) * 5.217391);
  }
}

/* 1201px ~ 화면용 스타일 (desktop) */
@media (min-width: 1201px) {
  .box-container {
    gap: calc(var(--spacing) * 5.5);
  }
}