.container {
    width: min(120rem, calc(100% - 3rem));
    margin: 0 auto;
}

.site-header {
    background: var(--primary);
    color: white;
    padding: .3rem 0;
    box-shadow: var(--shadow);
}
.header-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.logo {
    width: 8rem;
    height: 8rem;
    object-fit: contain;
}

.site-main {
    padding: 2rem 0;
}

/* MOBILE FIRST */
.home-layout {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.site-footer{
	margin-bottom: 20px;
	padding-left: 40px;
}
/* DESKTOP */
@media (min-width: 900px) {
    .home-layout {
        display: grid;
        grid-template-columns: 1fr 28rem; /* 👈 IMPORTANT */
        gap: 2rem;
        align-items: start;
    }
	.sidebar {
        position: sticky;
        top: 2rem;
        height: fit-content;
    }
}