.feature {
  width: 1024px;
  margin: auto;
  margin-bottom: 9rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.feature-main-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--spacing) * 8);
}

.feature-container {
  width: 1024px;
  height: 204px;
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: calc(var(--spacing) * 4);
}

.feature-heading {
  text-align: center;
  --tw-leading: 110%;
  --tw-font-weight: var(--font-weight-semibold);
  line-height: 110%;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-main);
  letter-spacing: -0.02em;
  font-size: max(1.75rem, min(4vw, 2.5rem));
}

.feature-text {
  color: #08090acc;
  max-width: 40.5rem;
  width: 648px;
  height: 48px;
  text-align: center;
  font-size: 16px;
}

.feature-container-bottom {
  width: 1024px;
  height: 545.2px;
  /* border: 1px solid blue; */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: calc(var(--spacing) * 6);
}

.card {
  width: 494.94px;
  height: 535.2px;
  padding: 6px;
  border: 1px solid #08090a12;
  border-radius: var(--radius-3xl);
}

.feature-card-top {
  display: flex;
  flex-direction: column;

  padding: calc(var(--spacing) * 6);
  gap: calc(var(--spacing) * 4);
  width: 480.94px;
  height: 201.2px;
}

.feature-card-toptext {
  text-transform: uppercase;
  color: #0c8c5e;
  --tw-tracking: 0.6px;
  letter-spacing: 0.6px;
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  --tw-leading: 150%;
  line-height: 150%;
  font-size: var(--text-xs);
  font-family: var(--font-geist-mono);
}

.feature-card-heading {
  --tw-tracking: -0.24px;
  letter-spacing: -0.24px;
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
  color: #08090a;
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  --tw-leading: 130%;
}

.feature-card-bottext {
  color: #08090acc;
  font-size: var(--text-base);
  line-height: 1.5;
}

.feature-card-bottom {
  width: 100%;
  height: 320px;
}

.feature-card-bottom img {
  object-fit: cover;
  position: relative;
  left: -0.4rem;
}

.feature-card-bottom-img img {
  object-fit: cover;
  position: relative;
  /* left: -0.4rem; */
  width: 483px;
}

.feature-container-bottom-2 {
  border: 1px solid blue;
  width: 100%;
  height: 664.8px;

  border: 1px solid #08090a12;
  border-radius: var(--radius-3xl);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.feature-bottom-top {
  width: 1010px;
  height: 225.2px;

  padding: 48px 32px;
  margin: 6px 6px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: calc(var(--spacing) * 4);
}

.feature-card-bottom-toptext {
  text-transform: uppercase;
  color: #0c8c5e;
  --tw-tracking: 0.6px;
  letter-spacing: 0.6px;
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  --tw-leading: 150%;
  line-height: 150%;
  font-size: var(--text-xs);
  font-family: var(--font-geist-mono);
  width: 70.2px;
  text-align: center;
  text-wrap: balance;
}

.feature-bottom-heading {
  --tw-tracking: -0.24px;
  letter-spacing: -0.24px;
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
  color: #08090a;
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  --tw-leading: 130%;
  text-align: center;
  height: 31.2px;
}

.feature-card-bottom-bottext {
  color: #08090acc;
  text-wrap: balance;
  font-size: var(--text-base);
  line-height: 1.5;
  text-align: center;
  max-width: 40rem;
}