bulma/docs/_sass/global/feature.scss

@use "sass/utilities/css-variables" as cv;

$gap: 2rem;
$width: 20rem;

.bd-features {
  --gap: #{$gap};
  --width: #{$width};

  align-items: center;
  background-image: linear-gradient(
    0deg,
    hsla(
        var(--bulma-scheme-h),
        var(--bulma-scheme-s),
        var(--bulma-scheme-main-l),
        1
      )
      0%,
    hsla(
        var(--bulma-scheme-h),
        var(--bulma-scheme-s),
        var(--bulma-scheme-main-l),
        0
      )
      100%
  );
  padding: var(--gap);
  position: relative;
  container-type: inline-size;
  container-name: home-features;
}

.bd-features-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
  justify-content: stretch;
  justify-items: stretch;
}

@container home-features (min-width: #{(2 * $width + 1 * $gap)}) {
  .bd-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container home-features (min-width: #{(4 * $width + 3 * $gap)}) {
  .bd-features-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: #{(4 * $width + 10 * $gap)}) {
  .bd-features {
    padding: calc(2 * var(--gap));
  }
}

.bd-feature {
  --h: 348;
  --s: 86%;
  --l: 61%;
  --a: 0.1;
  --bg: var(--grad-red);
  --bd-width: 0.125em;
  --radius: 0.75em;
  --p: 1em;
  --icon: #{cv.getVar("danger")};
  background: var(--bg);
  border-radius: calc(var(--bd-width) + var(--radius));
  box-shadow:
    0px 0.5em 1em 0px hsla(var(--h), var(--s), var(--l), var(--a)),
    0px 1em 2em 0px hsla(var(--h), var(--s), var(--l), var(--a));
  padding: var(--bd-width);
  transition-duration: cv.getVar("duration");
  transition-property: box-shadow, transform;

  &:hover {
    --a: 0.05;
    box-shadow:
      0px 1em 2em 0px hsla(var(--h), var(--s), var(--l), var(--a)),
      0px 2em 4em 0px hsla(var(--h), var(--s), var(--l), var(--a));
    transform: translateY(-1em);
  }

  &.is-modern {
    --h: 220;
    --bg: var(--grad-blue);
    --icon: #{cv.getVar("info-50")};
  }

  &.is-easy {
    --h: 160;
    --bg: var(--grad-green);
    --icon: #{cv.getVar("success")};
  }

  &.is-free {
    --h: 348;
    --s: 6%;
    --bg: var(--grad-grey);
    --icon: #{cv.getVar("text")};
  }
}

.bd-feature-body {
  align-items: center;
  background-color: cv.getVar("scheme-main");
  border-radius: var(--radius);
  display: grid;
  column-gap: var(--p);
  grid-template-columns: auto 1fr;
  padding: var(--p) calc(var(--p) * 1.25);

  .icon {
    color: var(--icon);
    grid-row: 1 / span 2;
  }
}

.bd-feature-title {
  color: cv.getVar("text-strong");
  font-size: 1.25em;
  font-weight: cv.getVar("weight-semibold");
}

.bd-feature-subtitle {
  color: cv.getVar("text-weak");
  white-space: nowrap;
}