Spacing After List Not Working

Question:
So I am trying to add spacing after the :last-child of each of the lists (dropdown-content) so the menus don’t overlap, but I can’t seem to get it to work.

Repl link:
https://replit.com/@SalladShooter/DigitalCookBook

CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

@media (prefers-color-scheme: dark) {
    :root {
        --back: #212425;
        --back-accent: #313435;
        --fore: white;
        --primary: #1c96c0;
        --primary-accent: #4cc6f0;
        --danger: #f04a64f;
        --shadow: rgba(0,0,0,0.3);
        --font: 'Poppins', Arial; 
        --small-radius: 0.25em;
        --radius: 0.5em;
    }
}
@media (prefers-color-scheme: light) {
    :root {
        --back: white;
        --back-accent: #eee;
        --fore: black;
        --primary: #1c96c0;
        --primary-accent: #4cc6f0;
        --danger: #f04a64f;
        --shadow: rgba(0,0,0,0.3);
        --font: 'Poppins', Arial; 
        --radius: 0.5em;
        --small-radius: 0.25em;
        --radius: 0.5em;
    }
}

html {
    width: 100%;
    height: 100%;
    background: var(--back);
    color: var(--fore);
    font-family: var(--font);
}

h1 {
    text-align: center;
}

.container {
    margin: auto;
    margin-left: 10vw;
    margin-right: 10vw;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
}

.dropdown {
    max-width: 13em;
    margin: auto;
    margin-bottom: 2em;
    padding-bottom: 2.5em;
    position: relative;
    width: 100%;
}

.dropdown-btn {
    font-size: 18px;
    width: 100%;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7em 0.5em;
    cursor: pointer;
    border-bottom: 2px solid var(--primary);
    margin-bottom: 1em;
    background: transparent;
    transition: all 0.3s ease-in-out
}

.dropdown-btn:hover {
    border-radius: var(--radius); 
    background: linear-gradient(to left top, var(--primary), var(--primary-accent));
    border: none;
}

.arrow {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--fore);
    transition: transform ease-in-out 0.3s;
}

.dropdown-content {
    margin: 0;
    position: absolute;
    width: 100%;
    opacity: 0;
    transform: translateY(-2em);
    transition: transform 0.5s ease-in-out, opacity 0.3s ease-in-out;
    left: 0;
    display: flex;
    flex-direction: column;
    list-style: none;
    counter-reset: list-counter;
}

input[type="checkbox"]:checked ~ .dropdown-content {
    opacity: 1;
    transform: translateY(0);
}

@keyframes drop-in {
    from {
        transform: translateY(-2em);
    }
    to {
        transform: translateY(0em);
    }
}

.dropdown-content li {
    flex: 1;
    background: var(--back-accent);
    border-radius: var(--small-radius);
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    box-shadow: 0 5px 5px 0 var(--shadow);
    margin-bottom: 0.5em;
    height: 5em;
    animation: drop-in 0.5s ease-in-out forwards;
    animation-delay: calc(60ms * var(--delay));
    counter-increment: list-counter;
    font-size: 0.75em;
    margin-left: 2.5em;
    transition: all 0.3s ease-in-out;
}

li::before {
    position: absolute;
    content: counter(list-counter);
    display: table;
    height: 100%;
    text-align: center;
    line-height: 3.3em;
    height: 3.3em;
    vertical-align: middle;
    width: 2em;
    background: var(--back-accent);
    border-radius: var(--small-radius);
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
    left: -2.5em;
    margin-right: 0.1em;
    color: var(--primary);
    box-shadow: 0 5px 5px 0 var(--shadow);
    font-weight: 900;
    transition: all 0.3s ease-in-out;
}

.dropdown-content li:last-child {
    margin-bottom: 25em;
}

.dropdown-content.menu-open li {
    left: 0;
    transform: translateY(0);
}

.dropdown-content.menu-open {
    opacity: 1;
    transform: translateY(0);
}

input[type="checkbox"]:checked + label > .arrow {
   transform: rotate(180deg);
}

input[type="checkbox"] {
    opacity: 0;
    position: absolute;
}

input[type="checkbox"]:focus + label {
    box-shadow: 0 0 20px var(--shadow);
}

.dropdown-content li:hover {
    background: var(--primary);
    color: var(--fore);
    background: linear-gradient(to left top, var(--primary), var(--primary-accent));
}

.dropdown-content li:hover::before {
    color: var(--back);
    background: var(--primary);
    background: linear-gradient(to left top, var(--primary), var(--primary-accent));
}

.dropdown-content li a {
    display: block;
    padding: 0.7em 0.5em;
    margin: 0.1em 0;
    color: var(--fore);
    text-decoration: none;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
} 
HTML
{% extends 'base.html' %}

{% block title %}DigitalCookBoox{% endblock %}

{% block content %}
    <h1>DigitalCookBook</h1>
    <div class="container">
        <div class="dropdown">
          <input type="checkbox" id="dropdown1" />
          <label for="dropdown1" class="dropdown-btn">
            <span>Breakfast</span>
            <span class="arrow"></span>
          </label>
    
          <ol class="dropdown-content">
            <li style="--delay: 1;"><a href="#">Buttermilk Pancakes</a></li>
            <li style="--delay: 2;"><a href="#">French Toast Casserole</a></li>
            <li style="--delay: 3;"><a href="#">Test</a>
          </ol>
        </div>
        <div class="dropdown">
          <input type="checkbox" id="dropdown2" />
          <label for="dropdown2" class="dropdown-btn">
            <span>Lunch</span>
            <span class="arrow"></span>
          </label>
    
          <ol class="dropdown-content">
            <li style="--delay: 1;"><a href="#">Pizza</a></li>
            <li style="--delay: 2;"><a href="#">Test</a></li>
          </ol>
        </div>
        <div class="dropdown">
          <input type="checkbox" id="dropdown3" />
          <label for="dropdown3" class="dropdown-btn">
            <span>Breakfast</span>
            <span class="arrow"></span>
          </label>

          <ol class="dropdown-content">
            <li style="--delay: 1;"><a href="#">Buttermilk Pancakes</a></li>
            <li style="--delay: 2;"><a href="#">French Toast Casserole</a></li>
            <li style="--delay: 3;"><a href="#">Test</a>
          </ol>
        </div>
        <div class="dropdown">
          <input type="checkbox" id="dropdown4" />
          <label for="dropdown4" class="dropdown-btn">
            <span>Lunch</span>
            <span class="arrow"></span>
          </label>

          <ol class="dropdown-content">
            <li style="--delay: 1;"><a href="#">Pizza</a></li>
            <li style="--delay: 2;"><a href="#">Test</a></li>
          </ol>
        </div>
    </div>
{% endblock %} 
JS
const dropdownBtn = document.querySelector(".dropdown-btn");
const dropdownCaret = document.querySelector(".arrow");
const dropdownContent = document.querySelector(".dropdown-content");

// add click event to dropdown button
dropdownBtn.addEventListener("click", () => {
  // add rotate to caret element
  dropdownCaret.classList.toggle("arrow-rotate");
  // add open styles to menu element
  dropdownContent.classList.toggle("menu-open");
  dropdownBtn.setAttribute(
    "aria-expanded",
    dropdownBtn.getAttribute("aria-expanded") === "true" ? "false" : "true"
  );
});

document.querySelectorAll('.dropdown');
const container = document.getElementById('dropdown-container');

// Loop through each dropdown and adjust its position based on the total height
dropdowns.forEach((dropdown, index) => {
    dropdown.querySelector('input[type="checkbox"]').addEventListener('input', () => {
        const totalHeight = Array.from(dropdowns).slice(0, index).reduce((acc, curr) => acc + curr.clientHeight, 0);
        container.style.marginBottom = `${totalHeight}px`;
    });
});