/*

Theme Name: Manario
Theme URI: https://www.manario.it
Author: Matteo Conti
Author URI: https://www.mttconti.com/
Version: 1.0
Text Domain: manario

*/



/* Table of contents
---------------------

01. Variables
02. Global
03. Header
04. Footer
05. Home Page
06. Custom Archive
07. Single

*/



/* 01. Variables
================================================================ */

:root {

    --clr-1: #1F3340;
    --clr-2: #FDFDFD;
    --clr-3: #A8DADC;

    --fnt-fml-1: "Montserrat", sans-serif;
    --fnt-fml-2: "Josefin Sans", sans-serif;

    --fnt-sz-s: 1.2rem;
    --fnt-sz-m: 1.4rem;
    --fnt-sz-l: 4rem;
    --fnt-sz-2xl: 5.25rem;
    --fnt-sz-1xl: 6.5rem;
    --fnt-sz-0xl: min(28rem, 14.8vw);

    --fnt-wg-s: 500;
    --fnt-wg-m: 500;
    --fnt-wg-l: 600;
    --fnt-wg-2xl: 600;
    --fnt-wg-1xl: 500;
    --fnt-wg-0xl: 500;

    --ltt-sp-s: 0.1em;
    --ltt-sp-l: 0.1em;
    --ltt-sp-2xl: -0.05em;
    --ltt-sp-1xl: 0.1em;
    --ltt-sp-0xl: 0.2em;

    --ln-hg-2xl: 1.2;
    --ln-hg-1xl: 1;
    --ln-hg-0xl: 1.1;

    --sz: 4.16666667;

}

@media screen and (min-width: 1024px) and (max-width: 1280px) {

    :root {
    
        --fnt-sz-s: 1.175rem;
        --fnt-sz-m: 1.35rem;
        --fnt-sz-l: 3.5rem;
        --fnt-sz-2xl: 4.75rem;
        --fnt-sz-1xl: 5.5rem;
    
    }

}

@media screen and (min-width: 640px) and (max-width: 1023px) {

    :root {
    
        --fnt-sz-s: 1.15rem;
        --fnt-sz-m: 1.325rem;
        --fnt-sz-l: 3rem;
        --fnt-sz-2xl: 3.75rem;
        --fnt-sz-1xl: 4.5rem;
    
    }

}

@media screen and (max-width: 639px) {

    :root {
    
        --fnt-sz-s: 1.15rem;
        --fnt-sz-m: 1.3rem;
        --fnt-sz-l: 2.5rem;
        --fnt-sz-2xl: 2.75rem;
        --fnt-sz-1xl: 3.5rem;
    
    }

}



/* 02. Global
================================================================ */

* {
    margin: 0;
    padding: 0;
    font-kerning: none;
}

*, *::before, *::after { 
    box-sizing: border-box; 
}

*::selection {
    color: var(--clr-2);
    background: var(--clr-1);
}

html {
    font-size: 62.5%;
}

body {
    color: var(--clr-1);
    background-color: var(--clr-2);
    width: 100%;
    overflow-x: hidden;
    font-family: var(--fnt-fml-1);
    font-size: var(--fnt-sz-m);
    font-weight: var(--fnt-wg-m);
}

h1, h2, h3, h4, h5, h6,
address {
    font: inherit;
}

h1 {
    font-size: var(--fnt-sz-1xl);
    font-weight: var(--fnt-wg-1xl);
    letter-spacing: var(--ltt-sp-1xl);
    line-height: var(--ln-hg-1xl);
}

h2 {
    font-size: var(--fnt-sz-2xl);
    font-weight: var(--fnt-wg-2xl);
    letter-spacing: var(--ltt-sp-2xl);
    line-height: var(--ln-hg-2xl);
}

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

img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.wrapper {
    z-index: 1000;
}

main > section > * {
    opacity: 0;
    transform: translateY(6rem);
}



/* 03. Header
================================================================ */

.header {
    width: 100%;
    max-width: 192rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    left: 50%;
    padding: 2.8rem min(calc(var(--sz) * 1%), 8rem) 0;
    transform: translateX(-50%);
    z-index: 1030;
}

.header .content {
    display: flex;
    align-items: center;
}

.header .content:nth-of-type(1) {
    width: 30%;
}

.header .content:nth-of-type(2) {
    width: 40%;
    display: flex;
    justify-content: center;
}

.header .content:nth-of-type(3) {
    width: 30%;
    display: flex;
    justify-content: flex-end;
}

.header .content:nth-of-type(1) .logo {
    font-weight: var(--fnt-wg-l);
    letter-spacing: var(--ltt-sp-s);
    text-transform: uppercase;
}

.header .content:nth-of-type(3) .off-canvas-button {
    display: flex;
    align-items: center;
    cursor: pointer;
    z-index: 1020;
}

.header .content:nth-of-type(3) .off-canvas-button .label {
    height: 1.4rem;
    margin-right: 1.2rem;
    overflow: hidden;
    font-size: var(--fnt-sz-s);
    font-weight: var(--fnt-wg-s);
    letter-spacing: var(--ltt-sp-s);
    text-transform: uppercase;
    text-align: right;
}


.header .content:nth-of-type(3) .off-canvas-button .label .text {
    height: 1.6rem;
    transform: translateY(-1.6rem);
    font-size: var(--fnt-sz-s);
    font-weight: var(--fnt-wg-s);
    letter-spacing: var(--ltt-sp-s);
    text-transform: uppercase;
}

.header .content:nth-of-type(3) .off-canvas-button .lines .line {
    background-color: var(--clr-1);
    width: 2.0rem;
    height: 0.1rem;
}

.header .content:nth-of-type(3) .off-canvas-button .lines .line:last-of-type {
    margin-top: 0.4rem;
}

.header .content:nth-of-type(3) .off-canvas {
    color: var(--clr-2);
    background-color: var(--clr-1);
    width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    display: none;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100vh);
    z-index: 1010;
}

.header .content:nth-of-type(3) .off-canvas .container {
    width: 100%;
    max-width: 192rem;
    height: 100vh;
    height: 100dvh;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    padding: 6rem min(calc(var(--sz) * 1%), 8rem) 0;
}

.header .content:nth-of-type(3) .off-canvas .container .contacts {
    width: 50%;
    display: flex;
    flex-direction: column;
    margin-top: 1.6rem;
}

.header .content:nth-of-type(3) .off-canvas .container .contacts .label {
    font-size: var(--fnt-sz-s);
    font-weight: var(--fnt-wg-s);
    letter-spacing: var(--ltt-sp-s);
    text-transform: uppercase;
}

.header .content:nth-of-type(3) .off-canvas .container .contacts .address {
    margin-top: 1.6rem;
    display: flex;
    flex-direction: column;
}

.header .content:nth-of-type(3) .off-canvas .container .contacts .address .link {
    display: inline-block;
}

.header .content:nth-of-type(3) .off-canvas .container .contacts .address .link:first-of-type {
    margin-top: 1.6rem;
}

.header .content:nth-of-type(3) .off-canvas .container .nav {
    width: 50%;
    font-size: var(--fnt-sz-2xl);
    font-weight: var(--fnt-wg-2xl);
    letter-spacing: var(--ltt-sp-2xl);
}

.header .content:nth-of-type(3) .off-canvas .container .nav ul li {
    list-style-type: none;
}

.header .content:nth-of-type(3) .off-canvas .container .tagline {
    position: absolute;
    bottom: 2.8rem;
}

.header .content:nth-of-type(3) .off-canvas .container .tagline .text {
    font-size: var(--fnt-sz-s);
    font-weight: var(--fnt-wg-s);
    letter-spacing: var(--ltt-sp-s);
    text-transform: uppercase;
}

@media screen and (max-width: 1023px) {

    .header .content:nth-of-type(1) {
        width: 50%;
    }
    
    .header .content:nth-of-type(3) {
        width: 50%;
    }

    .header .content:nth-of-type(3) .off-canvas .container {
        flex-direction: column-reverse;
        overflow: scroll;
    }
    
    .header .content:nth-of-type(3) .off-canvas .container .contacts {
        width: 100%;
        margin-bottom: 11.2rem;
    }

    .header .content:nth-of-type(3) .off-canvas .container .nav {
        width: 100%;
    }

}

@media screen and (max-width: 639px) {

    .header .content:nth-of-type(2) {
        display: none;
    }
  
    .header .content:nth-of-type(3) .off-canvas .container .tagline {
        display: none;
    }

    .header .content:nth-of-type(3) .off-canvas .container .contacts {
        margin-bottom: 2.8rem;
    }

}



/* 04. Footer
================================================================ */

.footer {
    width: 100%;
    max-width: 192rem;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    padding: 16rem min(calc(var(--sz) * 1%), 8rem) 0;
}

.footer .content:nth-of-type(1) {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.footer .content:nth-of-type(1) .copyright {
    width: 50%;
}

.footer .content:nth-of-type(1) .copyright a {
    margin-top: 0.8rem;
    display: inline-block;
    font-size: var(--fnt-sz-s);
    font-weight: var(--fnt-wg-s);
    letter-spacing: var(--ltt-sp-s);
    text-transform: uppercase;
    text-decoration: underline;
}

.footer .content:nth-of-type(1) .address {
    width: 25%;
    display: flex;
    flex-direction: column;
}

.footer .content:nth-of-type(1) .address .link {
    display: inline-block;
    align-self: flex-start;
}

.footer .content:nth-of-type(1) .address .link:first-of-type {
    margin-top: 1.6rem;
}

.footer .content:nth-of-type(1) .menu {
    width: 25%;
}

.footer .content:nth-of-type(1) .menu .label {
    margin-bottom: 1.6rem;
    font-size: var(--fnt-sz-s);
    font-weight: var(--fnt-wg-s);
    letter-spacing: var(--ltt-sp-s);
    text-transform: uppercase;
}

.footer .content:nth-of-type(1) .menu nav {
    display: inline-block;
}

.footer .content:nth-of-type(1) .menu nav ul li {
    list-style-type: none;
}

.footer .content:nth-of-type(1) .loghi {
    width: 50%;
    margin: 4rem 0 0 50%;
}

.footer .content:nth-of-type(1) .loghi img {
    width: 100%;
    object-fit: contain;
}

.footer .content:nth-of-type(2) {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 8rem;
    overflow: hidden;
    z-index: -1000;
}

.footer .content:nth-of-type(2) .title {
    color: var(--clr-3);
    padding-left: calc(var(--ltt-sp-0xl) / 1.5);
    font-size: var(--fnt-sz-0xl);
    font-weight: var(--fnt-wg-0xl);
    letter-spacing: var(--ltt-sp-0xl);
    line-height: var(--ln-hg-0xl);
    text-transform: uppercase;
}

@media screen and (max-width: 1023px) {

    .footer {
        padding: 12rem min(calc(var(--sz) * 1%), 8rem);
    }
    
    .footer .content:nth-of-type(1) .copyright {
        width: 100%;
        margin-bottom: 3.2rem;
    }
    
    .footer .content:nth-of-type(1) .address {
        width: 60%;
    }

    .footer .content:nth-of-type(1) .menu {
        width: 40%;
    }
    
    .footer .content:nth-of-type(1) .loghi {
        width: 50%;
        margin: 4rem 0 0 0;
    }

    .footer .content:nth-of-type(2) {
        margin-top: 0;
    }
    
    .footer .content:nth-of-type(2) .title {
        display: none;
    }

}

@media screen and (max-width: 639px) {
    
    .footer {
        padding: 8rem min(calc(var(--sz) * 1%), 8rem);
    }
    
    .footer .content:nth-of-type(1) .loghi {
        width: 75%;
        margin: 4rem 0 0 0;
    }

}



/* 05. Home Page
================================================================ */

.home-page .entry {
    width: 100%;
    max-width: 192rem;
    min-height: 100vh;
    position: relative;
    margin: 0 auto;
    /* padding: 0 min(calc(var(--sz) * 1%), 8rem); */
}

.home-page .entry .heading {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 0;
    overflow: hidden;
    z-index: -1000;
}

.home-page .entry .heading .title {
    padding-left: calc(var(--ltt-sp-0xl) / 1.5);
    font-size: var(--fnt-sz-0xl);
    font-weight: var(--fnt-wg-0xl);
    letter-spacing: var(--ltt-sp-0xl);
    line-height: var(--ln-hg-0xl);
    text-transform: uppercase;
}

.home-page .entry .heading .cta {
    position: absolute;
    bottom: 1.8rem;
    font-size: var(--fnt-sz-s);
    font-weight: var(--fnt-wg-s);
    letter-spacing: var(--ltt-sp-s);
    text-transform: uppercase;
}

.home-page .entry .cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-bottom: 100vh;
}

.home-page .entry .cards .col {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.home-page .entry .cards .col:first-of-type {
    margin-top: min(48rem, calc(var(--sz) * 6vw));
}

.home.page .entry .cards .col .card {
    background-color: var(--clr-3);
    width: calc(var(--sz) * 14%);
    aspect-ratio: 1/1.3;
    position: relative;
    border-radius: 3.2rem;
    overflow: hidden;
}

.home.page .entry .cards .col .card:not(:first-of-type) {
    margin-top: 24rem;
}

.home.page .entry .cards .col .card .picture {
    width: 100%;
    height: 100%;
    position: relative;
}

.home.page .entry .cards .col .card .picture .overlay {
    background-color: var(--clr-3);
    opacity: 0.2;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.home-page .about {
    background-color: var(--clr-3);
}

.home-page .about .container {
    width: 100%;
    max-width: 192rem;
    margin: 0 auto;
    padding: 16rem min(calc(var(--sz) * 1%), 8rem) 0;
}


.home-page .about .container .heading {
    width: calc(var(--sz) * 22%);
    margin: 0 auto;
}

.home-page .about .container .heading .title {
    padding-left: calc(var(--ltt-sp-1xl) / 1.5);
    font-size: var(--fnt-sz-1xl);
    font-weight: var(--fnt-wg-1xl);
    letter-spacing: var(--ltt-sp-1xl);
    line-height: var(--ln-hg-1xl);
    text-transform: uppercase;
    /* text-wrap: balance; */
    text-align: center;
}

.home-page .about .container .content {
    display: flex;
    justify-content: space-around;
    margin-top: 16rem;
}

.home-page .about .container .content .col {
    width: 50%;
}

.home-page .about .container .content .col:first-of-type {
    padding-left: calc(var(--sz) * 2.5%);
}

.home-page .about .container .content .col:first-of-type .info {
    position: sticky;
    top: 16rem;
}

.home-page .about .container .content .col:first-of-type .info .label {
    font-size: var(--fnt-sz-s);
    font-weight: var(--fnt-wg-s);
    letter-spacing: var(--ltt-sp-s);
    text-transform: uppercase;
}

.home-page .about .container .content .col:first-of-type .info .list {
    margin-top: 1.6rem;
    list-style-position: inside;
}

.home-page .about .container .content .col:first-of-type .info .list .item .link {
    text-decoration: underline;
}

.home-page .about .container .content .col:last-of-type .text {
    width: calc(var(--sz) * 19%);
}

.home-page .about .container .content .col:last-of-type .text:not(:first-of-type) {
    margin-top: 1.6rem;
}

.home-page .exit {
    background-color: var(--clr-3);
}

.home-page .exit .container {
    width: 100%;
    max-width: 192rem;
    margin: 0 auto;
    /* padding: 16rem min(calc(var(--sz) * 1%), 8rem); */
    padding: 0 0 16rem;
}

.home-page .exit .container .heading {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: 16rem 0 8rem;
}

.home-page .exit .container .heading .title {
    font-size: var(--fnt-sz-0xl);
    font-weight: var(--fnt-wg-0xl);
    letter-spacing: var(--ltt-sp-0xl);
    line-height: var(--ln-hg-0xl);
    text-transform: uppercase;
    transform: scale(1.2);
}

.home-page .exit .container .heading .title span {
    display: block;
    padding-left: calc(var(--ltt-sp-0xl) / 1.5);
    text-align: center;
}

.home-page .exit .container .content {
    width: calc(var(--sz) * 14%);
    margin: 16rem auto 0;
    text-align: center;
}

/* .home-page .exit .container .content .text {
    text-wrap: balance;
} */

.home-page .exit .container .content .text:not(:first-of-type) {
    margin-top: 1.6rem;
}

@media screen and (max-width: 1023px) {

    .home.page .entry .cards .col .card {
        width: calc(var(--sz) * 18%);
    }
    
    .home.page .entry .cards .col .card:not(:first-of-type) {
        margin-top: 14rem;
    }

    .home-page .about .container {
        padding: 12rem min(calc(var(--sz) * 1%), 8rem) 0;
    }

    .home-page .about .container .heading {
        width: 100%;
    }

    .home-page .about .container .content {
        flex-direction: column-reverse;
        margin-top: 12rem;
    }
    
    .home-page .about .container .content .col {
        width: 100%;
    }
    
    .home-page .about .container .content .col:first-of-type {
        padding-left: 0;
    }
    
    .home-page .about .container .content .col:first-of-type .info {
        width: calc(var(--sz) * 18%);
        margin: 8rem auto 0;
    }

    .home-page .about .container .content .col:last-of-type .text {
        width: calc(var(--sz) * 18%);
        margin: 0 auto;
    }

    .home-page .exit .container {
        /* padding: 12rem min(calc(var(--sz) * 1%), 8rem); */
        padding: 0 0 12rem
    }

    .home-page .exit .container .heading {
        padding: 12rem 0 6rem;
    }

    .home-page .exit .container .content {
        width: calc(var(--sz) * 20%);
        margin: 12rem auto 0;
    }

}

@media screen and (max-width: 639px) {
    
    .home-page .entry .cards .col {
        width: 100%;
    }
    
    .home.page .entry .cards .col .card {
        width: calc(var(--sz) * 18%);
    }
    
    .home.page .entry .cards .col .card {
        margin-top: 10rem;
    }

    .home.page .entry .cards .col .card:not(:first-of-type) {
        margin-top: 10rem;
    }

    .home-page .about .container {
        padding: 8rem min(calc(var(--sz) * 1%), 8rem) 0;
    }

    .home-page .about .container .content {
        margin-top: 8rem;
    }

    .home-page .exit .container {
        /* padding: 8rem min(calc(var(--sz) * 1%), 8rem); */
        padding: 0 0 8rem;
    }

    .home-page .exit .container .heading {
        padding: 8rem 0 4rem;
    }

    .home-page .exit .container .content {
        margin: 8rem auto 0;
    }

    .home-page .about .container .content .col:first-of-type .info {
        width: calc(var(--sz) * 20%);
    }

    .home-page .about .container .content .col:last-of-type .text {
        width: calc(var(--sz) * 20%);
    }

    .home-page .exit .container .content {
        width: calc(var(--sz) * 22%);
    }

}



/* 06. Custom Archive
================================================================ */

.custom-archive .entry {
    width: 100%;
    max-width: 192rem;
    min-height: 100vh;
    position: relative;
    margin: 0 auto;
    padding: 16rem min(calc(var(--sz) * 1%), 8rem) 0;
}

.custom-archive .entry .heading {
    width: 100%;
}

.custom-archive .entry .heading .title {
    width: calc(var(--sz) * 20%);
    margin: 0 auto;
    padding-left: calc(var(--ltt-sp-1xl) / 1.5);
    font-size: var(--fnt-sz-1xl);
    font-weight: var(--fnt-wg-1xl);
    letter-spacing: var(--ltt-sp-1xl);
    text-transform: uppercase;
    text-wrap: balance;
    text-align: center;
}

.custom-archive .entry .heading .text {
    width: calc(var(--sz) * 12%);
    margin: 4rem auto 0;
    text-align: center;
}

.custom-archive .entry .picture {
    width: 100%;
    aspect-ratio: 1/0.5;
    position: relative;
    margin-top: 16rem;
    border-radius: 3.2rem;
    overflow: hidden;
}

.custom-archive .entry .picture .overlay {
    background-color: var(--clr-3);
    opacity: 0.2;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.custom-archive .description .container {
    width: 100%;
    max-width: 192rem;
    margin: 0 auto;
    padding: 16rem min(calc(var(--sz) * 1%), 8rem) 0;
}

.custom-archive .description .container .content {
    display: flex;
    justify-content: space-around;
}

.custom-archive .description .container .content .col {
    width: 50%;
}

.custom-archive .description .container .content .col:first-of-type {
    padding-left: calc(var(--sz) * 2.5%);
}

.custom-archive .description .container .content .col:first-of-type .info {
    position: sticky;
    top: 16rem;
}

.custom-archive .description .container .content .col:first-of-type .info .label {
    font-size: var(--fnt-sz-s);
    font-weight: var(--fnt-wg-s);
    letter-spacing: var(--ltt-sp-s);
    text-transform: uppercase;
}

.custom-archive .description .container .content .col:first-of-type .info .address {
    display: flex;
    flex-direction: column;
    margin-top: 1.6rem;
}

.custom-archive .description .container .content .col:first-of-type .info .address .link {
    display: inline-block;
    align-self: flex-start;
}

.custom-archive .description .container .content .col:first-of-type .info .address .link:first-of-type {
    margin-top: 1.6rem;
}

.custom-archive .description .container .content .col:first-of-type .info .address .cta {
    display: inline-block;
    align-self: flex-start;
    margin-top: 1.6rem;
    padding: 1.6rem 3.2rem;
    border: 0.1rem solid var(--clr-1);
    border-radius: 0.8rem;
    cursor: pointer;
    font-size: var(--fnt-sz-s);
    font-weight: var(--fnt-wg-s);
    letter-spacing: var(--ltt-sp-s);
    text-transform: uppercase;
}

.custom-archive .description .container .content .col:last-of-type .text {
    width: calc(var(--sz) * 19%);
}

.custom-archive .description .container .content .col:last-of-type .text:not(:first-of-type) {
    margin-top: 1.6rem;
}

.custom-archive .loop {
    width: 100%;
    max-width: 192rem;
    margin: 0 auto;
    padding: 16rem min(calc(var(--sz) * 1%), 8rem);
}

.custom-archive .loop .heading {
    width: 100%;
    text-align: center;
}

.custom-archive .loop .heading .title {
    width: calc(var(--sz) * 20%);
    margin: 0 auto 16rem;
    padding-left: calc(var(--ltt-sp-1xl) / 1.5);
    font-size: var(--fnt-sz-1xl);
    font-weight: var(--fnt-wg-1xl);
    letter-spacing: var(--ltt-sp-1xl);
    text-transform: uppercase;
    text-wrap: balance;
    text-align: center;
}

.custom-archive .loop .content {
    display: flex;
    flex-wrap: wrap;
    margin-top: 4rem;
    padding-bottom: 4rem;
    border-bottom: 0.1rem solid var(--clr-1);
}

.custom-archive .loop .content .col {
    width: 50%;
}

.custom-archive .loop .content .col:first-of-type {
    padding-left: calc(var(--sz) * 2.5%);
}

.custom-archive .loop .content .col:first-of-type .date {
    margin-top: 1.6rem;
    font-size: var(--fnt-sz-s);
    font-weight: var(--fnt-wg-s);
    letter-spacing: var(--ltt-sp-s);
    text-transform: uppercase;
}

.custom-archive .loop .content .col:last-of-type .link {
    width: calc(var(--sz) * 19%);
    display: inline-block;
    font-size: var(--fnt-sz-l);
    font-weight: var(--fnt-wg-l);
    letter-spacing: var(--ltt-sp-2xl);
}

.custom-archive .loop .content .col:last-of-type .excerpt {
    width: calc(var(--sz) * 19%);
    display: block;
    margin-top: 1.6rem;
}

.custom-archive .loop .content .col:last-of-type .cta {
    display: inline-block;
    margin-top: 1.6rem;
    font-size: var(--fnt-sz-s);
    font-weight: var(--fnt-wg-s);
    letter-spacing: var(--ltt-sp-s);
    text-transform: uppercase;
    text-decoration: underline;
}

.custom-archive .loop .pagination {
    margin-top: 4rem;
    padding-left: 50%;
}

.custom-archive .loop .pagination .more .cta {
    display: inline-block;
    padding: 1.6rem 3.2rem;
    border: 0.1rem solid var(--clr-1);
    border-radius: 0.8rem;
    cursor: pointer;
    font-size: var(--fnt-sz-s);
    font-weight: var(--fnt-wg-s);
    letter-spacing: var(--ltt-sp-s);
    text-transform: uppercase;
}

@media screen and (max-width: 1023px) {

    .custom-archive .entry {
        padding: 12rem min(calc(var(--sz) * 1%), 8rem) 0;
    }

    .custom-archive .entry .heading .title {
        width: 100%;
    }
    
    .custom-archive .entry .heading .text {
        width: calc(var(--sz) * 22%);
        margin: 4rem auto 0;
        text-align: center;
    }

    .custom-archive .entry .picture {
        aspect-ratio: 1/0.9;
        margin-top: 12rem;
    }

    .custom-archive .description .container {
        padding: 12rem min(calc(var(--sz) * 1%), 8rem);
    }

    .custom-archive .description .container .content {
        flex-direction: column-reverse;
        margin-top: 0;
    }
    
    .custom-archive .description .container .content .col {
        width: 100%;
    }
    
    .custom-archive .description .container .content .col:first-of-type {
        padding-left: 0;
    }
    
    .custom-archive .description .container .content .col:first-of-type .info {
        width: calc(var(--sz) * 18%);
        margin: 8rem auto 0;
    }
    
    .custom-archive .description .container .content .col:last-of-type .text {
        width: calc(var(--sz) * 18%);
        margin: 0 auto;
    }

    .custom-archive .loop {
        padding: 0 min(calc(var(--sz) * 1%), 8rem) 12rem;
    }

    .custom-archive .loop .heading .title {
        width: 100%;
        margin: 0 auto 12rem;
    }

    .custom-archive .loop .content {
        width: calc(var(--sz) * 18%);
        margin: 0 auto;
    }

    .custom-archive .loop .content .col {
        width: 100%;
    }
    
    .custom-archive .loop .content .col:first-of-type {
        margin-bottom: 1.6rem;
        padding-left: 0;
    }

    .custom-archive .loop .content .col:last-of-type .link {
        width: 100%;
    }
    
    .custom-archive .loop .content .col:last-of-type .excerpt {
        width: 100%;
    }

    .custom-archive .loop .pagination {
        width: calc(var(--sz) * 18%);
        margin: 4rem auto 0;
        padding-left: 0;
    }
    
}

@media screen and (max-width: 639px) {

    .custom-archive .entry {
        padding: 12rem min(calc(var(--sz) * 1%), 8rem) 0;
    }

    .custom-archive .entry .picture {
        aspect-ratio: 1/1.3;
        margin-top: 8rem;
    }

    .custom-archive .description .container {
        padding: 8rem min(calc(var(--sz) * 1%), 8rem);
    }

    .custom-archive .description .container .content {
        margin-top: 0;
    }

    .custom-archive .description .container .content .col:first-of-type .info {
        width: calc(var(--sz) * 20%);
    }
    
    .custom-archive .description .container .content .col:last-of-type .text {
        width: calc(var(--sz) * 20%);
    }

    .custom-archive .loop {
        padding: 0 min(calc(var(--sz) * 1%), 8rem) 8rem;
    }

    .custom-archive .loop .content {
        width: calc(var(--sz) * 20%);
    }

    .custom-archive .loop .heading .title {
        margin: 0 auto 8rem;
    }

    .custom-archive .loop .pagination {
        width: calc(var(--sz) * 20%);
    }


}



/* 07. Single
================================================================ */

.single .article {
    width: 100%;
    max-width: 192rem;
    min-height: 100vh;
    position: relative;
    margin: 0 auto;
    padding: 16rem min(calc(var(--sz) * 1%), 8rem) 0;
}

.single .article .heading {
    width: 100%;
    text-align: center;
}

.single .article .heading .title {
    width: calc(var(--sz) * 20%);
    margin: 0 auto;
    padding-left: calc(var(--ltt-sp-1xl) / 1.5);
    font-size: var(--fnt-sz-1xl);
    font-weight: var(--fnt-wg-1xl);
    letter-spacing: var(--ltt-sp-1xl);
    text-transform: uppercase;
    text-wrap: balance;
    text-align: center;
}

.single .article .heading .date {
    margin-top: 1.6rem;
    font-size: var(--fnt-sz-s);
    font-weight: var(--fnt-wg-s);
    letter-spacing: var(--ltt-sp-s);
    text-transform: uppercase;
}

.single .article .picture {
    width: 100%;
    aspect-ratio: 1/0.5;
    position: relative;
    margin-top: 16rem;
    border-radius: 3.2rem;
    overflow: hidden;
}

.single .article .picture .overlay {
    background-color: var(--clr-3);
    opacity: 0.2;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.single .article .content {
    width: calc(var(--sz) * 18%);
    margin: 16rem auto 0;
}

.single .article .content * {
    margin: 1.6rem 0;
}

.single .article .content ul li {
    margin: 1.6rem 1.6rem;
}

.pdf-button a {
    background-color: var(--clr-3);
    display: block;
    padding: 1.6rem 3.2rem;
    font-size: var(--fnt-sz-s);
    font-weight: var(--fnt-wg-s);
    letter-spacing: var(--ltt-sp-s);
    text-transform: uppercase;
}

.pdf-button a:hover {
    opacity: 0.6;
}

@media screen and (max-width: 1023px) {

    .single .article {
        padding: 12rem min(calc(var(--sz) * 1%), 8rem);
    }

    .single .article .heading .title {
        width: calc(var(--sz) * 20%);
    }

    .single .article .picture {
        aspect-ratio: 1/0.9;
        margin-top: 12rem;
    }

    .single .article .content {
        margin: 12rem auto 0;
    }
    
}

@media screen and (max-width: 639px) {

    .single .article {
        padding: 8rem min(calc(var(--sz) * 1%), 8rem);
    }

    .single .article .heading .title {
        width: calc(var(--sz) * 22%);
    }

    .single .article .picture {
        aspect-ratio: 1/1.3;
        margin-top: 8rem;
    }

    .single .article .content {
        width: calc(var(--sz) * 20%);
        margin: 8rem auto 0;
    }

}



/* 08. Index
================================================================ */

.index .article {
    width: 100%;
    max-width: 192rem;
    min-height: 100vh;
    position: relative;
    margin: 0 auto;
    padding: 16rem min(calc(var(--sz) * 1%), 8rem) 0;
}

.index .article .heading {
    width: 100%;
    text-align: center;
}

.index .article .heading .title {
    width: calc(var(--sz) * 20%);
    margin: 0 auto;
    padding-left: calc(var(--ltt-sp-1xl) / 1.5);
    font-size: var(--fnt-sz-1xl);
    font-weight: var(--fnt-wg-1xl);
    letter-spacing: var(--ltt-sp-1xl);
    text-transform: uppercase;
    text-wrap: balance;
    text-align: center;
}

.index .article .heading .date {
    margin-top: 1.6rem;
    font-size: var(--fnt-sz-s);
    font-weight: var(--fnt-wg-s);
    letter-spacing: var(--ltt-sp-s);
    text-transform: uppercase;
}

.index .article .picture {
    width: 100%;
    aspect-ratio: 1/0.5;
    position: relative;
    margin-top: 16rem;
    border-radius: 3.2rem;
    overflow: hidden;
}

.index .article .picture .overlay {
    background-color: var(--clr-3);
    opacity: 0.2;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.index .article .content {
    width: calc(var(--sz) * 18%);
    margin: 16rem auto 0;
}

.index .article .content * {
    margin: 1.6rem 0;
}

.index .article .content ul li {
    margin: 1.6rem 1.6rem;
}

@media screen and (max-width: 1023px) {

    .index .article {
        padding: 12rem min(calc(var(--sz) * 1%), 8rem);
    }

    .index .article .heading .title {
        width: calc(var(--sz) * 20%);
    }

    .index .article .picture {
        aspect-ratio: 1/0.9;
        margin-top: 12rem;
    }

    .index .article .content {
        margin: 12rem auto 0;
    }
    
}

@media screen and (max-width: 639px) {

    .index .article {
        padding: 8rem min(calc(var(--sz) * 1%), 8rem);
    }

    .index .article .heading .title {
        width: calc(var(--sz) * 22%);
    }

    .index .article .picture {
        aspect-ratio: 1/1.3;
        margin-top: 8rem;
    }

    .index .article .content {
        width: calc(var(--sz) * 20%);
        margin: 8rem auto 0;
    }

}



/* 09. Contatti
================================================================ */

.contacts .entry {
    width: 100%;
    max-width: 192rem;
    position: relative;
    margin: 0 auto;
    padding: 16rem min(calc(var(--sz) * 1%), 8rem) 0;
}

.contacts .entry .heading {
    width: 100%;
}

.contacts .entry .heading .title {
    width: calc(var(--sz) * 20%);
    margin: 0 auto;
    padding-left: calc(var(--ltt-sp-1xl) / 1.5);
    font-size: var(--fnt-sz-1xl);
    font-weight: var(--fnt-wg-1xl);
    letter-spacing: var(--ltt-sp-1xl);
    text-transform: uppercase;
    text-wrap: balance;
    text-align: center;
}

.contacts .description .container {
    width: 100%;
    max-width: 192rem;
    margin: 0 auto;
    padding: 16rem min(calc(var(--sz) * 1%), 8rem) 0;
}

.contacts .description .container .content {
    display: flex;
    justify-content: space-around;
}

.contacts .description .container .content .col {
    width: 50%;
}

.contacts .description .container .content .col:first-of-type {
    padding-left: calc(var(--sz) * 2.5%);
}

.contacts .description .container .content .col:first-of-type .info {
    position: sticky;
    top: 16rem;
}

.contacts .description .container .content .col:first-of-type .info .label {
    font-size: var(--fnt-sz-s);
    font-weight: var(--fnt-wg-s);
    letter-spacing: var(--ltt-sp-s);
    text-transform: uppercase;
}

.contacts .description .container .content .col:first-of-type .info .label:nth-of-type(2) {
    margin-top: 3.2rem;
}

.contacts .description .container .content .col:first-of-type .info .address {
    display: flex;
    flex-direction: column;
    margin-top: 1.6rem;
}

.contacts .description .container .content .col:first-of-type .info .address .link {
    display: inline-block;
    align-self: flex-start;
}

.contacts .description .container .content .col:first-of-type .info .address .link:first-of-type {
    margin-top: 1.6rem;
}

.contacts .description .container .content .col:first-of-type .info .address .cta {
    display: inline-block;
    align-self: flex-start;
    margin-top: 1.6rem;
    padding: 1.6rem 3.2rem;
    border: 0.1rem solid var(--clr-1);
    border-radius: 0.8rem;
    cursor: pointer;
    font-size: var(--fnt-sz-s);
    font-weight: var(--fnt-wg-s);
    letter-spacing: var(--ltt-sp-s);
    text-transform: uppercase;
}

.contacts .description .container .content .col:last-of-type .text {
    width: calc(var(--sz) * 19%);
    margin-bottom: 1.6rem;
    font-weight: var(--fnt-wg-l);
}

.contacts .description .container .content .col:last-of-type .text:not(:first-of-type) {
    margin-top: 3.2rem;
}

.contacts .description .container .content .col:last-of-type .link {
    display: block;
}

@media screen and (max-width: 1023px) {

    .contacts .entry {
        padding: 12rem min(calc(var(--sz) * 1%), 8rem) 0;
    }

    .contacts .entry .heading .title {
        width: 100%;
    }

    .contacts .description .container {
        padding: 12rem min(calc(var(--sz) * 1%), 8rem);
    }

    .contacts .description .container .content {
        flex-direction: column-reverse;
        margin-top: 0;
    }
    
    .contacts .description .container .content .col {
        width: 100%;
    }
    
    .contacts .description .container .content .col:first-of-type {
        padding-left: 0;
    }
    
    .contacts .description .container .content .col:first-of-type .info {
        width: calc(var(--sz) * 18%);
        margin: 8rem auto 0;
    }
    
    .contacts .description .container .content .col:last-of-type .text {
        width: calc(var(--sz) * 18%);
        margin: 0 auto 1.6rem;
    }

    .contacts .description .container .content .col:last-of-type .text:not(:first-of-type) {
        margin: 3.2rem auto 1.6rem;
    }

    .contacts .description .container .content .col:last-of-type .link {
        width: calc(var(--sz) * 18%);
        margin: 0 auto;
    }
    
}

@media screen and (max-width: 639px) {

    .contacts .entry {
        padding: 12rem min(calc(var(--sz) * 1%), 8rem) 0;
    }

    .contacts .description .container {
        padding: 8rem min(calc(var(--sz) * 1%), 8rem);
    }

    .contacts .description .container .content {
        margin-top: 0;
    }

    .contacts .description .container .content .col:first-of-type .info {
        width: calc(var(--sz) * 20%);
    }
    
    .contacts .description .container .content .col:last-of-type .text,
    .contacts .description .container .content .col:last-of-type .link {
        width: calc(var(--sz) * 20%);
    }

}