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

 PROJECT     : SIGNATURE SPREADS AND TREATS BY DI
 VERSION     : 1.0.0
 AUTHOR      : JB

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

/* SMALL LAPTOPS */

@media (max-width: 1199.98px) {

    .about-page .about-story-layout {
        grid-template-columns:
            minmax(90px, 0.2fr)
            minmax(0, 0.9fr)
            minmax(340px, 0.9fr);
        gap: clamp(2rem, 4vw, 4rem);
    }

    .about-page .about-origin-layout {
        gap: clamp(3rem, 6vw, 5.5rem);
    }
}

/* TABLETS */

@media (max-width: 991.98px) {

    .about-page .site-hero-media img {
        object-position: 70% center;
    }

    .about-page .about-story-layout {
        grid-template-columns:
            120px
            minmax(0, 1fr);
        max-width: 760px;
    }

    .about-page .about-story-portrait {
        grid-column: 1 / -1;
        width: min(100%, 620px);
        margin-inline: auto;
    }

    .about-page .about-story-portrait-frame {
        aspect-ratio: 4 / 5;
    }

    .about-page .about-journey-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 760px;
    }

    .about-page .about-journey-list::before {
        display: none;
    }

    .about-page .about-origin-layout {
        grid-template-columns: 1fr;
        max-width: 760px;
    }

    .about-page .about-origin-visual {
        width: min(100%, 620px);
        margin-inline: auto;
    }

    .about-page .about-origin-content {
        max-width: 680px;
    }
}


/* MOBILE */

@media (max-width: 575.98px) {

    .about-page .site-hero-media img {
        object-position: 72% center;
    }

    .about-page .about-story,
    .about-page .about-journey,
    .about-page .about-origin-detail,
    .about-page .about-note {
        padding:
            var(--space-4xl)
            0;
    }

    .about-page .about-section-header {
        margin-bottom: var(--space-2xl);
    }

    .about-page .about-section-header h2,
    .about-page .about-story-content h2,
    .about-page .about-origin-content h2,
    .about-page .about-note h2 {
        font-size: clamp(2.7rem, 12vw, 3.9rem);
    }

    .about-page .about-story-layout {
        grid-template-columns: 1fr;
        gap: var(--space-3xl);
    }

    .about-page .about-story-year {
        padding-top: 0;
    }

    .about-page .about-story-year strong {
        font-size: 4.5rem;
    }

    .about-page .about-story-portrait {
        grid-column: auto;
    }

    .about-page .about-story-portrait figcaption {
        position: relative;
        right: auto;
        bottom: auto;
        width: calc(100% - 2rem);
        margin:
            -1.5rem
            auto
            0;
    }

    .about-page .about-journey-list {
        grid-template-columns: 1fr;
        gap: 0;
        max-width: 560px;
    }

    .about-page .about-journey-step {
        display: grid;
        grid-template-columns: 50px minmax(0, 1fr);
        align-items: start;
        gap: var(--space-md);
        padding:
            0
            0
            var(--space-xl);

        text-align: left;
    }

    .about-page .about-journey-step:not(:last-child) {
        margin-bottom: var(--space-xl);
        border-bottom: 1px solid rgba(220, 201, 170, 0.65);
    }

    .about-page .about-journey-number {
        width: 50px;
        height: 50px;
        margin: 0;
    }

    .about-page .about-journey-step p {
        max-width: none;
        margin: 0;
    }

    .about-page .about-origin-stamp {
        right: var(--space-md);
        width: 104px;
        height: 104px;
    }

    .about-page .about-note-inner {
        padding-inline: 0;
    }
}

/* SMALL MOBILE */

@media (max-width: 374.98px) {

    .about-page .about-section-header h2,
    .about-page .about-story-content h2,
    .about-page .about-origin-content h2,
    .about-page .about-note h2 {
        font-size: 2.5rem;
    }

    .about-page .about-story-portrait figcaption {
        grid-template-columns: 32px minmax(0, 1fr);
        padding: var(--space-md);
    }

    .about-page .about-story-portrait figcaption > span {
        width: 32px;
        height: 32px;
    }
}