.c-feature-section {
  display: flex;
  justify-content: center;
}

.c-feature-section p,
.c-feature-section ul,
.c-feature-section li,
.c-feature-section h2 {
  margin-bottom: 0;
}

.c-feature-section .c-feature-section__container {
  display: grid;
  position: relative;
  max-width: var(--etest-content-max-width, 1440px);
  border-radius: calc(20 * var(--etest-section-unit));
  overflow: hidden;
  width: calc(100% - 32px);
  row-gap: calc(16 * var(--etest-section-unit));
  column-gap: calc(16 * var(--etest-section-unit));
  grid-template-columns: 1fr;

  @media (767px < width) {
    grid-template-columns: 5fr 7fr;
    width: calc(100% - 48px);
    column-gap: calc(24 * var(--etest-section-unit));
    margin-inline: calc(-20 * var(--etest-section-unit));
    padding-inline: calc(20 * var(--etest-section-unit));
  }
}

.c-feature-section .c-feature-section__content {
  display: flex;
  flex-direction: column;
  row-gap: calc(16 * var(--etest-section-unit));
  padding-block-start: calc(40 * var(--etest-section-unit));

  @media (min-width: 1024px) {
    row-gap: calc(24 * var(--etest-section-unit));
    padding-block-start: calc(80 * var(--etest-section-unit));
  }
}

.c-feature-section .c-feature-section__heading-group {
  display: flex;
  flex-direction: column;
  row-gap: calc(8 * var(--etest-section-unit));

  @media (min-width: 1024px) {
    row-gap: calc(20 * var(--etest-section-unit));
  }
}

.c-feature-section .c-feature-section__title {
  font-weight: 700;
  color: #0e0e0e;
  line-height: 1.2;
  text-wrap: balance;
  font-size: calc(28 * var(--etest-section-unit));

  @media (min-width: 1024px) {
    font-size: calc(42 * var(--etest-section-unit));
  }
}

.c-feature-section .c-feature-section__description {
  color: #0e0e0e;
  text-wrap: balance;

  @media (min-width: 1024px) {
    font-size: calc(16 * var(--etest-section-unit));
    text-wrap: wrap;
  }
}

.c-feature-section .c-feature-section__list {
  display: flex;
  flex-direction: column;
  row-gap: calc(12 * var(--etest-section-unit));
  list-style-type: none;
}

.c-feature-section .c-feature-section__list-item {
  display: flex;
  align-items: center;
  column-gap: calc(12 * var(--etest-section-unit));

  @media (min-width: 1024px) {
    column-gap: calc(8 * var(--etest-section-unit));
  }
}

.c-feature-section .c-feature-section__index {
  font-weight: 700;
  font-style: italic;
  color: #9a1b1d;
  font-size: calc(15 * var(--etest-section-unit));

  @media (min-width: 1024px) {
    font-size: calc(16 * var(--etest-section-unit));
  }
}

.c-feature-section .c-feature-section__item-content {
  flex: 1;
  font-weight: 600;
  color: #0e0e0e;
  font-size: calc(15 * var(--etest-section-unit));

  @media (min-width: 1024px) {
    font-size: calc(16 * var(--etest-section-unit));
  }
}

.c-feature-section .c-feature-section__separator {
  height: calc(1 * var(--etest-section-unit));
  width: 100%;
  background-color: #d6d6d6;
}

.c-feature-section .c-feature-section__button {
  border: calc(1 * var(--etest-section-unit)) solid #d6d6d6;
  border-radius: calc(9999 * var(--etest-section-unit));
  padding: calc(12 * var(--etest-section-unit)) calc(24 * var(--etest-section-unit));
  display: flex;
  align-items: center;
  column-gap: calc(4 * var(--etest-section-unit));
  font-weight: 600;
  width: fit-content;
  font-size: calc(16 * var(--etest-section-unit));

  @media (min-width: 1024px) {
    font-size: calc(16 * var(--etest-section-unit));
  }
}

.c-feature-section .c-feature-section__images {
  display: grid;
  grid-template-areas: "single";
  padding-block-end: calc(40 * var(--etest-section-unit));

  @media (min-width: 1024px) {
    padding-block: calc(80 * var(--etest-section-unit));
  }
}

.c-feature-section .c-feature-section__image-container {
  grid-area: single;
}

.c-feature-section .c-feature-section__image-container.c-feature-section__image-container--first {
  padding: calc(12 * var(--etest-section-unit)) calc(8 * var(--etest-section-unit)) calc(38 * var(--etest-section-unit));

  @media (min-width: 1024px) {
    padding: calc(27 * var(--etest-section-unit)) calc(61 * var(--etest-section-unit));
  }
}

.c-feature-section .c-feature-section__image-container.c-feature-section__image-container--second {
  display: flex;
  align-items: end;
  justify-content: end;
  padding: calc(6 * var(--etest-section-unit));

  @media (min-width: 1024px) {
    padding: calc(15 * var(--etest-section-unit));
  }
}

.c-feature-section .c-banner-section__picture {
  display: flex;
  box-shadow: calc(0 * var(--etest-section-unit)) calc(10 * var(--etest-section-unit)) calc(36 * var(--etest-section-unit)) rgba(0, 0, 0, 0.16), calc(0 * var(--etest-section-unit)) calc(0 * var(--etest-section-unit)) calc(0 * var(--etest-section-unit)) calc(1 * var(--etest-section-unit)) rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transform-origin: center;
  border: calc(4 * var(--etest-section-unit)) solid #fff;
  border-radius: calc(6 * var(--etest-section-unit));

  @media (min-width: 1024px) {
    border: calc(8 * var(--etest-section-unit)) solid #fff;
    border-radius: calc(16 * var(--etest-section-unit));
  }
}

.c-feature-section .c-feature-section__image-container.c-feature-section__image-container--first .c-banner-section__picture {
  transform: rotate(-5deg);
  width: 91%;

  @media (min-width: 1024px) {
    width: 91%;
  }
}

.c-feature-section .c-feature-section__image-container.c-feature-section__image-container--second .c-banner-section__picture {
  width: 43%;
  transform: rotate(5deg);
}

.c-feature-section .c-feature-section__icon {
  width: calc(20 * var(--etest-section-unit));
  height: calc(20 * var(--etest-section-unit));

  @media (min-width: 1024px) {
    width: calc(24 * var(--etest-section-unit));
    height: calc(24 * var(--etest-section-unit));
  }
}