.main__body {
    display: grid;
    gap: var(--xxxxl);
}

.main__section {
    display: grid;
    gap: var(--s);
}

.main__subtitle {
    font-size: var(--font-m);
    font-weight: var(--regular);
}

.main__intro,
.main__outro {
    font-weight: var(--lighter);
    line-height: 1.5;
    letter-spacing: 0.034rem;
    opacity: 0.8;
}

.main__section-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--l);
    font-size: var(--font-s);
}

.main__section-grid-box {
    /* flex: 1;
    width: 100%; */
    border: 0.01rem dashed var(--color-input-border);
    background-color: var(--color-background-card);
    font-weight: var(--light);
    position: relative;
    transition: 0.3s ease-out all;
    z-index: 1;
}

.main__section-grid-box:hover {
    filter: brightness(1.3);
}

.main__section-grid-box:nth-child(even) {
    background-color:var(--color-alternate-background);
}

.main__section-grid-box-inner {
    padding: var(--xl) var(--xxl);
    overflow: hidden;
    text-wrap: nowrap;
    position: relative;
}

.main__section-grid-box .icon {
    position: absolute;
    font-size: 3.6rem;
    opacity: 0.08;
    top: 0;
    left: 0;
    transform: translate(-20%, -15%);
}

.main__section-grid-box span {
    opacity: 0.77;
}

.main__section-grid .tooltip {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(0, calc(-100% - var(--xs)));
    min-width: 20rem;
    max-width: 100%;
    background-color: var(--color-background-page);
    border: 0.01rem solid var(--color-input-border);
    padding: var(--s);
    line-height: 1.4;
    font-weight: var(--light);
    opacity: 0;
    pointer-events: none;
}

.main__section-grid .tooltip::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: var(--s);    
    transform: translate(0, 100%);
    width: 0.1rem; 
    height: 0.1rem; 
    border-left: var(--xs) solid transparent;
    border-right: var(--xs) solid transparent;
    border-top: var(--xs) solid var(--color-input-border);
    filter: brightness(1.3);
}

.main__section-grid-box-inner:hover + .tooltip {
    opacity: 1;
}

.learn-more {
    font-size: var(--font-s);
    transition: 0.3s ease-out all;
}

.learn-more:hover {
    opacity: 0.74;
}

.learn-more span {
    text-decoration: underline;
}

.main__outro {
    margin-top: var(--xxxl);
    display: grid;
    gap: var(--s);
}


/* media query */
@media (max-width: 1200px) {
    .main__section-grid .tooltip {
        max-width: 100%;
        min-width: 100%;

    }
}

@media (max-width: 560px) {
    .main__section-grid {
        flex-direction: column;
        flex-wrap: nowrap;
    }
    
    .main__section-grid-box-inner {
        text-wrap: initial;
        display: flex;
        justify-content: center;
        border: 1px dashed coral;
        text-align: center;
    }
}