#discover {
    align-items: center;
    justify-content: center;
}

section .discover {
    display: grid;
    grid-template-areas: "share life control"
                         "relax plan pamper";
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: var(--sectionGridGap);
    height: 100%;
    width: 100%;
}

section .discover img {
    width: 70px;
    height: 70px;
    margin: 40px;
}

section .discover .image {
    display: flex;
    align-items: center;
    justify-content: center;
}

section .discover .image {
    width: auto;
}

section .discover .image > div {
    background-color: var(--colorGrayLight);
    border-radius: 50%;
}

section .discover .title {
    grid-area: title;
    text-align: center;
}

section .discover .life {
    grid-area: life;
}

section .discover .share {
    grid-area: share;
}

section .discover .plan {
    grid-area: plan;
}

section .discover .pamper {
    grid-area: pamper;
}

section .discover .relax {
    grid-area: relax;
}

section .discover .control {
    grid-area: control;
}

section .discover .area {
    text-align: center;
    transition: all .2s ease-in-out;
}

section .discover .area h3 {
    font-weight: 700;
    margin-top: 24pt;
    margin-bottom: 10pt;
}

section .discover .area .bold {
    font-weight: 700;
}

section .discover .area:hover {
    transform: scale(1.1);
}

@media(max-width: 950px) {
    section .discover {
        grid-template-areas: "share life"
                             "control relax"
                             "plan pamper";
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
    }
}

@media(max-width: 500px) {
    section .discover {
        grid-template-areas: "share"
                             "life"
                             "control"
                             "relax"
                             "plan"
                             "pamper";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto auto;
    }
}