/* Features */

.features
{
  flex-direction: column;
  width: 100%;
  height: auto;
  background-color: var(--primary-color);
  color: var(--white-color);
  gap: 1em;
}

.titles-span
{
color: var(--color-secondary);
}

.feature-group
{
  width: 90%;
  height: 50%;
  gap: 1em;
}

.feature
{
  flex-direction: column;
  width: 25%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: var(--border-radius);
  padding: 1em;
  background-color: var(--white-color);
  gap:1em;
}

.feature-text
{
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: 0.5em;
}

.feature-icon
{
  justify-self: flex-start;
  align-self: flex-start;
}

.feature-icon:hover
{
	-webkit-animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.feature-title
{
  width:100%;
  color: var(--accent-color);
  font-size: var(--fs-feature-title);
  line-height: var(--lh-feature-title);
}

.feature-explanation
{
  width:100%;
  color: var(--primary-color);
  font-size: (var(--fs-feature-explain));
  line-height: var(--lh-feature-explain);
} 

 @media only screen and (max-width: 1024px)
{
  .feature-group
  {
    flex-wrap: wrap;
  }
  .feature
  {
    width: clamp(10rem, 100%, 19rem);
    height: auto;
  }
}