:root {
  /* Primary Colors */
  --color-primary-400: hsl(227, 67%, 48%);
  --color-primary-500: hsl(227, 82%, 38%);

  /* Neutral Colors */
  --color-neutral-100: hsl(0, 0%, 100%);
  --color-neutral-300: hsl(220, 14%, 96%);
  --color-neutral-400: hsl(240, 5%, 34%);
  --color-neutral-900: hsl(0, 0%, 0%);

  /* Font Family */
  --ff-base: 'Be Vietnam Pro', sans-serif;

  /* Font Size */
  --fs-48: 3rem;
  --fs-32: 2rem;
  --fs-20: 1.25rem;
  --fs-18: 1.125rem;
  --fs-16: 1rem;
  --fs-14: 0.875rem;
  --fs-12: 0.75rem;
  --fs-10: 0.625rem;

  /* Default Font Size */
  --fs-base: var(--fs-16);
  /* Font Weights */
  --fw-900: 900;
  --fw-800: 800;
  --fw-700: 700;
  --fw-600: 600;
  --fw-500: 500;
  --fw-400: 400;
  --fw-300: 300;
  --fw-200: 200;
  --fw-100: 100;

  /* Spacing */
  --spacing-6: 0.375rem;
  --spacing-8: 0.5rem;
  --spacing-12: 0.75rem;
  --spacing-16: 1rem;
  --spacing-20: 1.25rem;
  --spacing-24: 1.5rem;
  --spacing-32: 2rem;
  --spacing-40: 2.5rem;
}

/********* Reset **********/
/* Stop any animation if the user has set their device to "prefers reduced motion". */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    animation-duration: 0.1s !important;
    transition-duration: 0.1s !important;

    scroll-behavior: smooth;
  }
}

/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}
/*
  2. Remove default margin
*/
* {
  margin: 0;
}
/*
  3. Allow percentage-based heights in the application
*/
html,
body {
  height: 100%;
}
/*
  Typographic tweaks!
  4. Add accessible line-height
  5. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/*
  6. Improve media defaults
*/
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
/*
  7. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
  font: inherit;
}
/*
  8. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
/*
  9. Create a root stacking context
*/
#root,
#__next {
  isolation: isolate;
}

body {
  color: var(--color-neutral-400);
  font-family: var(--ff-base);
  font-size: var(--fs-base);
  line-height: 1.6;
  letter-spacing: -1%;
}

.visually-hidden {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

/********* Layout Styles **********/
.wrapper {
  max-width: 79.375rem;
  margin-inline: var(--spacing-12);
}
/********* Header Styles **********/
.header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-16);

  margin-block: var(--spacing-40);
  text-align: center;
}

.logo {
  margin-inline: auto;
  margin-block-end: var(--spacing-16);
}

h2.section__title {
  font-size: var(--fs-32);
  font-weight: var(--fw-600);
  line-height: 1.2;
  color: var(--color-neutral-900);
}

/********* Features Styles **********/
.features {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: min-content;
  gap: var(--spacing-24);
  justify-content: center;
  background-color: var(--color-neutral-300);
  border-radius: 20px;
  padding: var(--spacing-24);

  max-width: 100%;
}

.feature {
  background-color: var(--color-neutral-100);
  border-radius: 16px;
  padding: var(--spacing-32);
  margin-inline: auto;
  max-width: 450px;
  width: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-16);
}

.feature__image img {
  margin-inline: auto;
}

.feature__title {
  color: var(--color-neutral-900);
  font-size: var(--fs-20);
  font-weight: var(--fw-600);
  line-height: 1.3;
  letter-spacing: 1%;
  margin-block-end: var(--spacing-12);
}

/********* Media Queries **********/
@media (min-width: 48rem) {
  .wrapper {
    margin-inline: var(--spacing-24);
  }

  .header {
    max-width: 33.75rem;
    margin-inline: auto;
  }
}

@media (min-width: 64rem) {
  .features {
    grid-template-columns: repeat(2, minmax(300px, 450px));
  }

  .feature--create {
    flex-direction: column-reverse;
  }

  .feature--optimize {
    grid-column: 1 / -1;
    grid-row: 2;

    max-width: 100%;
    flex-direction: row-reverse;
    align-items: center;
  }

  .feature--automate {
    grid-column: 1 / -1;
    grid-row: 3;

    max-width: 100%;
    flex-direction: row;
    align-items: center;
  }

  .feature--integrate {
    grid-column: 1 / -1;
    grid-row: 4;

    max-width: 100%;
    flex-direction: row-reverse;
    align-items: center;
  }
}

@media (min-width: 84.375rem) {
  .wrapper {
    margin-inline: auto;
  }
  .features {
    grid-template-columns: repeat(6, 184px);
    grid-template-rows: 492px 326px;
  }

  .feature--create {
    grid-column: 1 / 3;
    grid-row: 1;

    flex-direction: column-reverse;
    align-items: center;
    max-width: 100%;
  }

  .feature--repurpose {
    grid-column: 3 / 5;
    grid-row: 1;

    flex-direction: column;
    align-items: center;
    max-width: 100%;
  }

  .feature--optimize {
    grid-column: 5 / -1;
    grid-row: 1;

    flex-direction: column-reverse;
    align-items: center;
    max-width: 100%;
  }

  .feature--automate {
    grid-column: 1 / 4;
    grid-row: 2;

    flex-direction: row-reverse;
    align-items: center;
  }

  .feature--integrate {
    grid-column: 4 / -1;
    grid-row: 2;

    flex-direction: row-reverse;
    align-items: center;
  }
}