.directions-grid {
    display: grid;
    gap: 20px;
    grid-template-areas:
        'A B C C'
        'D D E F';
}

.directions-grid .grid-item {
    /*padding: 30px; */
    position: relative;}

.directions-grid .grid-item,
.directions-grid .grid-item img {
    border-radius: 20px;}

.directions-grid .grid-item:nth-child(1) {
    color: var(--color-white);
    grid-area: A;}
.directions-grid .grid-item:nth-child(2) {
    color: var(--color-white);
    grid-area: B;}
.directions-grid .grid-item:nth-child(3) {
    color: var(--color-white);
    grid-area: C;}
.directions-grid .grid-item:nth-child(4) {
    color: var(--dark-gray);
    grid-area: D;}
.directions-grid .grid-item:nth-child(5) {
    color: var(--dark-gray);
    grid-area: E;}
.directions-grid .grid-item:nth-child(6) {
    color: var(--dark-gray);
    grid-area: F;}

.directions-grid .direction__title {
    position: absolute;
    left: 30px;
    top: 30px;
    padding-right: 30px;}

.directions-grid .direction__name {
    font-size: 1.5rem;
    line-height: 1.5rem;
    font-weight: 600;}

.directions-grid .direction__desc {
    margin-top: 20px;
    line-height: 1.3rem;}