.intro-list {
    display: grid;
    --columns: 2;
    --min-column-width: 250px;
    --gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(max(var(--min-column-width), calc(100%/var(--columns) - var(--gap))), 1fr));
    gap: var(--gap);
    justify-self: center;
    width: 100%;
}

.intro-list > li {
    position: relative;
    display: flex;
    width: fit-content;
    gap: 15px;
}

.intro-list > li > img {
    width: 4rem;
    aspect-ratio: 1 / 1;
    background-color: white;
    border-radius: 1rem;
    padding: 10px;
}

.intro-list > li.fire,
.intro-list > li.air {
    justify-self: end;
}

.intro-list > li.fire > img,
.intro-list > li.air > img {
    order: 1;
}

.intro-list > li.fire > div,
.intro-list > li.air > div {
    text-align: right;
}

/* base para todos los after */
.intro-list > li::after {
    content: '';
    position: absolute;
    width: 100%;
    bottom: 0;
    margin-bottom: -5px;
    height: 2px;
    border-radius: 1rem;
}

/* variantes por elemento */
.intro-list > li.fire::after {
    background: linear-gradient(45deg,#FFEB3B 0%, #FF9800 50%, #F44336 100%);
}

.intro-list > li.earth::after {
    background: linear-gradient(45deg, #877641 0%, #c9e766 100%);
}

.intro-list > li.air::after {
    background: linear-gradient(45deg, #E0F7FA 0%, #98e7f1 100%);
}

.intro-list > li.water::after {
    background: linear-gradient(45deg, #62edff 0%, #6edbff 50%, #0066cc 100%);
}