/* ============================================================
   GRACE TSAREV | TEACHER + CREATOR
   MAIN STYLESHEET
   ============================================================ */


/* ============================================================
   01. EASY CUSTOMIZATION PANEL

   THIS IS YOUR MAIN CONTROL PANEL.

   Change these values and the entire site changes with them.
   ============================================================ */

/* ============================================================
   CUSTOM FONTS
   ============================================================ */

@font-face {
    font-family: "Shortcake Strawberry";
    src: url("fonts/Shortcake-Strawberry/Shortcake Strawberry.otf")
         format("opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Shortcake Strawberry Script";
    src: url("fonts/Shortcake-Strawberry/Shortcake Strawberry Script.otf")
         format("opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {

    /* ---------------------------------------------------------
       COLORS
       --------------------------------------------------------- */

    --bg1: #f4f0eb;
    /* Main warm cream */

    --bg2: #692d3d;
    /* Deep wine / burgundy */

    --bg3: #242220;
    /* Soft black / charcoal */

    --bg4: #d8cec5;
    /* Warm dusty neutral */


    --text1: #292623;
    /* Main text */

    --text2: #692d3d;
    /* Accent text */

    --text-light: #faf8f5;
    /* Text on dark backgrounds */

    --text-muted: #746c66;
    /* Secondary text */


    --border: #d3c9c1;
    /* Standard borders */

    --border-dark: rgba(255, 255, 255, 0.16);


    /* ---------------------------------------------------------
       CARD COLORS

       These let you change individual card types separately.
       --------------------------------------------------------- */

    --resource-card: #eee5de;

    --idea-card: #ded3c9;

    --tool-card: #e7ddd5;


/* ---------------------------------------------------------
   FONTS
   --------------------------------------------------------- */

--font-main:
    "Shortcake Strawberry",
    Arial,
    Helvetica,
    sans-serif;

--font-accent:
    "Shortcake Strawberry Script",
    cursive;
    
    /* ---------------------------------------------------------
       LAYOUT
       --------------------------------------------------------- */

    --max-width: 1250px;

    --page-padding: 5vw;

    --section-padding: 100px;


    /* ---------------------------------------------------------
       CORNERS

       Change this ONE number to make the site more or less round.

       0px  = completely square
       8px  = subtle
       18px = current
       30px = very rounded
       --------------------------------------------------------- */

    --radius: 18px;

    --radius-small: 10px;


    /* ---------------------------------------------------------
       SHADOWS
       --------------------------------------------------------- */

    --shadow:
        0 15px 40px rgba(42, 35, 31, 0.08);

    --shadow-hover:
        0 20px 50px rgba(42, 35, 31, 0.14);


    /* ---------------------------------------------------------
       ANIMATION
       --------------------------------------------------------- */

    --transition: 0.25s ease;

}


/* ============================================================
   02. EASY HTML COLOR CLASSES

   These are the classes you can swap directly in index.php.

   Example:

   <section class="bg2">

   becomes:

   <section class="bg3">

   ============================================================ */

.bg1 {
    background: var(--bg1);
}

.bg2 {
    background: var(--bg2);
}

.bg3 {
    background: var(--bg3);
}

.bg4 {
    background: var(--bg4);
}

.text1 {
    color: var(--text1);
}

.text2 {
    color: var(--text2);
}

.text-light {
    color: var(--text-light);
}

.text-muted {
    color: var(--text-muted);
}


/* ============================================================
   03. BASIC RESET
   ============================================================ */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    margin: 0;

    background: var(--bg1);

    color: var(--text1);

    font-family: var(--font-main);

    font-size: 16px;

    line-height: 1.6;

    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

p {
    margin-top: 0;
}

button,
input,
textarea,
select {
    font: inherit;
}

::selection {
    background: var(--bg2);
    color: var(--text-light);
}


/* ============================================================
   04. TYPOGRAPHY
   ============================================================ */

h1,
h2,
h3 {
    margin-top: 0;

    line-height: 1.1;
}

h1,
h2 {
    letter-spacing: -0.035em;
}

h1 {
    font-size: clamp(3.2rem, 6vw, 5.8rem);
}

h2 {
    font-size: clamp(2.2rem, 4vw, 3.6rem);
}

h3 {
    font-size: 1.6rem;
}

.small-label {

    margin-bottom: 12px;

    color: var(--text2);

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}

.text-light .small-label {
    color: rgba(255, 255, 255, 0.65);
}


/* ============================================================
   05. BUTTONS
   ============================================================ */

.button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 48px;

    padding: 12px 22px;

    border-radius: var(--radius-small);

    font-size: 0.78rem;

    font-weight: 700;

    letter-spacing: 0.04em;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}

.button:hover {
    transform: translateY(-3px);
}

.button-primary {

    background: var(--bg2);

    color: var(--text-light);

    box-shadow: 0 8px 20px rgba(105, 45, 61, 0.15);
}

.button-primary:hover {
    box-shadow: 0 12px 25px rgba(105, 45, 61, 0.24);
}

.button-secondary {

    border: 1px solid var(--border);

    background: transparent;
}

.button-secondary:hover {
    background: rgba(255, 255, 255, 0.4);
}

.button-light {

    background: var(--text-light);

    color: var(--bg2);
}


/* ============================================================
   06. SIMPLE TEXT LINKS
   ============================================================ */

.text-link {

    display: inline-block;

    margin-top: 20px;

    color: var(--text2);

    font-size: 0.76rem;

    font-weight: 800;

    letter-spacing: 0.05em;

    transition:
        transform var(--transition),
        opacity var(--transition);
}

.text-link:hover {

    transform: translateX(5px);

    opacity: 0.7;
}


/* ============================================================
   07. HEADER
   ============================================================ */

.site-header {

    width: 100%;

    min-height: 82px;

    padding:
        18px
        var(--page-padding);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    border-bottom: 1px solid var(--border);
}

.site-logo {

    display: flex;

    flex-direction: column;

    line-height: 1.15;
}

.logo-main {

    font-family: var(--font-accent);

    font-size: 1.45rem;

    font-weight: 700;
}

.logo-sub {

    margin-top: 5px;

    color: var(--text-muted);

    font-size: 0.52rem;

    font-weight: 800;

    letter-spacing: 0.18em;
}

.main-nav {

    display: flex;

    align-items: center;

    gap: clamp(18px, 3vw, 38px);
}

.main-nav a {

    padding: 8px 0;

    font-size: 0.72rem;

    font-weight: 700;

    transition: color var(--transition);
}

.main-nav a:hover {
    color: var(--text2);
}


/* ============================================================
   08. HERO
   ============================================================ */

.hero {

    position: relative;

    padding:
        90px
        var(--page-padding)
        110px;

    overflow: hidden;
}

.hero-inner {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: var(--max-width);

    margin: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(300px, 0.65fr);

    gap: clamp(60px, 8vw, 120px);

    align-items: center;
}

.hero-content {
    max-width: 750px;
}

.hero-content h1 {

    margin-bottom: 30px;

    font-weight: 700;
}

.hero-content h1 span {

    display: block;

    color: var(--text2);

    font-family: var(--font-accent);

    font-weight: 400;

    font-style: italic;
}

.hero-description {

    max-width: 590px;

    margin-bottom: 35px;

    color: var(--text-muted);

    font-size: 1.05rem;

    line-height: 1.8;
}

.hero-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}


/* ============================================================
   09. HERO CARD
   ============================================================ */

.hero-card {

    position: relative;

    min-height: 390px;

    padding: 38px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    transform: rotate(1.5deg);
}

.hero-card h2 {

    margin-bottom: 25px;

    font-family: var(--font-accent);

    font-size: clamp(2.2rem, 3vw, 3.2rem);

    font-weight: 400;
}

.hero-card > p:not(.card-kicker) {

    max-width: 320px;

    color: rgba(255, 255, 255, 0.78);
}

.card-kicker {

    margin-bottom: 20px;

    color: rgba(255, 255, 255, 0.55);

    font-size: 0.58rem;

    font-weight: 800;

    letter-spacing: 0.2em;
}

.tiny-stars {

    margin-top: 35px;

    font-size: 0.8rem;

    opacity: 0.5;
}


/* ============================================================
   10. HERO DECORATIONS
   ============================================================ */

.hero-shape {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.shape-one {

    width: 380px;
    height: 380px;

    left: -180px;
    top: 100px;

    border: 1px solid rgba(105, 45, 61, 0.10);
}

.shape-two {

    width: 180px;
    height: 180px;

    right: 22%;
    bottom: -100px;

    background: rgba(105, 45, 61, 0.04);
}


/* ============================================================
   11. INTRO STRIP
   ============================================================ */

.intro-strip {

    min-height: 70px;

    padding:
        18px
        var(--page-padding);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: clamp(12px, 2vw, 28px);
}

.intro-strip p {

    margin: 0;

    font-size: 0.6rem;

    font-weight: 800;

    letter-spacing: 0.15em;
}

.intro-strip span {

    color: var(--bg4);

    font-size: 0.55rem;
}


/* ============================================================
   12. GENERAL SECTION TITLE
   ============================================================ */

.section-title {

    width: 100%;

    max-width: var(--max-width);

    margin:
        0 auto
        55px;
}

.section-title h2 {
    margin-bottom: 15px;
}

.section-title > p:last-child {

    max-width: 550px;

    color: var(--text-muted);
}

.centered {
    text-align: center;
}

.centered > p:last-child {
    margin-left: auto;
    margin-right: auto;
}


/* ============================================================
   13. START HERE
   ============================================================ */

.start-section {

    padding:
        var(--section-padding)
        var(--page-padding);
}

.start-grid {

    width: 100%;

    max-width: var(--max-width);

    margin: auto;

    display: grid;

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

    gap: 22px;
}

.start-card {

    min-height: 330px;

    padding: 32px;

    display: flex;

    flex-direction: column;

    border: 1px solid rgba(90, 75, 65, 0.08);

    border-radius: var(--radius);

    box-shadow: 0 8px 25px rgba(50, 40, 35, 0.04);

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.start-card:hover {

    transform: translateY(-7px);

    box-shadow: var(--shadow-hover);
}

.resource-card {
    background: var(--resource-card);
}

.idea-card {
    background: var(--idea-card);
}

.tool-card {
    background: var(--tool-card);
}

.card-icon {

    width: 45px;
    height: 45px;

    margin-bottom: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(40, 35, 32, 0.15);

    border-radius: 50%;

    color: var(--text2);

    font-size: 1rem;
}

.start-card h3 {

    margin-bottom: 15px;

    font-family: var(--font-accent);

    font-size: 2rem;
}

.start-card p {

    max-width: 310px;

    margin-bottom: 30px;

    color: var(--text-muted);

    font-size: 0.9rem;
}

.card-link {

    margin-top: auto;

    color: var(--text2);

    font-size: 0.7rem;

    font-weight: 800;
}


/* ============================================================
   14. FEATURED RESOURCE
   ============================================================ */

.featured-section {

    padding:
        var(--section-padding)
        var(--page-padding);
}

.featured-card {

    width: 100%;

    max-width: var(--max-width);

    margin: auto;

    padding: 28px;

    display: grid;

    grid-template-columns:
        minmax(300px, 0.85fr)
        minmax(0, 1.15fr);

    gap: clamp(40px, 7vw, 90px);

    align-items: center;

    border-radius: var(--radius);

    box-shadow: var(--shadow);
}


/* ============================================================
   15. FAKE RESOURCE PREVIEW
   ============================================================ */

.featured-image {

    min-height: 460px;

    padding: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            rgba(105, 45, 61, 0.92),
            rgba(55, 40, 44, 0.95)
        );

    border-radius: calc(var(--radius) - 5px);

    overflow: hidden;
}

.preview-paper {

    width: min(290px, 90%);

    min-height: 350px;

    padding: 32px;

    display: flex;

    flex-direction: column;

    background: #f6f1eb;

    color: var(--text1);

    border-radius: 4px;

    box-shadow:
        8px 12px 0 rgba(255, 255, 255, 0.10),
        18px 22px 40px rgba(0, 0, 0, 0.20);

    transform: rotate(-3deg);
}

.preview-label {

    font-size: 0.55rem;

    font-weight: 800;

    letter-spacing: 0.2em;
}

.preview-paper strong {

    margin: auto 0;

    font-family: var(--font-accent);

    font-size: 3.2rem;

    line-height: 0.9;

    font-weight: 400;
}

.preview-note {

    color: var(--text2);

    font-family: var(--font-accent);

    font-size: 0.9rem;

    font-style: italic;
}


/* ============================================================
   16. FEATURED INFORMATION
   ============================================================ */

.featured-info {

    max-width: 570px;
}

.tags {

    margin-bottom: 22px;

    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}

.tags span {

    padding:
        6px
        9px;

    border: 1px solid var(--border);

    border-radius: 50px;

    color: var(--text-muted);

    font-size: 0.52rem;

    font-weight: 800;

    letter-spacing: 0.08em;
}

.featured-info h3 {

    margin-bottom: 25px;

    font-family: var(--font-accent);

    font-size: clamp(2.5rem, 4vw, 4rem);

    font-weight: 400;
}

.featured-info p {

    max-width: 530px;

    color: var(--text-muted);

    line-height: 1.8;
}


/* ============================================================
   17. RESOURCE CATEGORIES
   ============================================================ */

.categories-section {

    padding:
        var(--section-padding)
        var(--page-padding);
}

.category-grid {

    width: 100%;

    max-width: 950px;

    margin: auto;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 12px;
}

.category-pill {

    padding:
        13px
        20px;

    background: rgba(255, 255, 255, 0.35);

    border: 1px solid var(--border);

    border-radius: 50px;

    font-size: 0.78rem;

    font-weight: 700;

    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition);
}

.category-pill:hover {

    background: var(--bg2);

    color: var(--text-light);

    transform: translateY(-3px);
}

.category-all {

    background: var(--bg3);

    color: var(--text-light);

    border-color: var(--bg3);
}


/* ============================================================
   18. TOOLBOX
   ============================================================ */

.toolbox-section {

    padding:
        var(--section-padding)
        var(--page-padding);
}

.toolbox-heading {

    width: 100%;

    max-width: var(--max-width);

    margin:
        0 auto
        60px;

    display: flex;

    align-items: end;

    justify-content: space-between;

    gap: 60px;
}

.toolbox-heading h2 {
    margin-bottom: 0;
}

.toolbox-intro {

    max-width: 420px;

    margin-bottom: 5px;

    color: rgba(255, 255, 255, 0.65);

    font-size: 0.9rem;
}

.toolbox-grid {

    width: 100%;

    max-width: var(--max-width);

    margin: auto;

    display: grid;

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

    gap: 18px;
}

.toolbox-card {

    min-height: 350px;

    padding: 28px;

    display: flex;

    flex-direction: column;

    background: rgba(255, 255, 255, 0.045);

    border: 1px solid var(--border-dark);

    border-radius: var(--radius);

    transition:
        background var(--transition),
        transform var(--transition);
}

.toolbox-card:hover {

    background: rgba(255, 255, 255, 0.075);

    transform: translateY(-5px);
}

.tool-icon {

    width: 42px;
    height: 42px;

    margin-bottom: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid var(--border-dark);

    border-radius: 50%;

    color: var(--bg4);
}

.status {

    margin-bottom: 10px;

    color: rgba(255, 255, 255, 0.4);

    font-size: 0.52rem;

    font-weight: 800;

    letter-spacing: 0.15em;
}

.toolbox-card h3 {

    margin-bottom: 15px;

    font-family: var(--font-accent);

    font-size: 2rem;

    font-weight: 400;
}

.toolbox-card p {

    max-width: 300px;

    color: rgba(255, 255, 255, 0.6);

    font-size: 0.88rem;
}

.tool-link {

    margin-top: auto;

    color: var(--bg4);

    font-size: 0.68rem;

    font-weight: 800;
}

.toolbox-more {
    background: var(--bg2);
}

.toolbox-more:hover {
    background: var(--bg2);
}


/* ============================================================
   19. TEACHING SECTION
   ============================================================ */

.teaching-section {

    padding:
        var(--section-padding)
        var(--page-padding);
}

.teaching-card {

    width: 100%;

    max-width: var(--max-width);

    margin: auto;

    padding:
        clamp(40px, 6vw, 80px);

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(280px, 0.8fr);

    gap: clamp(50px, 8vw, 100px);

    background: rgba(255, 255, 255, 0.30);

    border: 1px solid var(--border);

    border-radius: var(--radius);
}

.teaching-heading h2 {

    max-width: 680px;

    margin-bottom: 0;

    font-family: var(--font-accent);

    font-weight: 400;

    line-height: 1.2;
}

.teaching-copy {

    padding-top: 30px;
}

.teaching-copy p {

    color: var(--text-muted);

    line-height: 1.8;
}


/* ============================================================
   20. ABOUT
   ============================================================ */

.about-section {

    padding:
        var(--section-padding)
        var(--page-padding);
}

.about-card {

    width: 100%;

    max-width: 1100px;

    margin: auto;

    display: grid;

    grid-template-columns:
        0.8fr
        1.2fr;

    gap: clamp(50px, 8vw, 100px);

    align-items: center;
}

.about-photo {

    display: flex;

    justify-content: center;
}

.photo-placeholder {

    width: 100%;

    max-width: 360px;

    aspect-ratio: 4 / 5;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.28);

    border-radius: var(--radius);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.12),
            rgba(255, 255, 255, 0.03)
        );

    transform: rotate(-2deg);
}

.photo-placeholder span {

    color: rgba(255, 255, 255, 0.35);

    font-size: 0.58rem;

    font-weight: 800;

    letter-spacing: 0.14em;

    text-align: center;
}

.about-content {
    max-width: 520px;
}

.about-content h2 {

    margin-bottom: 10px;

    font-family: var(--font-accent);

    font-size: clamp(3rem, 5vw, 4.8rem);

    font-weight: 400;
}

.about-lead {

    margin-bottom: 28px;

    color: rgba(255, 255, 255, 0.85);

    font-family: var(--font-accent);

    font-size: 1.3rem;

    font-style: italic;
}

.about-content > p:not(.small-label):not(.about-lead) {

    color: rgba(255, 255, 255, 0.7);

    line-height: 1.8;
}


/* ============================================================
   21. ENDING
   ============================================================ */

.ending-section {

    padding:
        120px
        var(--page-padding);

    text-align: center;
}

.ending-stars {

    margin-bottom: 25px;

    color: var(--text2);

    font-size: 0.7rem;

    letter-spacing: 0.8em;
}

.ending-section h2 {

    margin:
        0 auto
        20px;

    max-width: 800px;

    font-size: clamp(2.8rem, 5vw, 5rem);
}

.ending-section h2 span {

    color: var(--text2);

    font-family: var(--font-accent);

    font-style: italic;

    font-weight: 400;
}

.ending-section p {
    color: var(--text-muted);
}


/* ============================================================
   22. FOOTER
   ============================================================ */

.site-footer {

    padding:
        65px
        var(--page-padding)
        30px;
}

.footer-top {

    width: 100%;

    max-width: var(--max-width);

    margin:
        0 auto
        65px;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 50px;
}

.footer-brand {

    display: flex;

    flex-direction: column;
}

.footer-brand strong {

    font-family: var(--font-accent);

    font-size: 1.7rem;

    font-weight: 400;
}

.footer-brand span {

    margin-top: 5px;

    color: rgba(255, 255, 255, 0.4);

    font-size: 0.52rem;

    font-weight: 800;

    letter-spacing: 0.15em;
}

.footer-links {

    display: flex;

    flex-wrap: wrap;

    gap: 30px;
}

.footer-links a {

    font-size: 0.72rem;

    font-weight: 700;

    transition: opacity var(--transition);
}

.footer-links a:hover {
    opacity: 0.5;
}

.footer-bottom {

    width: 100%;

    max-width: var(--max-width);

    margin: auto;

    padding-top: 25px;

    display: flex;

    justify-content: space-between;

    gap: 30px;

    border-top: 1px solid var(--border-dark);

    color: rgba(255, 255, 255, 0.35);

    font-size: 0.52rem;

    font-weight: 700;

    letter-spacing: 0.12em;
}


/* ============================================================
   23. TABLET
   ============================================================ */

@media (max-width: 950px) {

    :root {
        --section-padding: 80px;
    }


    /* HERO */

    .hero-inner {
        grid-template-columns: 1fr;
    }

    .hero-card {

        max-width: 550px;

        min-height: 300px;

        transform: none;
    }


    /* START CARDS */

    .start-grid {

        grid-template-columns: 1fr 1fr;
    }

    .tool-card {
        grid-column: 1 / -1;
    }


    /* FEATURED */

    .featured-card {

        grid-template-columns: 1fr;
    }

    .featured-image {
        min-height: 400px;
    }


    /* TOOLBOX */

    .toolbox-heading {

        align-items: flex-start;

        flex-direction: column;

        gap: 20px;
    }

    .toolbox-grid {

        grid-template-columns: 1fr 1fr;
    }

    .toolbox-more {
        grid-column: 1 / -1;
    }


    /* TEACHING */

    .teaching-card {

        grid-template-columns: 1fr;

        gap: 30px;
    }

    .teaching-copy {
        padding-top: 0;
    }


    /* ABOUT */

    .about-card {
        grid-template-columns: 1fr;
    }

    .about-photo {
        justify-content: flex-start;
    }

}


/* ============================================================
   24. MOBILE
   ============================================================ */

@media (max-width: 650px) {

    :root {

        --page-padding: 22px;

        --section-padding: 65px;

        --radius: 14px;
    }


    /* HEADER */

    .site-header {

        min-height: auto;

        align-items: flex-start;

        padding-top: 20px;
        padding-bottom: 20px;
    }

    .logo-main {
        font-size: 1.15rem;
    }

    .main-nav {

        flex-direction: column;

        align-items: flex-end;

        gap: 4px;
    }

    .main-nav a {

        padding: 2px 0;

        font-size: 0.62rem;
    }


    /* HERO */

    .hero {

        padding-top: 65px;
        padding-bottom: 75px;
    }

    .hero-inner {
        gap: 55px;
    }

    .hero-content h1 {
        font-size: clamp(3.2rem, 15vw, 4.8rem);
    }

    .hero-description {
        font-size: 0.95rem;
    }

    .hero-buttons {

        align-items: stretch;

        flex-direction: column;
    }

    .button {
        width: 100%;
    }

    .hero-card {

        min-height: 320px;

        padding: 30px;
    }


    /* INTRO */

    .intro-strip {

        gap: 10px 14px;
    }

    .intro-strip p {
        font-size: 0.52rem;
    }


    /* START */

    .start-grid {
        grid-template-columns: 1fr;
    }

    .tool-card {
        grid-column: auto;
    }

    .start-card {
        min-height: 290px;
    }

    .card-icon {
        margin-bottom: 35px;
    }


    /* FEATURE */

    .featured-card {
        padding: 16px;
    }

    .featured-image {

        min-height: 360px;

        padding: 30px 15px;
    }

    .preview-paper {
        min-height: 300px;
    }


    /* CATEGORIES */

    .category-grid {

        align-items: stretch;

        flex-direction: column;
    }

    .category-pill {
        text-align: center;
    }


    /* TOOLBOX */

    .toolbox-grid {
        grid-template-columns: 1fr;
    }

    .toolbox-more {
        grid-column: auto;
    }

    .toolbox-card {
        min-height: 300px;
    }


    /* TEACHING */

    .teaching-card {
        padding: 30px;
    }


    /* ABOUT */

    .photo-placeholder {
        max-width: 290px;
    }


    /* ENDING */

    .ending-section {

        padding-top: 90px;
        padding-bottom: 90px;
    }


    /* FOOTER */

    .footer-top {

        flex-direction: column;

        gap: 40px;
    }

    .footer-links {

        flex-direction: column;

        gap: 12px;
    }

    .footer-bottom {

        flex-direction: column;

        gap: 8px;
    }

}