/* Main Configuration */
@layer configuration {
*,*::before,*::after {
    box-sizing      : border-box;
    padding         : 0;
    margin          : 0;
    background      : none;
    text-decoration : none;
    outline         : none;
    font-family     : inherit;
    font-size       : inherit;
    line-height     : inherit;
    font-weight     : inherit;
    color           : inherit;

    /* Disable double tap to zoom */
    touch-action : manipulation;

    /* Fix the antialias when needed */
    -webkit-font-smoothing  : antialiased;
    -moz-osx-font-smoothing : grayscale;
    font-feature-settings   : "onum", "kern", "liga", "clig", "calt";

    /* Global Transitions */
    transition-delay           : 0ms;
    transition-duration        : 150ms;
    transition-property        : none;
    transition-timing-function : ease-out ;
}
}
@layer configuration {
@font-face {
    font-family  : "Forma";
    src          : url('fonts/FormaDJRMicro-Regular.woff2') format('woff2');
    font-weight  : 400;
    font-style   : normal;
    font-display : swap;
}
@font-face {
    font-family  : "FormaDisplay";
    src          : url('fonts/FormaDJRDisplay-Regular.woff2') format('woff2');
    font-weight  : 400;
    font-style   : normal;
    font-display : swap;
}
@font-face {
    font-family  : "FormaDisplay";
    src          : url('fonts/FormaDJRDisplay-Bold.woff2') format('woff2');
    font-weight  : 700;
    font-style   : normal;
    font-display : swap;
}

:root {
    
    /* Colors */
    --background : #000000;
    --text       : #FFFFFF;
    --text-alt   : #3E3B3B;
    --accent     : #E63F13;

    /* Font Settings */
    --f-family : Forma, sans-serif;
    --f-size   : clamp(15px, 0.47vi + 12.67px, 22px);
    --f-height : clamp(18px, 0.53vi + 15.33px, 26px);
    --f-weight : 400;

    /* Typography Styles 500 -> 2000 */
    --text-small   : 400 clamp(13px, 0.33vi + 11.33px, 18px) / 1.2 "Forma", sans;
    --text-base    : 400 clamp(15px, 0.47vi + 12.67px, 22px) / 1.2 "Forma", sans;
    --title-small  : 400 clamp(19px, 1.13vi + 13.33px, 36px) / 1.15 "FormaDisplay", sans;
    --title-medium : 400 clamp(24px, 2.00vi + 14.00px, 54px) / 1.15 "FormaDisplay", sans;
    --title-large  : 400 clamp(30px, 3.07vi + 14.67px, 76px) / 1.15 "FormaDisplay", sans;

    /* Bold Variants */
    --text-small-bold   : 700 clamp(13px, 0.33vi + 11.33px, 18px) / 1.2 "Forma", sans;
    --text-base-bold    : 700 clamp(15px, 0.47vi + 12.67px, 22px) / 1.2 "Forma", sans;
    --title-small-bold  : 700 clamp(19px, 1.13vi + 13.33px, 36px) / 1.15 "FormaDisplay", sans;
    --title-medium-bold : 700 clamp(24px, 2.00vi + 14.00px, 54px) / 1.15 "FormaDisplay", sans;
    --title-large-bold  : 700 clamp(30px, 3.07vi + 14.67px, 76px) / 1.15 "FormaDisplay", sans;

    /* Layout Variables */
    --h-padding : 1rem;
    --v-padding : 2rem;

    @media (width > 500px) {
        --h-padding : 1.5rem;
        --v-padding : 2rem;
    }


    /* Set the defaults */
    font-size   : var(--f-height);
    font-family : var(--f-family);
    font-weight : var(--f-weight);
    background  : var(--background);
    color       : var(--text);
}

body {
    font-size   : var(--f-size);
    line-height : var(--f-height);
}

html,body {
    scroll-behavior: smooth;
    scroll-padding: 3rem;
}
}
@layer configuration {
/* Nothing to see here */
}/* Global Settings *//* Content Goes Here *//* UI Elements */
.header {
    position : fixed;
    top : 0;
    right: 0;
    left: 0;
    display : flex;
    justify-content: space-between;
    align-items: center;
    padding : 1rem var(--h-padding);
    z-index: 999999;
}
.header-logo {
    display : block;
    height : 2rem;
}
.header-menu-button {
    border : none;
    appearance: none;
    font : var(--title-medium);
    cursor : pointer;
    &:hover {
        color : var(--accent);
    }
}
.nav {
    position : fixed;
    top : 0;
    right: 0;
    bottom: 0;
    width : 75vw;
    padding : 1rem 0;
    background: var(--background);
    display : flex;
    flex-direction: column;
    gap : 2rem;
    overflow : auto;
    transition: opacity 300ms, filter 30ms, transform 300ms;
    opacity : 0.8;
    filter : blur(2px);
    transform : translateX(100%);
    z-index: 999999;

    @media (width > 700px) {
         width : 50vw;
    }

    &.is-open {
        opacity : 1;
        filter : blur(0);
        transform : translateX(0%);
    }
}
.nav-button {
    position : absolute;
    top : 2rem;
    right : var(--h-padding);
    appearance: none;
    border : none;
    display : block;
    cursor : pointer;
    svg {
        display : block;
        width : 1rem;
        height : 1rem;
        stroke : var(--text);
        &:hover {
            stroke : var(--accent);
        }
    }
}
.nav-title {
    text-transform: uppercase;
    padding : 1rem var(--h-padding) 0.5rem;
}
.nav-item {
    font : var(--title-medium);
    border-bottom : 1px solid currentColor;
    a {
        padding : 1rem var(--h-padding);
        display: block;
        &:hover {
            background : var(--accent);
        }

    }
    &:hover {
        border-bottom : 1px solid var(--accent);
    }
}
.nav-footer {
    margin-top : auto;
    padding : 0 var(--h-padding);
}
.nav-footer-item {
    font : var(--title-small);
    margin-top : 0.75rem;
    a:hover {
        color : var(--accent);
    }
}
.opening {
    width : 100%;
    height : 100svh;
    position : relative;
}
.opening-media-container {
    width : 100%;
    height : 100%;
}
.opening-media-image,
.opening-media-video {
    display : block;
    width : 100%;
    height : 100%;
    object-fit: cover;
}
:root:not(#home) {

    .opening-content {
        position : absolute;
        bottom : 0;
        left: var(--h-padding);
        right: var(--h-padding);
        padding : var(--v-padding) 0;
        display : grid;
        grid-template-columns: 1fr;
        gap : 1rem;
        border-top : 1px solid var(--text);

        @media (width > 500px) {
             grid-template-columns: 1fr 1fr;
        }
    }
    .opening-title {
        font : var(--title-medium-bold);
        text-wrap: balance;
    }

    .opening-subtitle {
        font : var(--title-medium);
    }
}/* The Opening is different when not inside the homepage */
#home {

    .opening-content {
        position : absolute;
        top      : 6rem;
        left: var(--h-padding);
        right: var(--h-padding);
        max-width: 60ch;
        bottom : var(--v-padding);
        display : flex;
        flex-direction: column;
        gap : 1rem;
        align-items: flex-start;
    }
    .opening-title {
        font : var(--title-large);
        text-wrap: balance;
    }

    .opening-subtitle {
        font : var(--title-medium);
    }

    .opening-discover {
        justify-self: flex-end;
        margin-top : auto;
        text-transform: uppercase;
        display : flex;
        gap : 1rem;
        align-items: center;
        cursor : pointer;
        &:hover {
            color : var(--accent);
            .circle {
                fill : var(--accent);
            }
        }
    }

    .arrow-icon {
        width : 2rem;
        height : 2rem;
    }

    .circle {
        fill : white;
    }

}
.blocks {
    display : grid;
    gap     : 1.5rem;
    padding : 1.5rem 0;
}
.footer {
    padding : var(--v-padding) var(--h-padding) 5rem;
    display : grid;
    grid-template-columns: repeat(2, 1fr);
    gap : 1rem;
    grid-template-areas: "company address" ". contacts" ". maps" ". social" ". privacy" ". legal";


    @media (width > 650px) {
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas: "company address contacts" ". maps social" ". privacy legal";
    }

    @media (width > 950px) {
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas: "company address contacts privacy" ". maps social legal";
    }

    ul {
        list-style: none;
    }

    a:hover {
        color : var(--accent);
    }
}
.footer-company {
    grid-area   : company;
    span {
        color : var(--text-alt);
    }
}
.footer-address {
    grid-area: address;
    font-style : normal;
}
.footer-contacts {
    grid-area: contacts;
}
.footer-maps {
    grid-area: maps;
}
.footer-privacy {
    grid-area: privacy;
}
.footer-legal {
    grid-area: legal;
    color : var(--text-alt);
}
.footer-social {
    grid-area: social;
}
.posts {
    padding : var(--v-padding) var(--h-padding);
}
.posts-title {
    font : var(--title-medium-bold);
    margin-bottom : var(--v-padding);
}
.posts-grid {
    display : grid;
    grid-template-columns: 1fr;
    gap : var(--v-padding) 1rem;

    @media (width > 450px) {
        grid-template-columns : repeat(2,1fr);
    }

    @media (width > 800px) {
        grid-template-columns : repeat(3,1fr);
    }

    @media (width > 1200px) {
        grid-template-columns : repeat(4,1fr);
    }
}/* The Preview Thumb */
.news-link {
    display       : block;
    margin-bottom : 1rem;
    position      : relative;
    &::after {
        content        : "";
        inset          : 0;
        background     : var(--accent);
        position       : absolute;
        opacity        : 0;
        mix-blend-mode : multiply;
    }

    &:hover::after {
        opacity : 1;
    }

    &:hover img {
        filter : grayscale(1);
    }
}
@media (width > 800px) and (width <= 1200px) {

    html:not(#posts) .news:nth-child(4):last-child {
        display : none;
    }
}
#posts .posts {
    padding-top : 10rem;
    padding-bottom : 5rem;
}
#posts .news {
    position : relative;
    &::after {
        content : "";
        height : 1px;
        background: var(--text);
        position : absolute;
        bottom : -1rem;
        left : 0;
        right : 0;
    }

}/* Two Columns */
@media (width > 450px) {
    #posts .news::after {
        right : -1rem;
    } 
    #posts .news:last-child::after {
        right : 0;
    }

}
@media (width > 450px) and (width <= 800px) {
    #posts .news:nth-child(even)::after {
        right : 0;
    }
}
@media (width > 800px) and (width <= 1200px) {
    #posts .news:nth-child(3n)::after {
        right : 0;
    }
}
@media (width > 1200px) {
    #posts .news:nth-child(4n)::after {
        right : 0;
    }
}
.contacts {
    padding : 10rem var(--h-padding) var(--v-padding);

    a:hover {
        color : var(--accent);
    }
}
.contacts-title {
    font : var(--title-medium-bold);
    margin-bottom : 3rem;
}
.contacts-section {
    display               : grid;
    grid-template-columns : 1fr;
    gap                   : 1rem;
    border-bottom         : 1px solid var(--text);
    font                  : var(--title-small);
    padding-bottom        : var(--v-padding);
    margin-bottom         : 1rem;

    &:last-child {
        padding-bottom : 0;
        margin-bottom : 0;
        border-bottom: none;
    }


    @media (width > 600px) {
         grid-template-columns: 1fr 2fr;
    }

    @media (width > 1000px) {
         grid-template-columns : 1fr 1fr;
    }
}
.contacts-section-content {
    p:not(:last-child) {
        margin-bottom: 1rem;
    }

    small {
        font : var(--text-small);
        display : block;
        max-width : 55ch;
        text-wrap: balance;
    }
}
.contacts-map-container {
    margin-bottom : var(--h-padding);
    position : relative;
    &::after {
        content : "";
        inset : 0;
        background: var(--accent);
        position: absolute;
        mix-blend-mode: overlay;
        pointer-events: none;
    }
}
.contacts-map {
    display      : block;
    width        : 100%;
    aspect-ratio : 3/2;
    filter       : grayscale(1);

    @media (width > 1000px) {
         aspect-ratio : 3/1;
    }
}
.projects {
    padding               : var(--v-padding) 0 3rem;
    margin                : var(--v-padding) var(--h-padding) 0;
    border-top            : 1px solid var(--text);
    border-bottom         : 1px solid var(--text);
    display               : grid;
    grid-template-columns : 1fr 1fr;
    grid-gap              : var(--v-padding) 1rem;
}
.projects-title {
    font          : var(--title-medium-bold);
    margin-bottom : var(--v-padding);
}
.projects-image {
    display : block;
    @media (width > 500px) {
         width : 50%;
    }
}
.projects-intro {
    font : var(--title-medium);
}
.projects-list {
    grid-column : 1 / -1;
    margin-top : 1rem;
}
.project {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap : 1rem;
}
.project-title {
    text-transform: uppercase;
}
.project-subtitle {
    color : var(--text-alt);
    font : var(--text-small);
}/* Reusable Components *//* Text Editor Styles */
.editor {


    /* Second level titles */
    h2 {
        font : var(--title-medium);
        &:not(:last-child) {
            margin-bottom : 0.5em;
        }
    }

    p {
        max-width: 50ch;
    }


}/* Global image styles */
img {
    display : block;
    width   : 100%;
    height  : auto;
}/* Link With Arrow */
.link-with-arrow {
    display : flex;
    &:hover {
        color : var(--accent);
    }
}/* The Button With The Arrow */
.button-with-arrow {
    display               : grid;
    grid-template-columns : 2rem 1fr;
    align-items           : center;
    gap                   : 1rem;
    text-transform        : uppercase;
}
.arrow-container {
    aspect-ratio: 1;

    svg {
        display : block;
        width   : 100%;
        height  : 100%;
    }

    .disc {
        fill : currentColor;
    }

}/*! Flickity v2.3.0
https://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled {
  position: relative;
}
.flickity-enabled:focus { outline: none; }
.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}
.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}/* draggable */
.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}/* ---- flickity-button ---- */
.flickity-button {
  position: absolute;
  background: hsla(0, 0%, 100%, 0.75);
  border: none;
  color: #333;
}
.flickity-button:hover {
  background: white;
  cursor: pointer;
}
.flickity-button:focus {
  outline: none;
  box-shadow: 0 0 0 5px #19F;
}
.flickity-button:active {
  opacity: 0.6;
}
.flickity-button:disabled {
  opacity: 0.3;
  cursor: auto;
  /* prevent disabled button from capturing pointer up event. #716 */
  pointer-events: none;
}
.flickity-button-icon {
  fill: currentColor;
}/* ---- previous/next buttons ---- */
.flickity-prev-next-button {
  top: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  /* vertically center */
  transform: translateY(-50%);
}
.flickity-prev-next-button.previous { left: 10px; }
.flickity-prev-next-button.next { right: 10px; }/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 10px;
}
.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 10px;
}
.flickity-prev-next-button .flickity-button-icon {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
}/* ---- page dots ---- */
.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: -25px;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
}
.flickity-rtl .flickity-page-dots { direction: rtl; }
.flickity-page-dots .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 8px;
  background: #333;
  border-radius: 50%;
  opacity: 0.25;
  cursor: pointer;
}
.flickity-page-dots .dot.is-selected {
  opacity: 1;
}/* Blocks *//* Text Block */
.module.type-text {
    padding               : 0 var(--h-padding) 4rem;
    display               : grid;
    grid-template-columns : 1fr;
    gap                   : 1rem;
    grid-template-areas   : "title" "text";

    @media (width > 500px) {
        grid-template-columns : repeat(3, 1fr);
        grid-template-areas : "title text text";
    }


    .title {
        grid-area : title;
        text-wrap: balance;
        font : var(--title-medium-bold);
    }

    .text {
        grid-area : text;
    }

    .link {
        @media (width > 500px) {
            grid-column : 2 / -1;
        }
    }
}/* Text Block */
.module.type-text-alt {
    padding               : 0 var(--h-padding) 4rem;
    display               : grid;
    grid-template-columns : 1fr;
    gap                   : 0 1rem;
    grid-template-areas : "title" "textSx" "textDx";

    @media (width > 500px) {
        grid-template-columns : 1fr 2fr;
        grid-template-areas   : "title textSx textSx" "title textDx textDx";
    }

    @media (width > 1000px) {
        grid-template-columns : 1fr 1fr 1fr;
        grid-template-areas : "title textSx textDx";
    }


    .title {
        grid-area     : title;
        text-wrap     : balance;
        font          : var(--title-medium-bold);
        margin-bottom : 1rem;
    }

    .text-sx {
        grid-area : textSx;
        margin-bottom : 1rem;
    }

    .text-dx {
        grid-area : textDx;
        margin-bottom : 1rem;
    }

}/* Cards Block */
.module.type-cards {
    padding               : 0 var(--h-padding);
    display               : grid;
    grid-template-columns : 1fr;
    gap                   : var(--v-padding) 1rem;

    @media (width >= 800px) {
         grid-template-columns : repeat(3, 1fr);
    }


    .card {
        display               : grid;
        grid-template-rows    : auto auto;
        align-content         : space-between;
        grid-template-columns : 1fr;
        @media (width >= 800px) {
            grid-template-columns : 1fr;
            grid-template-rows    : auto auto;
        }
    }

    .card-title {
        font : var(--title-medium-bold);
    }

    .card-subtitle {
        font : var(--title-medium);
        text-wrap: balance;
    }

    .card-image-container {
        display    : block;
        margin-top : 1rem;
        position   : relative;
        overflow   : hidden;
    }

}
.card-image-hover {
    position : absolute;
    inset    : 0;
    padding  : 1rem;
    background-image: var(--background);
    background-size: cover;
    display: none;
}
.card-image-container:hover .card-image-hover {
    display : block;
}/* Link Block */
.module.type-link {
    padding : 1rem var(--h-padding) 4rem;
    text-transform: uppercase;
    display : flex;
    align-items: center;
    gap : 1rem;
    &:hover {
        background: var(--accent);
    }

    svg {
        width  : 2rem;
        height : 2rem;
    }

    .disc {
        fill : white;
    }

}/* Banner Block */
.module.type-banner {
    display               : grid;
    grid-area             : "content";
    grid-template-columns : 1fr;

    .figure {
        grid-area : content;
        z-index   : 0;
    }

    .media {
        display         : block;
        width           : 100%;
        height          : 100%;
        object-fit      : cover;
        object-position : center;
    }

    .content {
        z-index: 1;
    }

    .title {
        grid-area : title;
        text-wrap: balance;
        font : var(--title-medium-bold);
    }

    .text {
        grid-area : text;
        font : var(--title-medium);
    }

    .link {
        justify-self: start;
        @media (width > 500px) {
            grid-column : 2 / -1;
        }
    }

    .content {
        grid-area : content;
        padding : var(--v-padding) var(--h-padding);
        display               : grid;
        gap                   : 1rem;
        grid-template-areas   : "title" "text";
        grid-template-columns : 1fr;
        align-self: start;

        @media (width > 500px) {
            grid-template-columns : repeat(3, 1fr);
            grid-template-areas : "title text text";
        }
    }

}/* Circles Block */
.module.type-circles {
    position : relative;

    .media {
        display : block;
        width : 100%;
    }

    .content {
        position              : absolute;
        inset                 : 0;
        display               : grid;
        grid-template-columns : repeat(3, auto);
        justify-content       : center;
        align-content         : center;
        align-items           : center;

    }

    .circle {
        border : 1px solid var(--text);
        border-radius: 50%;
        aspect-ratio: 1;
        width : 31vw;
        place-content: center;
        text-align: center;
        font : var(--text-base);

        @media (width > 600px) {
            font : var(--title-small);
            width : 25vw;
        }
    }

}/* Photos Block */
.module.type-photos {
    padding               : 0 var(--h-padding);
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 1rem;

    img:nth-child(odd):last-child {
        grid-column : 1 / -1;
    };
}/* Text+Images Block */
.module.type-textimages {
    padding               : 0 var(--h-padding) 4rem;
    display               : grid;
    grid-template-columns : 1fr;
    gap                   : 1rem;
    grid-template-areas   : "text" "images";

    @media (width > 1000px) {
        grid-template-areas   : "text images";
        grid-template-columns : 1fr 1fr;
    }

    .text {
        grid-area : text;
    }

    figure {
        grid-area : images;
        display : grid;
        grid-template-columns: 1fr 1fr;
        gap : 1rem;
    }

    img:only-child {
        grid-column : 1 / -1;
    }
}/* Services Block */
.module.type-services {
    padding               : 0 var(--h-padding);
    display               : grid;
    grid-template-columns : 1fr;
    gap                   : 1rem;

    @media (width > 400px) {
         grid-template-columns : repeat(2, 1fr);
    }

    @media (width > 2500px) {
         grid-template-columns : repeat(4, 1fr);
    }

    h2 {
        grid-column : 1 / -1;
        border-top : 1px solid currentColor;
        font : var(--title-medium-bold);
        padding : 1rem 0 0;
    }

    h3 {
        font : var(--title-medium);
        margin-bottom: 0.75rem;
    }

    figure {
        margin-top    : 1rem;
        margin-bottom : 1rem;
    }

    section {
        display            : grid;
        grid-template-rows : auto auto;
        align-content      : space-between;
    }

    .link {
        display : inline-flex;
        margin-top : 1rem;
    }

}/* Numbers Block */
.module.type-numbers {
    padding               : 0 var(--h-padding);
    display               : grid;
    grid-template-columns : 1fr;
    gap                   : 1rem;

    @media (width > 400px) {
         grid-template-columns : repeat(2, 1fr);
    }

    @media (width > 2500px) {
         grid-template-columns : repeat(4, 1fr);
    }

    h2 {
        grid-column : 1 / -1;
        border-top : 1px solid currentColor;
        font : var(--title-medium-bold);
        padding : 1rem 0 0;
    }

    ul {
        list-style: none;
    }

    li {
        margin-bottom : 1rem;
    }

    strong {
        font : var(--title-large-bold);
        color : var(--accent);
    }

    span {
        font : var(--title-medium);
        display: block;
        text-wrap: balance;
    }

    @media (width < 500px) {
         br {
            display: none;
         }
    }
}/* Slider Block */
.module.type-slider {
    padding : 0 var(--h-padding);
    display : grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;

    img {
        grid-row : 1;
        grid-column: 1;
    }
}/* Quote Block */
.module.type-quote {
    padding               : var(--v-padding) var(--h-padding);
    display               : grid;
    grid-template-columns : repeat(3, 1fr);
    gap                   : 1rem;
    grid-template-areas   : "text text .";


    blockquote {
        grid-area : text;
        text-wrap: balance;
        font : var(--title-medium);
    }

}/* History/Draggable Block */
.module.type-history {
    padding : 0 var(--h-padding) var(--v-padding);

    .flickity-enabled.is-draggable .flickity-viewport {
        cursor : url('cursor/arrow.svg'), move;
    }

    .card {
        display            : grid;
        grid-template-rows : auto auto;
        align-content      : space-between;
        width              : calc((100vw - (var(--h-padding) * 2)) / 1.5);
        margin-right       : 1rem;

        @media (width > 500px) {
             width : calc((100vw - (var(--h-padding) * 2)) / 2);
        }

        @media (width > 900px) {
             width : calc((100vw - (var(--h-padding) * 2) - 2rem) / 3);
        }
    }

    figcaption {
        display               : grid;
        grid-template-columns : 1fr 3fr;
        gap                   : 1rem;
        padding               : 1rem 0 0;
    }

    .card-title {
        font : var(--title-medium);
    }

    .card-subtitle {
        font : var(--text-base);
        &:only-child {
            grid-column: span 2;
        }
    }

    .card-image-container {
        display : block;
        margin-top : 1rem;
    }



}/* Line Block */
.module.type-line {
    border : none;
    height : 1px;
    margin-right : var(--h-padding);
    margin-left : var(--h-padding);
    margin-top : var(--marginTop);
    margin-bottom : var(--marginBottom);
    background: var(--text);

}/* Newsletter Section */
.letter {
    padding               : 0 var(--h-padding);
    display               : grid;
    grid-template-columns : 1fr;
    gap                   : 1rem;
    grid-template-areas   : "text" "images";

    @media (width > 1000px) {
        grid-template-areas   : "text images";
        grid-template-columns : 1fr 1fr;
    }

    
}
.letter-title {
    font : var(--title-medium-bold);
}
.letter-subtitle {
    font : var(--title-medium);
}/* Newsletter Styles */
.sib-form-message-panel {
    display : none;
}
#sib-container {
    margin-top : 1rem;

    label {
        display : block;
        font : var(--text-small);
    }

    input {
        border-radius : 0;
        border : none;
        border-bottom : 1px solid var(--text);
        width: 100%;
        form : var(--text-base);
        line-height: 2;
    }

}
#sib-form {
    display : grid;
    grid-template-columns: 1fr 1fr;
    gap : 1rem;
}
.sib-form-block {
    width: 100%;
}
.input--hidden {
    display: none;
}
.sib-form__declaration {
    grid-column : 1 / -1;
    font : var(--text-small);
    display : flex;
    gap : 1rem;
    color : var(--text-alt);
    align-items : center;
}
.sib-form-double {
    grid-column : 1 / -1;
}
.letter-button {
    border : none;
    position : relative;
    background: var(--text);
    color : var(--background);
    padding : 0.55rem 1rem 0.45rem;
    display : block;
    &:hover {
        background : var(--accent);
    }

    .icon {
        position : absolute;
        inset : 0;
        fill : var(--accent);
        width : 100%;
        height : 100%;
        object-fit: contain;
        object-position: cover;
        display: none;
    }
}/* Templates *//* Single News Page */
#post .letter {
    margin-top : var(--h-padding);
}