section {
    margin: 15rem;
}

section p {
    line-height: 1.8rem;
}

/* Hero section styling */
.hero-heading img {
    object-fit: cover;
    object-position: top;

    width: 24dvw !important;
    height: 48dvh !important;

    overflow: hidden;
    border-radius: 100%;
}

.hero-section {
    justify-content: space-between;
    margin: 5rem 8rem;
    gap: 3rem;
}

/* Main stack display component styling*/
.stack-display {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto auto;
    gap: .5rem;
}

/* Main timeline component styling */


.timeline-display {
    position: relative;
    display: grid;

    padding-left: 2rem;

    grid-template-columns: repeat(1, 1fr);
    grid-row: auto auto;
}

.timeline-display::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: .5rem;

    width: .5rem;

    border-radius: 20mm;
    background-color: var(--background-soft);
}

.contact-panel {
    display: grid;

    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;

    gap: 1rem;
}


.ingredients-panel {
    display: grid;

    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;

    gap: 1rem;
}

footer {
    border-block-start: 1px solid color-mix(in srgb, var(--background) 80%, white);
    background-color: color-mix(in srgb, var(--background) 93%, white);
    padding: 2rem 0 4rem;
}

@media (width <=900px) {
    section {
        margin: 1rem !important;
    }

    .hero-heading {
        width: -webkit-fill-available;
        background:
            linear-gradient(to bottom,
                var(--background) 20%,
                transparent 70%),
            linear-gradient(to top,
                var(--background) 30%,
                transparent 90%),
            url('../../img/profile_pic.png') 40% 23% no-repeat;
        flex-direction: column !important;
        text-align: center;

        align-items: center;
        justify-content: center;

        margin-bottom: 10rem !important;
    }

    .hero-heading div {
        align-items: center;
        justify-content: center;
    }

    .hero-heading img {
        display: none;
    }

    .contact-panel {
        grid-template-columns: repeat(2, 1fr);
        gap: .8rem;
    }

    .ingredients-panel {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (width <=450px) {
    section {
        padding: 5rem 0 !important;
    }

    .stack-display {
        grid-template-columns: repeat(4, 1fr);
        width: -webkit-fill-available;
    }

    div.alt .stack-display {
        grid-template-columns: repeat(3, 1fr);
        width: -webkit-fill-available;
    }

    div.alt {
        justify-content: space-between;
        padding: 0 !important;
        gap: 0rem !important;
    }

    .timeline-display {
        padding-left: 1.2rem;
    }

    .timeline-display::before {
        left: 1px;
    }

    .contact-panel {
        grid-template-columns: repeat(1, 1fr);
        gap: .8rem;
    }

    .ingredients-panel {
        grid-template-columns: repeat(1, 1fr);
    }

}