.multi-col-box {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  grid-auto-columns: 1fr;
  padding: 0 calc(var(--padding) + var(--gap) + var(--column)) var(--y-padding);
  margin-top: calc(0px - var(--small-y-padding));
  position: relative;
  width: 100%;
}

.multi-col-box .box {
  background-color: var(--white);
  border-bottom: var(--stroke) solid var(--secondary);
  padding: var(--small-y-padding) var(--content-padding);
  height: 100%;
  box-shadow: var(--box-shadow);
}

.multi-col-box + .blue-yellow-box {
  margin-top: var(--small-y-padding);
}

@media (max-width: 1380px) {
  .multi-col-box {
      padding-left: var(--mobile-padding);
      padding-right: var(--mobile-padding);
  }
}

@media (max-width: 768px) {
  .multi-col-box {
    margin-top: 0;
    padding: 0 var(--padding) var(--small-y-padding);
    background-color: var(--white);
    position: relative;
  }

  .multi-col-box:after {
    content: '';
    width: var(--site-stroke);
    height: 100%;
    background-color: var(--yellow2);
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
  }

  .multi-col-box .box {
    border-left: var(--stroke) solid var(--secondary);
    border-bottom: 0;
    padding: var(--padding);
}

  .multi-col-box:nth-of-type(even):after {
    background-color: var(--yellow1);
  }

  .multi-col-box:nth-of-type(odd):after {
    background-color: var(--yellow3);
  }
}