/* ==========================================================
   THE SALTY FLY
   LAYOUT
   Version 1.0
   ========================================================== */


/* ==========================================================
   GLOBAL
   ========================================================== */

html{

    scroll-behavior:smooth;

}

body{

    min-height:100vh;

    overflow-x:hidden;

}


/* ==========================================================
   CONTAINER
   ========================================================== */

.container{

    width:min(var(--content-width),92vw);

    margin-inline:auto;

}

.container-wide{

    width:min(var(--content-wide),96vw);

    margin-inline:auto;

}

.container-text{

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

}


/* ==========================================================
   MAIN
   ========================================================== */

main{

    display:block;

}


/* ==========================================================
   SECTIONS
   ========================================================== */

section{

    position:relative;

}

.section{

    padding-top:120px;

    padding-bottom:120px;

}

.section-sm{

    padding-top:var(--space-xl);

    padding-bottom:var(--space-xl);

}

.section-lg{

    padding-top:220px;

    padding-bottom:220px;

}


/* ==========================================================
   GRID
   ========================================================== */

.grid{

    display:grid;

    gap:var(--space-l);

}

.grid-2{

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

}

.grid-3{

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

}

.grid-4{

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

}


/* ==========================================================
   FLEX
   ========================================================== */

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    align-items:center;

}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}


/* ==========================================================
   SPACING UTILITIES
   ========================================================== */

.mt-xs{margin-top:var(--space-xs);}
.mt-s{margin-top:var(--space-s);}
.mt-m{margin-top:var(--space-m);}
.mt-l{margin-top:var(--space-l);}
.mt-xl{margin-top:var(--space-xl);}
.mt-xxl{margin-top:var(--space-xxl);}

.mb-xs{margin-bottom:var(--space-xs);}
.mb-s{margin-bottom:var(--space-s);}
.mb-m{margin-bottom:var(--space-m);}
.mb-l{margin-bottom:var(--space-l);}
.mb-xl{margin-bottom:var(--space-xl);}
.mb-xxl{margin-bottom:var(--space-xxl);}


/* ==========================================================
   WIDTH
   ========================================================== */

.w-100{

    width:100%;

}

.h-100{

    height:100%;

}


/* ==========================================================
   IMAGE
   ========================================================== */

img{

    display:block;

    width:100%;

    height:auto;

}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width:1100px){

    .grid-4{

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

    }

}


@media (max-width:900px){

    .grid-2,
    .grid-3{

        grid-template-columns:1fr;

    }

    .section{

        padding-top:120px;

        padding-bottom:120px;

    }

}


@media (max-width:640px){

    .grid-4{

        grid-template-columns:1fr;

    }

    .container{

        width:92vw;

    }

    .section{

        padding-top:96px;

        padding-bottom:96px;

    }

}
 .footer-inner{

        flex-direction:column;

        align-items:flex-start;

        gap:20px;

    }

    .footer-nav{

        gap:24px;

    }
@media (max-width:700px){

    .art-gallery-categories{

        gap:96px;

    }

    .art-grid{

        grid-template-columns:1fr;

        gap:56px;

    }

}

@media (max-width:700px){

    .artwork{

        padding-top:96px;
        padding-bottom:72px;

    }

    .artwork-image{

        margin-bottom:64px;

    }

    .artwork-meta-item{

        grid-template-columns:1fr;

        gap:4px;

        padding:12px 0;

    }

}
.artwork-image--portrait img{

    width:100%;
    max-height:none;

}

@media (max-width:900px){

    .travel-concept-grid{

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

    }

}

@media (max-width:600px){

    .travel-concept-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   COMMERCE
========================================================== */

.selection-item{

    display:grid;

    grid-template-columns:180px 1fr;

    column-gap:56px;

    align-items:start;

    padding:56px 0;

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

}
selection-image{

    margin:0;

}

.selection-image img{

    width:180px;

    height:auto;

    display:block;

}

.selection-content{

    max-width:620px;

}

.selection-content h2{

    margin:0 0 18px;

}

.selection-actions{

    display:flex;

    align-items:center;

    gap:48px;

    margin-top:42px;

}

selection-quantity{

    display:flex;

    align-items:center;

    gap:18px;

}

.selection-quantity a{

    text-decoration:none;

}

.selection-quantity span{

    min-width:20px;

    text-align:center;
}

.selection-price{
    margin:0 0 10px;
}

.selection-category{
    margin:0 0 10px;
}

.selection-description{
    margin:0;
}

.selection-actions{
    margin-top:20px;
}