@import url("/css/pages/index/hero.css");
@import url("/css/pages/index/sell-music.css");
@import url("/css/pages/index/audience-reach.css");
@import url("/css/pages/index/what-is-riimbo.css");

.index-section {
    padding: 54px 0;
    background: var(--color-bg);
}

.index-section__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.94fr) minmax(320px, 1.06fr);
    align-items: center;
    gap: 64px;
}

.index-section__grid--reverse {
    grid-template-columns: minmax(320px, 1.06fr) minmax(0, 0.94fr);
}

.index-section__content {
    max-width: 520px;
}

.index-section__content p {
    margin-top: 16px;
    color: var(--color-text-soft);
    font-size: 1rem;
    line-height: 1.35;
}

.index-section__visual {
    min-height: 420px;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

@media (max-width: 1024px) {

    .index-section__grid,
    .index-section__grid--reverse {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}