.site-navigation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.site-navigation-card-link {
    display: block;
    min-height: 72px;
    border: 1px solid rgb(68, 68, 68);
    background: rgb(28, 28, 28);
}

.site-navigation-card-link span {
    display: block;
}

.site-navigation-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.site-navigation-list a {
    display: block;
}

.site-navigation-list-item span {
    display: block;
}

.site-navigation-list small {
    display: block;
    color: rgb(190, 190, 190);
    font-style: italic;
}

.site-navigation-terms-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.site-navigation-terms-nav a {
    border: 1px solid rgb(68, 68, 68);
    background: rgb(28, 28, 28);
}

.site-navigation-term-block h2 {
    margin: 0;
}

.site-navigation-term-block h3 {
    color: rgb(255, 166, 0);
}

.site-navigation-term-block p {
    margin: 5px 0 0;
}

.site-navigation-content-card img {
    max-width: 100%;
    height: auto;
}

.jamgather-intro-hero {
    background: rgb(32, 32, 32);
    border: 1px solid rgb(62, 62, 62);
    padding: 30px 24px;
}

.jamgather-intro-copy {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.jamgather-intro-grid,
.jamgather-use-grid {
    display: grid;
    gap: 16px;
}

.jamgather-intro-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.jamgather-use-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jamgather-intro-card,
.jamgather-use-card {
    background: rgb(32, 32, 32);
    border: 1px solid rgb(62, 62, 62);
    padding: 16px;
}

.jamgather-intro-card img,
.jamgather-use-card img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.jamgather-intro-band {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(32, 32, 32);
    border: 1px solid rgb(62, 62, 62);
    padding: 18px;
}

.basic-interface-hero,
.basic-interface-card,
.basic-interface-flow-card,
.basic-interface-guide-card,
.basic-interface-wide-card {
    background: rgb(32, 32, 32);
    border: 1px solid rgb(62, 62, 62);
}

.basic-interface-hero {
    padding: 30px 24px;
}

.basic-interface-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.basic-interface-what-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.basic-interface-what-grid .basic-interface-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.basic-interface-focus-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.65fr) minmax(0, 1fr);
    gap: 16px;
}

.basic-interface-card,
.basic-interface-flow-card,
.basic-interface-wide-card {
    padding: 16px;
}

.basic-interface-card img,
.basic-interface-guide-card img,
.basic-interface-wide-card img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top center;
}

.basic-interface-card img.basic-interface-crop-contain {
    object-fit: contain;
    background: rgb(22, 22, 22);
}

.basic-interface-card img.basic-interface-square-img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: rgb(22, 22, 22);
}

.basic-interface-what-grid .basic-interface-card img.basic-interface-square-img {
    width: 100%;
}

.basic-interface-card-theme {
    letter-spacing: 0;
    line-height: 1.2;
}

.basic-interface-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.basic-interface-guide-card {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    gap: 18px;
    align-items: center;
    padding: 16px;
}

.w-26 {
    width: 26px;
    height: auto;
}

.w-28 {
    width: 28px;
    height: auto;
}

.w-40 {
    width: 40px;
    height: auto;
}

.w-120 {
    width: 120px;
    height: auto;
}

.w-280 {
    width: 280px;
    height: auto;
}

.w-290 {
    width: 290px;
    height: auto;
}

.w-510 {
    width: 510px;
}

.mb--2 {
    margin-bottom: -2px;
}

.mb--3 {
    margin-bottom: -3px;
}

.mb--5 {
    margin-bottom: -5px;
}

.d-block {
    display: block;
}

@media (max-width: 760px) {
    .site-navigation-grid {
        grid-template-columns: 1fr;
    }

    .jamgather-intro-grid,
    .jamgather-use-grid,
    .basic-interface-grid,
    .basic-interface-what-grid,
    .basic-interface-focus-grid,
    .basic-interface-flow,
    .basic-interface-guide-card {
        grid-template-columns: 1fr;
    }

    .jamgather-intro-band {
        flex-direction: column;
        gap: 12px;
    }
}