/* ===== Modules ===== */

.hero-homepage {
    display: grid;
    background-color: inherit;
    padding: 2rem 0.5rem 1.2rem 0.5rem;
    /* background: var(--bg-module-gradient-aqua-moderate); */
    border-radius: 0.8rem;
    /* top, right, bottom, left */
}

@media (min-width: 768px) {
    .hero-homepage {
        padding-left: 2rem;
    }
}

.hero-about {
    display: grid;
    background-color: inherit;
    padding: 2rem 0.5rem 1.2rem 0.5rem;
    /* background: var(--bg-module-gradient-aqua-moderate); */
    border-radius: 0.8rem;
    /* top, right, bottom, left */
}

@media (min-width: 768px) {
    .hero-about {
        padding-left: 2rem;
    }
}

.module--box-shadow-bg-grey {
    display: grid;
    background-color: var(--bg-module-grey);
    padding: var(--module-padding);
    border-radius: 0.8rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.module--bg-light-blue {
    display: grid;
    background-color: var(--bg-module-light-blue);
    padding: var(--module-padding);
    border-radius: 0.8rem;
}

.module--bg-black {
    display: grid;
    background-color: var(--bg-module-black);
    padding: var(--module-padding);
    border-radius: 0.8rem;
}

.module--bg-white {
    display: grid;
    background-color: var(--bg-module-white);
    padding: var(--module-padding);
    border-radius: 0.8rem;
}

.module--box-shadow-bg-white {
    display: grid;
    background-color: var(--bg-module-white);
    padding: var(--module-padding);
    border-radius: 0.8rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.module--gradient-bg-aqua-moderate {
    display: grid;
    background: var(--bg-module-gradient-aqua-moderate);
    padding:var(--module-padding);
    border-radius: 0.8rem;
}

.module--gradient-bg-green-moderate {
    display: grid;
    background: var(--bg-module-gradient-green-moderate);
    padding: var(--module-padding);
    border-radius: 0.8rem;
}

.module--box-shadow-gradient-bg-green-moderate {
    display: grid;
    background: var(--bg-module-gradient-green-moderate);
    padding: var(--module-padding);
    border-radius: 0.8rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

}

.module--gradient-bg-purple-moderate {
    display: grid;
    background: var(--bg-module-gradient-purple-moderate);
    padding: var(--module-padding);
    border-radius: 0.8rem;
}

.card ol {
  display: grid;
  grid-template-rows: repeat(3, 0.25fr);
  gap: 1rem;
}