.home-container {
    background:
      /* url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(220, 13%, 18%, 1)' /></svg>") */
      no-repeat bottom,
      linear-gradient(to bottom, var(--md-primary-fg-color), #282c34 65%);
    padding-top: 1rem;
}

/* ---------- General setup of the greeting box. --------- */
.home-greeting {
    color: var(--md-primary-bg-color);
    /* margin: 0 0.8rem; */
}

.home-greeting h1 {
    color: currentcolor;
    font-weight: 700;
    margin-bottom: 1rem;
}

.home-greeting-code code{
    background: #282c34;
    color: #E6E6E6;
    min-height: 30em;
    box-shadow: 5px 5px 5px black !important;
}

.home-greeting .md-button {
    color: var(--md-primary-bg-color);
    margin-right: 0.5rem;
    margin-top: 0.5rem;
}

.home-greeting .md-button:focus,
.home-greeting .md-button:hover {
    background-color: var(--md-accent-fg-color);
    border-color: var(--md-accent-fg-color);
    color: var(--md-accent-bg-color);
}

.home-greeting .md-button--primary {
    background-color: var(--md-primary-bg-color);
    border-color: var(--md-primary-bg-color);
    color: #282c34;
}

/* Small devices. */
@media screen and (max-width: 768px) {
    .home-greeting h1 {
        font-size: 1rem;
    }

    .home-greeting-content {
        max-width: 30rem;
        padding-left: 1rem;
        padding-right: 1rem;
        margin: auto;
    }
    .home-greeting-code {
        max-width: 20rem;
        margin: auto;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
}

/* Medium devices. */
@media screen and (min-width: 768px) {

    .home-greeting-content {
        max-width: 30rem;
        margin: auto;
    }
    .home-greeting-code {
        max-width: 32rem;
        margin: auto;
    }
}

/* Large devices. */
@media screen and (min-width: 1160px) {

    .home-greeting {
        align-items: stretch;
        display: flex;
    }
    .home-greeting-content {
        margin-top: 3.5rem;
        max-width: 40rem;
        margin-left: 3rem;
    }
    .home-greeting-code {
        transform: translate3d(4rem, -2rem, 0);
        max-width: 32rem;
        z-index: 10;
        margin-right: 5rem;
    }

}

/* Keep your current “landing page” layout tweaks */
.md-header{position:initial}
.md-main__inner{margin:0}
.md-content{display:none}
@media screen and (min-width:60em){.md-sidebar--secondary{display:none}}
@media screen and (min-width:76.25em){.md-sidebar--primary{display:none}}
.md-main {background-color: #282c34}

/* Package grid */
.home-packages {
    padding: 2.5rem 0 4rem;
}
.home-packages h2 {
    color: rgba(255,255,255,.92);
    margin: 0 0 1rem;
}
.home-packages .subtitle {
    color: rgba(255,255,255,.72);
    margin: 0 0 1.5rem;
    max-width: 70ch;
}
.pkg-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 1.25rem;
}
@media screen and (min-width:60em){
    .pkg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (min-width:76.25em){
    .pkg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pkg-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    padding: 1.1rem 1.1rem 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.22);
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.pkg-head {
    display: flex;
    align-items: baseline;
    gap: .6rem;
}
.pkg-emoji { font-size: 1.35rem; line-height: 1; }
.pkg-title {
    color: rgba(255,255,255,.95);
    font-weight: 700;
    margin: 0;
    font-size: 1.05rem;
}
.pkg-desc {
    color: rgba(255,255,255,.72);
    margin: 0;
    font-size: .9rem;
}
.pkg-code pre {
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
}
.pkg-actions {
    margin-top: auto;
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}
.pkg-actions .md-button {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.92);
}
.pkg-actions .md-button--primary {
    background: rgba(124, 92, 255, .22);
    border-color: rgba(124, 92, 255, .45);
}