#welcome-site-description{
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto 10px 1fr;
    --site-description-padding: 20px;
    padding: var(--site-description-padding);
    gap: 25px;
}
#welcome-site-description>.header-text{
    grid-column: 1;
    grid-row: 1;
    font-size: 64px;
    font-weight: 700;
}
#welcome-site-description>.header-text>*:first-child{
    font-weight: 600;
}
#welcome-site-description>.welcome-text{
    grid-column: 1;
    grid-row: 3;
}
#welcome-site-description>.welcome-banner{
    grid-column: 2;
    grid-row-start: 1;
    grid-row-end: 4;
    border-radius: 20px;
    /* max-height: calc(100vh - var(--header-height) - 40px); */
    height: 510px;
    object-fit: cover;
}

.welcome-splitter{
    grid-row: 2;
    display: grid;
    grid-template-columns: 35% 10px 25px 85px auto;
    grid-column-gap: 10px;
    height: 3px;
}
.welcome-splitter>.outline{
    background: black;
    border-radius: 3px;
}
.welcome-splitter>.outline:nth-child(1){ grid-column: 2; }
.welcome-splitter>.outline:nth-child(2){ grid-column: 3; }
.welcome-splitter>.outline:nth-child(3){ grid-column: 4; }
.welcome-splitter>.outline:nth-child(4){ grid-column: 5; }

#recommended-trends{
    text-align: center;
    padding: 20px;
}
#recommended-trends .info-card{
    width: 655px;
}
#more-info{
    padding-inline: 10px;
    margin-bottom: 40px;
    text-align: center;
}

@media (max-width:950px) {
    #welcome-site-description{
        display: flex;
        grid-template-columns: none;
        grid-template-rows: none;
        flex-direction: column;
    }
    #welcome-site-description>.welcome-banner{
        height: 300px;
    }
}
@media (max-width:630px) {
    #welcome-site-description>.welcome-banner{
        width: 100%;
        max-width: 400px;
        align-self: center;
        height: revert;
    }
    #welcome-site-description{
        display: flex;
        grid-template-columns: none;
        grid-template-rows: none;
        flex-direction: column;
    }
    #welcome-site-description>.header-text{
        font-size: 48px;
        text-align: center;
    }
    .info-cards .card-content>h3{
        font-size: 40px;
    }
    .info-cards .info-card-arrow-cube{
        display: none;
    }
}