:root {
  --remBasicSize: 16px;
}

.magic-block {
  margin: 0 auto;
}
.magic-block .magic-block-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.magic-block .magic-block-item {
  text-align: center;
  flex: 0 0 calc((100% - calc(0.9375 * var(--remBasicSize)) * 2) / var(--magic-block-columns));
}
@media (min-width: 768px) {
  .magic-block .magic-block-item {
    flex: 0 0 calc((100% - 16px * (var(--magic-block-md-columns) - 1)) / var(--magic-block-md-columns));
  }
}

.magic-block--gift .magic-block-list {
  row-gap: calc(2.1875 * var(--remBasicSize));
  column-gap: calc(0.9375 * var(--remBasicSize));
}
.magic-block--gift .magic-block-body {
  padding-top: calc(0.625 * var(--remBasicSize));
}
.magic-block--gift .magic-block-image {
  width: 100%;
}
.magic-block--gift .magic-block-image img {
  width: 100%;
  height: 100%;
  display: block;
}
.magic-block--gift .magic-block-title {
  margin: 0 0 calc(0.3125 * var(--remBasicSize));
  font-weight: 500;
  letter-spacing: calc(0.0625 * var(--remBasicSize));
  font-size: calc(1.5 * var(--remBasicSize));
  margin-top: calc(0.3125 * var(--remBasicSize));
}
@media (min-width: 768px) {
  .magic-block--gift .magic-block-title {
    font-size: calc(1.0625 * var(--remBasicSize));
  }
}
.magic-block--gift .magic-block-desc {
  margin: 0 0 calc(0.375 * var(--remBasicSize));
  font-size: calc(1.5 * var(--remBasicSize));
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: calc(0.03125 * var(--remBasicSize));
  color: #000;
}
@media (min-width: 768px) {
  .magic-block--gift .magic-block-desc {
    font-size: calc(1.0625 * var(--remBasicSize));
  }
}
.magic-block--gift .magic-block-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: calc(1.5 * var(--remBasicSize));
  line-height: 1.8;
  margin-top: 0;
  border: 0;
  background: #f7088d;
  color: #fff;
  font-weight: 500;
  text-align: center;
}
@media (min-width: 768px) {
  .magic-block--gift .magic-block-label {
    font-size: calc(1.0625 * var(--remBasicSize));
  }
}
.magic-block--gift .magic-block-image {
  position: relative;
  width: calc(13.75 * var(--remBasicSize));
  height: calc(13.75 * var(--remBasicSize));
  border-top-right-radius: calc(4.375 * var(--remBasicSize));
  overflow: hidden;
}
.magic-block--gift .magic-block-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border-top-right-radius: calc(4.375 * var(--remBasicSize));
}
.magic-block--gift .magic-block-label--box {
  background: #00b7dc;
}

.magic-block--logo {
  --magic-block-border-color: #ccc;
  --magic-block-bg-color: #fff;
  --magic-block-current-columns: var(--magic-block-columns);
}
@media (min-width: 768px) {
  .magic-block--logo {
    --magic-block-current-columns: var(--magic-block-md-columns);
  }
}
.magic-block--logo .magic-block-list {
  display: grid;
  grid-template-columns: repeat(var(--magic-block-current-columns), 1fr);
  gap: 0 2px;
  border: 1px solid var(--magic-block-border-color);
  border-bottom-width: 0;
  position: relative;
  isolation: isolate;
}
.magic-block--logo .magic-block-list:after {
  content: "";
  position: absolute;
  width: 100%;
  inset: 0;
  padding: 0.5px;
  z-index: -1;
  border-bottom: 1px solid var(--magic-block-border-color);
  background-image: linear-gradient(to right, var(--magic-block-bg-color) calc(100% - 1px), var(--magic-block-border-color) calc(100% - 1px), var(--magic-block-border-color) 100%);
  background-size: calc(100% / var(--magic-block-current-columns)) 100%;
  background-position: 0 0;
  background-repeat: repeat-x;
}
.magic-block--logo .magic-block-item {
  background-color: var(--magic-block-bg-color);
  border-bottom: 1px solid var(--magic-block-border-color);
}
.magic-block--logo .magic-block-item[data-col="2"] {
  grid-column: 1/-1;
}
@media (min-width: 768px) {
  .magic-block--logo .magic-block-item[data-col="2"] {
    grid-column: span 2;
  }
}
.magic-block--logo .magic-block-item[data-col="3"] {
  grid-column: 1/-1;
}
@media (min-width: 768px) {
  .magic-block--logo .magic-block-item[data-col="3"] {
    grid-column: span 3;
  }
}
.magic-block--logo .magic-block-item[data-col="4"] {
  grid-column: 1/-1;
}
@media (min-width: 768px) {
  .magic-block--logo .magic-block-item[data-col="4"] {
    grid-column: span 4;
  }
}
.magic-block--logo .magic-block-item[data-col="5"] {
  grid-column: 1/-1;
}
@media (min-width: 768px) {
  .magic-block--logo .magic-block-item[data-col="5"] {
    grid-column: span 5;
  }
}
.magic-block--logo .magic-block-item[data-col="6"] {
  grid-column: 1/-1;
}
@media (min-width: 768px) {
  .magic-block--logo .magic-block-item[data-col="6"] {
    grid-column: span 6;
  }
}
.magic-block--logo .magic-block-image {
  display: block;
  width: 100%;
}
.magic-block--logo .magic-block-label {
  position: relative;
}
.magic-block--logo .magic-block-label::before {
  content: attr(data-label);
  position: absolute;
  left: -0.45em;
  top: -1em;
  display: block;
  text-align: center;
  color: #000;
  background-color: var(--magic-block-bg-color);
  font-size: 0.87em;
  letter-spacing: 0.1em;
  padding-left: 1em;
  padding-right: 1em;
  line-height: 2;
  z-index: 999;
}
@media (min-width: 768px) {
  .magic-block--logo .magic-block-label::before {
    left: -0.375em;
    top: -0.875em;
  }
}/*# sourceMappingURL=style.css.map */