tomwray13

import { DateTimeResolver } from 'graphql-scalars'

const typeDefs = `
  scalar DateTime
`

const resolvers = {
  DateTime: DateTimeResolver,
}

tomwray13

<div class="features-wrapper">
    <div class="feature">...</div>
    <div class="feature">...</div>
    <div class="feature">...</div>
    <div class="feature">...</div>
</div>

<style>
.features-wrapper {
    display: grid;

tomwray13

<div class="..."> <!-- Wrapper class goes here -->
    <div class="feature">
        <img class="feature__img" src="..." alt="...">
        <h3 class="feature__title">...</h3>
        <p class="feature__description">...</p>
    </div>
    <div class="feature">...</div>
    <div class="feature">...</div>
    <div class="feature">...</div>
</div>

tomwray13

<div class="grid grid--plus">
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
</div>

<style>
.grid {
    display: grid;
    grid-column-gap: 1rem;

tomwray13

<div class="grid grid--experiences">
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
</div>

<style>
.grid {

tomwray13

<div class="..."> <!-- Wrapper class goes here -->
    <div class="card">
        <img class="card__img" src="..." alt="...">
        <h4 class="card__subtitle">...</h4>
        <p class="card__description">...</p>
        <div class="card__rating">...</div>
    </div>
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>

tomwray13

<div class=“nav”>
    <!-- New div added without the need to refactor -->
    <div class="nav__wrapper"> 
        <ul class=“nav__menu”>
            <li class=“nav__item”>
                <a class=“nav__link”>Home</a>
            </li> 
        </ul>
    </div>
</div>

tomwray13

<div class=“nav”>
    <ul class=“nav__menu”>
        <li class=“nav__item”>
            <a class=“nav__link”>Home</a>
        </li> 
    </ul>
</div>

tomwray13

<div class=“nav”>
    <div class="nav__wrapper"> <!-- Here is my new div-->
        <!-- Now I need to refactor all the classes below
        because of the new div -->
        <ul class=“nav__wrapper__menu”>
            <li class=“nav__wrapper__menu__item”>
                <a class=“nav__wrapper____menu__item__link”>Home</a>
            </li> 
        </ul>
    <div>

tomwray13

<div class=“nav”>
    <ul class=“nav__menu”>
        <li class=“nav__menu__item”>
            <a class=“nav__menu__item__link”>Home</a>
        </li> 
    </ul>
</div>