* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  scroll-padding-top: 25rem;
}

body {
  font-family: "MyInter", sans-serif;
  font-weight: var(--font-weight-04);
  line-height: var(--primary-line-height);

  background-color: var(--shade-color-10);
  color: var(--grey-color-02);
}

.container {
  max-width: 200rem;
  margin: 0 auto;
  padding: 0 var(--space-07);
}

.container-small {
  max-width: 160rem;
  margin: 0 auto;
  padding: 0 var(--space-07);
}

.primary-heading {
  font-size: var(--font-size-09);
}

.secondary-heading {
  font-size: var(--font-size-08);
}

.tertiary-heading {
  font-size: var(--font-size-07);
  font-weight: var(--font-weight-07);
}

.btn:link,
.btn:visited {
  display: inline-block;
  text-decoration: none;
  font-size: var(--font-size-07);
  font-weight: var(--font-weight-06);
  padding: var(--space-05) var(--space-07);
  border-radius: var(--primary-border-radius);
  background-color: var(--primary-color);
  color: #fff;

  transition: all 300ms;
}

.btn:hover,
.btn:active {
  background-color: var(--tint-color-02);
}

.arrow {
  transition: all 300ms;
}

.btn:hover .arrow,
.btn:active .arrow {
  display: inline-block;
  transform: translate(4px, 0);
}

.margin-top-big {
  margin-top: var(--space-11);
}

.margin-top-small {
  margin-top: var(--space-09);
}

.margin-bottom-big {
  margin-bottom: var(--space-11);
}

.margin-bottom-small {
  margin-bottom: var(--space-09);
}

.icon {
  width: var(--font-size-10);
  height: var(--font-size-10);
}

.accordion-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-06);
}

.accordion-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: var(--space-10);

  align-items: center;

  border: var(--border-width-03) var(--primary-color) solid;
  border-radius: var(--primary-border-radius);

  padding: var(--space-07);
}

.accordion-arrow-icon {
  width: var(--font-size-10);
  height: var(--font-size-10);
  background-image: url(../icon/arrow-right.svg);
}

.arrow-icon-down {
  background-image: url(../icon/arrow-down.svg);
}

.accordion-content {
  grid-column: 2;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.accordion-content.open {
  grid-template-rows: 1fr;
}

.accordion-content-inner {
  overflow: hidden;
}

.accordion-content-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
  margin-top: var(--space-07);

  list-style: none;

  font-size: var(--font-size-06);
  font-weight: var(--font-weight-05);
  line-height: var(--line-height-01);
}

.accordion-arrow-icon {
  transition: transform 0.3s ease;
}