/*! Oreset.css v2.0.0 | MIT License | https://github.com/hirosiva/Oreset.css */
/*
  # Global
---------------------------------------------- */
*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*
  # Document & Sections
---------------------------------------------- */
:where(html) {
  block-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: none;
}

:where(body) {
  min-block-size: 100%;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  font-family: system-ui, sans-serif;
  font-feature-settings: "pkna";
  -webkit-font-smoothing: antialiased;
}

/*
  # Grouping content
---------------------------------------------- */
:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
}

:where(hr) {
  border: none;
  border-block-start: 1px solid;
  color: inherit;
  block-size: 0;
  overflow: visible;
}

:where(ul, ol) {
  list-style: none;
}

/*
  # Text-level semantics
---------------------------------------------- */
:where(a:not([class])) {
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
}

/*
  # Embedded content
---------------------------------------------- */
:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block;
}

:where(img, picture, svg) {
  max-inline-size: 100%;
  block-size: auto;
}

:where(svg:not([fill])) {
  fill: currentColor;
}

/*
  # Tabular data
---------------------------------------------- */
:where(table) {
  border-collapse: collapse;
}

/*
  # Forms
---------------------------------------------- */
:where(input, button, textarea, select, optgroup) {
  font: inherit;
  color: inherit;
}

:where(textarea) {
  resize: vertical;
  resize: block;
}

:where(button, label, select, summary, [role="button"], [role="option"]) {
  cursor: pointer;
}

:where(input[type="file"])::-webkit-file-upload-button,
:where(input[type="file"])::file-selector-button {
  cursor: pointer;
}

:where(:disabled) {
  cursor: not-allowed;
}

:where(label:has(> input:disabled), label:has(+ input:disabled)) {
  cursor: not-allowed;
}

:where(button) {
  border-style: solid;
}

/*
  # Interactive & Misc
---------------------------------------------- */
:where(template, [hidden]:not([hidden="until-found"])) {
  display: none;
}

/*
  # Accessibility
---------------------------------------------- */
:where([disabled], [aria-disabled="true"]) {
  cursor: not-allowed;
}

:where([aria-busy="true"]) {
  cursor: progress;
}

:where([aria-controls]) {
  cursor: pointer;
}

:where([aria-hidden="false"][hidden]) {
  display: initial;
}

:where([aria-hidden="false"][hidden]):not(:focus) {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

:where(:focus:not(:focus-visible), ::before:focus:not(:focus-visible), ::after:focus:not(:focus-visible)) {
  outline: none;
}

/**
 * Prettier ignore
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}
body {
  height: 600vh;
  background-color: aliceblue;
}
.features-point-item-body {
  display: flex;
  align-items: stretch;
  justify-content: center;
  margin-left: 9.8rem;
}
.features-card {
  width: 28rem;
  padding: 4.4rem 4rem 6rem;
  border-radius: 2.4rem;
  box-shadow: -5rem 3.6rem 5rem rgba(64, 48, 16, 0.1);
}
.features-card-lead {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
}
.features-card-note {
  margin-top: 20px;
  line-height: 2;
}
.features-card.-first {
  background-color: rgb(241, 201, 201);
  z-index: 1;
  transform: translateX(37px) translateY(12px);
}
.features-card.-second {
  background-color: rgb(228, 228, 228);
  z-index: 0;
  transform: translateX(-37px) translateY(-12px);
  opacity: 0.4;
}
.features-wrapper {
  padding-top: 50rem;
}
.recommendation-card-trigger {
  padding: 13.5rem 8.4% 0;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
img {
  border-radius: 10px;
  width: 130%;
}