/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

:root {
  --content-width: 1280px;
  --content-width-2xs: 595px;
  --content-width-s: 768px;
  --content-width-m: 1024px;
  --max-content-width: 100%;
  --full-width-padding: 4rem;

  --mobile: 768px;
 
  --gap-xs: 0.5rem;
  --gap-s: 0.75rem;
  --gap-m: 1rem;
  --gap-l: 1.5rem;
  --gap-xl: 2rem;
  --gap-xxl: 3rem;
  --gap-3xl: 4rem;
  --gap-4xl: 5rem;
  
  --padding0-5: 0.5rem;
  --padding1: 1rem;
  --padding1-5: 1.5rem;
  
  --margin05: 0.5rem;
  --margin1: 1rem;
  --margin1-5: 1.5rem;
  
  --brd-radius-6: 6px;
  --brd-radius-12: 12px;
  --brd-radius-16: 16px;
}

/** reset **/
:where(p) {
    margin-inline-end: 0;
    margin: 0;
    padding: 0;
}
.padding-reset {
  padding: 0;
}
.brd-rd-reset {
  border-radius: 0;
} 

.off {
  display: none;
}

@font-face {
    font-family: 'Inter';
    src: url('/wp-content/uploads/fonts/subset-Inter18pt-Regular.woff2') format('woff2'),
        url('/wp-content/uploads/fonts/subset-Inter18pt-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/wp-content/uploads/fonts/subset-Inter18pt-SemiBold.woff2') format('woff2'),
        url('/wp-content/uploads/fonts/subset-Inter18pt-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/wp-content/uploads/fonts/subset-Inter18pt-Medium.woff2') format('woff2'),
        url('/wp-content/uploads/fonts/subset-Inter18pt-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Sora';
    src: url('/wp-content/uploads/fonts/subset-Sora-Bold.woff2') format('woff2'),
        url('/wp-content/uploads/fonts/subset-Sora-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    /* font-display: swap; */
}
@font-face {
    font-family: 'Sora';
    src: url('/wp-content/uploads/fonts/subset-Sora-Regular.woff2') format('woff2'),
        url('/wp-content/uploads/fonts/subset-Sora-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    /* font-display: swap; */
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Sora", serif;
    font-variation-settings: 'wght' 700;
}

h2 {
  letter-spacing: -1%;
}
h3 {
  font-size: var(--hl-m);
}

body {
    font-family: "Inter", serif;
    font-weight: 400;
  	font-size: 	1rem;
}

.text-semi-bold {
    font-weight: 600;
}

p b, p strong {
  font-family: "Inter", serif;
  font-weight: 600;
}


.pretty {
  text-wrap: pretty;
}
.balance {
  text-wrap: balance;
}

.fs22 {
    font-size: 22px;
    line-height: 1.2em;
}
.fs20 {
  font-size: 20px;
  line-height: 1.2em;
}

/** backgrounds & text-colors **/
:is(.green, .red, .petrol, .olive, .warm-rose, .grey) {
  h2, .brxe-text-basic, .section-headline, .description {
    color: var(--neutral-white, #fff);
  }
}

.neutral-beige {background-color: var(--neutral-beige, #fff);}
.neutral-off-white {background-color: var(--neutral-off-white, #fff);}
.yellow {background-color: var(--yellow, #fff);}
.yellow-light {background-color: var(--yellow-light, #fff);}
.green {background-color: var(--green, #fff);}
.green-light {background-color: var(--green-light, #fff);}
.neutral-white {background-color: var(--neutral-white, #fff);}
.red {background-color: var(--red, #fff);}
.petrol-light {background-color: var(--petrol-light, #fff);}
.petrol-off-light {background-color: var(--petrol-off-light, #fff);}
.petrol {background-color: var(--petrol, #fff);}
.warm-rose-light {background-color: var(--warm-rose-light, #fff);}
.warm-rose {background-color: var(--warm-rose, #fff);}
.olive-light {background-color: var(--olive-light, #fff);}
.olive {background-color: var(--olive, #fff);}
.grey {background-color: var(--grey);}

/** Parallax Background **/
.parallax-image {
  position: relative;
  height: 500px;
  
  clip-path: inset(0);

  &::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;

    z-index: -1;

    will-change: transform;
    transform: translateZ(0);
  }
}
.parallax-image.markt::before {
  background-image: url(/wp-content/uploads/2026/08/rewe-siebert-green-building-1.webp);
} 
.parallax-image.gemeinschaft::before {
  background-image: url(/wp-content/uploads/2026/08/rewe-siebert-basdorferleben-flohmarkt.webp);
} 
.parallax-image.region::before {
  background-image: url(/wp-content/uploads/2026/08/UckerEi-Paralax-scaled.webp);  
}
.parallax-image.wir::before {
  background-image: url(/wp-content/uploads/2026/08/rewe-siebert-bananen-parallax.webp);
}


/** Content Styles **/
section {
  display: grid;
  grid-template-columns: 
    [full-start]
    1fr
    [content-start]
    calc((var(--content-width) - var(--gap-4xl)) / 2)
    [center]
    calc((var(--content-width) - var(--gap-4xl)) / 2)
    [content-end]
    1fr
    [full-end];
  gap: var(--gap-4xl);
  padding: 7rem 0;

  &.ai-stretch {
    align-items: stretch;
  }
}

.hero {
  position: relative;
  height: 900px;
  padding: 0;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    background-color: rgb(0 0 0 / 40%);
    z-index: 10;
  }

  img {
    grid-column: full-start / full-end;
    width: 100%;
    height: 900px;
    overflow: hidden;
    object-fit: cover;
    z-index: 5;
  }

  .hero-content {
    position: absolute;
    grid-column: content-start / content-end;
    z-index: 15;

    &.content-style-s {
      align-items: flex-start;
    }

    h1, h2 {
      color: var(--white);
    }
    .hero-headline {
      font-size: clamp(1.75rem, calc(1.083rem + 3.333vw), 3.75rem);
      margin-bottom: 24px;
    }
    .hero-subline {
      font-size: 16px;
      font-variation-settings: 'wght' 400;
      font-weight: 400;
      padding-right: 50px;
      margin-bottom: 32px;
    }
  }
}
.tag {
  grid-column: full-start / full-end;
}

:is(.angebote, .rezepte, .rewe-de) {
  width: 100%;
  .brxe-icon-box {
    grid-row: 1 / 2;
    .content {
      width: 100%;
    }
  }
  .extra {grid-row: 2 / 3;}
  .tag {grid-row: 3 / 4;grid-column: 1 / 2;}
  :last-child {grid-row: 4 / 5;}
}

.brxe-container {
  max-width: var(--content-width);
  width: 100%;
  grid-column: content-start / content-end;

  &.center {
    width: 100%;
    display: flex;
    align-items: center;
  }
}
.content-style-xl {
  max-width: 100%;
  width: 100%;
  grid-column: full-start / full-end;
}
.content-style-m {
  max-width: var(--content-width-m);
  width: 100%;
  margin: 0 auto;
  grid-column: content-start / content-end;
}
.content-style-s {
  max-width: var(--content-width-s);
  width: 100%;
  margin: 0 auto;
  grid-column: content-start / content-end;
  align-items: center;

  &.left {
    margin: 0 auto 0 0;
    align-items: flex-start;
    .teaser {
      width: 100%;
      text-align: left;
    }
  }
  &.center {
    margin: 0 auto;
    .section-headline, .description {
      text-align: center;
    }
  }
  .teaser {
    font-weight: 600;
    margin-bottom: 1rem;
  }
  .section-headline {
    margin-bottom: 1.5rem;
  }
  .description {
    margin-bottom: 2rem;
    &:last-child {
      margin-bottom: 0;
    }
  }
}
.content-style-2xs {
  max-width: var(--content-width-2xs);
  width: 100%;
  margin: 0 auto;
  grid-column: content-start / content-end;
  align-items: center;
  .description {
    text-align: center;
    &.italic {
      font-style: italic;
    }
  }
}
.content-box-left, .content-box-right {
  &.justify-content-center {
    justify-content: center;
  }
  .teaser {
    font-weight: 600;
    margin-bottom: 1rem;
  }
  .section-headline {
    margin-bottom: 1.5rem;
  }
  .section-subline {
    margin-bottom: 1rem;
  }
  .description {
    margin-bottom: 2rem;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .list-m {
    padding: 0.5rem 0;
    gap: 1rem;
    margin-bottom: 2rem;
    &:last-child {
      margin-bottom: 0;
    }
    li.no-link {
      justify-content: flex-start;
    }
  }
}

/** Layout Style (neu) 
l- (Layout): Alles, was mit Grid, Flex oder Spalten zu tun hat
c- (Component): Ein fertiges Bauteil (Footer, Card, Button)
u- (Utility): Eine Klasse, die nur EINE Sache macht (Farbe, Abstand)
is- / has- (State): Zustände (.is-active / .has-gap)
**/

.l-flex-container {
  &.full {
    grid-column: full-start / full-end;
    max-width: 100%;
    padding: 0 4rem;
  }
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp( 2rem, 10%, 150px);
  flex-wrap: wrap;
}

:is(.c-ai-content, [data-ai-label="true"]) {
  position: relative;

  &::after {
    position: absolute;
    content: '';
    background-color: rgb(0 0 0 / 100%);
    background-image: url(/wp-content/uploads/2026/08/LABEL_AI_white-transparent.svg);
    width: 50px;
    height: 50px;
    right: 0;
    bottom: 0;
    border-radius: 1rem 0 1rem 0;
    z-index: 20;
  }
}
:is(.img-box-left-xl, .img-box-right-xl, .zukunft-img, .hero) {
  &::after {
    border-radius: 1rem 0 0 0;
  }
}

.c-project-img {
  height: 270px;
  width: 100%;
  overflow: hidden;
  object-fit: cover;
}

.btn-bdr.btn-bg-red:hover {
  background-color: color-mix(in srgb, var(--rewe-rot), transparent 15%);
  box-shadow: inset 0 2px 4px rgb(6 7 5 / 20%);
}

.impressum, .datenschutz {
  :is(h1, h2, h3) {
    margin-top: 2rem;
    margin-bottom: 1rem;
  }
}

.cmplz-preferences article.wordpress {
  max-width: 1280px !important;
  width: 100% !important;
  margin: 18rem auto 5rem;

  :is(h1, h2, h3) {
    margin-top: 2rem;
    margin-bottom: 1rem;
  }

  #cmplz-document {
    max-width: 1280px;
    width: 100%;
  }
}


.content-box-left {grid-column: 	content-start / center;}
.content-box-right {grid-column: 	center / content-end;}
.img-box-left-m {grid-column: 	content-start / center;}
.img-box-left-xl {
  grid-column: 	full-start / center;
  &.img-height-2xl {
    min-height: 913px;
    height: 100%;
    object-fit: cover;
  }
}
.img-box-right-m {grid-column: 	center / content-end;}
.img-box-right-xl {grid-column: 	center / full-end;}

.gap1 {
    p {
        margin-bottom: var(--gap-m);
    }
}
.gap2 {
    gap: var(--gap-xl);
}

.info-box-wrapper {
  grid-row: 1 / 4;
}
.info-box {
  padding: 2rem;
  width: 310px;
  border-radius: 1rem;
}

/* Aus der Region */
.yellow-light.brxe-container.top-left {
  align-self: stretch!important;
}
.top-left {
  .listing-style-content-xl img {
    height: 500px;
    width: 100%;
    object-fit: cover;
  }
}
.top-right {
  .listing-style-content-xl img {
    height: 350px;
    width: 100%;
    object-fit: cover;
  }
}
:is(.specials) {
  h5 {
    font-size: 18px;
  }
}

.gast-grid {
  display: grid;
  grid-template-areas: 
  '. .'
  '. b'
  'a b'
  'a b'
  'a b'
  'a .';
  grid-template-rows: repeat(6, 74px);
  column-gap: 2rem;
  :is(.img-1, .img-2) {
    height: 100%;
    width: 100%;
  }
  .img-1 {
    grid-area: a;
  }
  .img-2 {
    grid-area: b;
  }
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
  }
}
:where(.brxe-image) .bricks-image-caption {
  text-align: right;
  /* background: none; */
  font-variation-settings: 'wght' 500;
  /* text-shadow: 0 0 3px #000; */
}

.basdorf-grid {
  display: grid;
  grid-template-areas: 
  'a b'
  'a c'
  'a d'
  'a d';
  column-gap: 1.5rem;
  align-items: center;
  img {
    grid-area: a;
    max-width: 360px;
    width: 100%;
    height: 252px;
    object-fit: cover;
    border-radius: 1rem;
  }
  .time-area {
    grid-area: b;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 1rem;
    .time.teaser {
      font-weight: 600;
      padding: 0.25rem 0.625rem;
      background-color: var(--neutral-darkest-5);
      border-radius: 0.375rem;
    }
    .area.teaser {
      font-weight: 600;
    }
  }
  .section-headline {
    grid-area: c;
  }
  .description {
    grid-area: d;
  }
}

.reportage-grid {
  display: grid;
  grid-template-areas: 
  'b a'
  'c a'
  'd a'
  'e a'
  'e a';

  .info-box {
    grid-area: a;
  }
  .teaser {grid-area: b;font-variation-settings: 'wght' 600;}
  .section-headline {grid-area: c;margin: 10px 0;}
  .description.italic {grid-area: d;font-style: italic;margin-bottom: 1rem;}
  .description {grid-area: e;}
}

.shoping-grid {
  display: grid;
  grid-template-columns: 
    [content-start]
    calc((var(--content-width) - var(--gap-xl)) / 2)
    [center]
    calc((var(--content-width) - var(--gap-xl)) / 2)
    [content-end];
  gap: var(--gap-xl);
  align-items: stretch;

  .content-box-left, .content-box-right {
    border-radius: 1rem;
    overflow: hidden;
  }


}

/** block Content **/
.block-wrapper-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--gap-m);
  align-items: stretch;
  &.gap-3xl {
    column-gap: var(--gap-3xl);
    row-gap: 0;
  }
}
.block-wrapper-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-m);
  align-items: stretch;
}
.block-wrapper-content-3  {
  display: grid;

  grid-template-rows: subgrid;
  grid-row: span 3;

  &.only-img {
    grid-row: span 1;
    height: 300px;
  }

  img {
    height: 250px;
    object-fit: cover;
    overflow: hidden;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
    &.auto-height {
      height: auto;
    }
    &.brd-rd-reset {
      border-radius: 0;
    }
    &:last-child {
      margin-bottom: 0;
    }
  }

  svg {
    width: auto;
    height: 3rem;
    margin-bottom: 1.5rem;
  }
  .teaser {
    font-weight: 600;
    margin-bottom: 1rem;
  }
  .section-headline {
    margin-bottom: 1.5rem;
  }
  .section-subline {
    margin-bottom: 1.5rem;
  }
  .description {
    margin-bottom: 1.5rem;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .list-m {
    padding: 0.5rem 0;
    gap: 1rem;
    margin-bottom: 2rem;
    &:last-child {
      margin-bottom: 0;
    }
    li.no-link {
      justify-content: flex-start;
    }
  }
}

/** 
 * Subgrid-System: Erlaubt Kindern, sich am Grid der Eltern auszurichten.
 * Funktioniert für .content-3 (3 Zeilen) und .content-4 (4 Zeilen).
 */
 :is(.block-wrapper-content-3, .block-wrapper-content-4) {
  display: grid;
  grid-template-rows: subgrid;
 }
.block-wrapper-content-4 {
  grid-row: span 4;
  padding: 1.5rem;
  row-gap: 1.5rem;
  h5 {
    font-size: 26px;
    line-height: 1.2em;
  }
  .brxe-text-basic.extra {
    font-size: 18px;
    line-height: 1.6em;
  }
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    &.c-card-img-h-40 {
      height: 40px;
      width: auto;
    }
  }
}

/** Link & Button Style **/
.link-style-underline {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  text-decoration-color: rgba(0, 0, 0, 0.2);
  transition: text-decoration-color 0.3s ease, text-underline-offset 0.3s ease;
}
.link-style-underline:hover {
  text-decoration-color: rgba(0, 0, 0, 1);
  text-underline-offset: 0.1em;
}

button.itc-slider-arrow {
  transform: translateY(-100%);
}

/** Gaps **/
.gap-reset {gap: 0;}
.gap-xs {gap: var(--gap-xs);}
.gap-m {gap: var(--gap-m);}
.gap-l {gap: var(--gap-l);}
.gap-xl {gap: var(--gap-xl);}
.gap-xxl {gap: var(--gap-xxl);}
.gap-3xl {gap: var(--gap-3xl);}
.gap-4xl {gap: var(--gap-4xl);}

/** Absände **/
.txt-margin-btm-m {
  margin-bottom: 1.2em;
}

.link-margin-top-l {
  margin-top: var(--gap-l);
}

.margin-top-xs {margin-top: 0.5rem;}
.margin-top-m {margin-top: 1rem;}
.margin-top-l {margin-top: 1.5rem;}
.margin-top-xl {margin-top: 2rem;}

.padding-xs-t-b {padding: 0.5rem 0;}
.padding-m-t-b {padding: 1rem 0;}

/** Image Styles **/
.img-height-m {height: 640px;width: 100%;object-fit: cover;}
.img-height-l {height: 720px;width: 100%;object-fit: cover;}

/** Border Styles **/
.brd-rd-m {border-radius: 1rem;}
.brd-rd-max {border-radius: 50%;}
.brd-rd-right-m {border-top-right-radius: 1rem;border-bottom-right-radius: 1rem;}

/** Icon Box Style **/
.ib-cont {
  gap: var(--gap-xxl);
}
.ib-style-1 {
  max-width: calc((var(--content-width) - (var(--gap-xxl) * 2)) / 3);
  width: 100%;
  gap: var(--gap-l);
  
  svg {
    height: 3rem;
    width: auto;
  }
  
  p {
    margin-top: 1.5rem;
  }
}
.ib-wrapper {
  padding: 0.5rem 0;
  column-gap: 1rem;
}
.ib-style-normal {
    flex: 1;
    row-gap: var(--gap-m);
    svg {
        height: 3rem;
        width: auto;
        margin-bottom: var(--margin05);
    }
    .content {
        display: flex;
        flex-direction: column;
        row-gap: var(--gap-m);
    }
}
.ib-p-24 {
    padding: 24px;
}

.tour {
    padding: 0 calc(var(--padding1) * 4);
}

/** Abfrage-Listing Styles **/
.listing-gap-1 {
  gap: var(--gap-xl);
  ul {
    li {
        margin-bottom: 1rem;
        &:last-child {
            margin-bottom: 0;
        }
    }
  }
}
.listing-style-span3 {
  max-width: calc((var(--max-content-width) - (var(--gap-xl) * 2)) / 3);
  width: 100%;
  height: 100%;
  padding-bottom: var(--padding1-5);
  border-radius: var(--brd-radius-16);
  
  display: grid;
  grid-template-columns: 
    [card-start]
    var(--padding1-5)
    [content-start]
    1fr
    [content-end]
    var(--padding1-5)
    [card-end];
  align-content: start;
  
  img {
    grid-column: card-start / card-end;
    margin-bottom: var(--margin1-5);
    border-top-left-radius: var(--brd-radius-16);
    border-top-right-radius: var(--brd-radius-16);
  }
  
  h2, h3,
  > div {
    grid-column: content-start / content-end;
  }

  @media (width <= 768px) {
    max-width: 100%;
    height: auto;
  }
}
.main-grid-container {
  display: grid;
  gap: var(--gap-xl);

  &.gtc-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  &.gtc-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
.listing-style-wrapper {
  width: 100%;
  height: 100%;
  padding-bottom: var(--padding1-5);
  border-radius: var(--brd-radius-16);
  
  display: grid;
  grid-template-columns: 
    [card-start]
    var(--padding1-5)
    [content-start]
    1fr
    [content-end]
    var(--padding1-5)
    [card-end];
  align-content: start;
}
.listing-style-content-xl {
  grid-template-rows: subgrid;
  grid-row: span 8;
  gap: 0;
  &.gtr-5 {
    grid-row: span 5;
  }

  img {
    grid-column: card-start / card-end;
    margin-bottom: var(--margin1-5);
    border-top-left-radius: var(--brd-radius-16);
    border-top-right-radius: var(--brd-radius-16);
    height: 270px;
    object-fit: cover;
    &.vereins-img {
      height: 350px;
    }
  }

  h2, h3,
  > div {
    grid-column: content-start / content-end;
  }
}

.listing-style-span3-1 {
  max-width: calc((var(--max-content-width) - (var(--gap-3xl) * 2)) / 3);

  .brxe-text.fs22 {
    margin-bottom: var(--margin1-5);
  }

  @media (width <= 768px) {
    max-width: 100%;
    height: auto;
    padding: 0 2rem 1rem;
    /* border-bottom: 1px solid rgb(0 0 0 / 40%); */

    &:last-child {
      border-bottom: none;
    }
  }
}

.listing-style-span3-2 {
    max-width: calc((var(--max-content-width) - (var(--gap-xl) * 2)) / 3);

    img {
        margin-bottom: calc(var(--margin1-5) * 2);
    }

    .brxe-text.fs22 {
        margin-bottom: var(--margin1-5);
    }
}

.listing-plag {
  margin-top: var(--margin1-1);
  margin-bottom: var(--margin1);
  gap: var(--gap-m);
  align-items: center;
  font-weight: 600;
  line-height: 1.6em;
}

.listing-cat {
  background-color: var(--neutral-darkest-5);
  padding: 0.25rem 0.625rem;
  border-radius: var(--brd-radius-6);
}
.listing-place {
    padding: 0.25rem 0.625rem;
}

/** Abstände **/
.content-full.brxe-container {
    .brxe-button {
        margin-top: 0.5rem;
    }

}

.txt-margin-top-1 {
  margin-top: 0.5rem;
}
.txt-margin-top-1-5 {
    margin-top: var(--margin1-5);
}
.cont-padding-1 {
  padding-top:	 5rem;
  padding-bottom: 	5rem;
}

.brxe-button {
    font-weight: 500;
}

/** Border Styles **/
.btn-bdr {
  border-radius: var(--brd-radius-12);
  font-size: 1.2rem;
  line-height: 1.5em;
  
  &.btn-bg-white {
    background-color: var(--white);
    color: var(--neutral-dark);
  }
  &.btn-bg-red {
    background-color: var(--rewe-rot);
    color: var(--white);
  }
}
.btn-bdr-neutral {
  border: 1px solid transparent;
}
.btn-bdr-black {
  border: 1px solid var(--neutral-darkest);
}

/** Footer Style **/
.ftr-wrapper {
  display: flex;
  padding: 5rem 0;
  row-gap: 0;
  background-color: var(--footer-bg); /* Direkt hier integriert */

  .ftr-content {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: stretch;
    color: var(--footer-clr);

    &.gap-m {
      justify-content: space-between;
    }

    :where(.brxe-divider),
    :is(.ftr-trenner.vertical) {
      color: rgb(255 255 255 / 20%)
    }

    .c-trenner {
      margin: 28px 0;
    }

    /* --- MOBILE LOGIK START --- */
    @media (width <= 1280px) {
      --ftr-gap: 20px;
      gap: var(--ftr-gap);

      /* Hier überschreiben wir die festen Breiten von oben */
      :is(.ftr-logo, .ftr-adresse, .ftr-sitemap, .ftr-service, .design, .intocities, .wandlitz) {
        max-width: calc(50% - (var(--ftr-gap) / 2)) !important; 
        img {
          max-width: 300px;
          margin: 0 auto;
        }
      }

      .ftr-trenner {
        display: none;
      }

      @media (width <= 690px) {
        --ftr-gap: 0;
        .ftr-wrapper {
          width: 262px;
          margin: 0 auto;
        }
        :is(.ftr-logo, .ftr-adresse, .ftr-sitemap, .ftr-service, .design, .intocities, .wandlitz) {
          max-width: 100% !important;
        }
      }
    }
    /* --- MOBILE LOGIK ENDE --- */

    h3 {
      font-family: "Sora", serif;
      font-size: 26px;
      font-weight: 600;
      line-height: 36px;
    }

    /* Desktop Definitionen */
    .design, .intocities {
      max-width: 350px;
      width: 100%;
      gap: 10px;
    }
    .wandlitz {
      max-width: 300px;
      width: 100%;
    }

    .ftr-logo {
      max-width: 260px;
      width: 100%;
    }

    .ftr-adresse, .ftr-sitemap {
      max-width: 250px;
      width: 100%;
      gap: 12px;
    }

    .ftr-service {
      max-width: 280px;
      width: 100%;
      gap: 12px;
    }

    /* Deine Icons & Hover-Effekte */
    .ftr-adresse-kontakt {
      fill: var(--footer-red);
      .icon {
        height: 20px; width: 25px;
        svg { height: 20px; width: auto; }
      }
    }
    :is(.anfahrt, .ftr-adresse-kontakt, .ftr-service .brxe-icon-box) {
      position: relative;
      &::after {
          content: '';
          position: absolute; left: 0; bottom: 0;
          width: 0; height: 1px;
          background-color: var(--footer-red);
          transition: width 0.3s ease-in-out;
        }
        &:hover::after { width: 100%; }
    }

    .ftr-sitemap ul li {
      .content {
        display: flex;
        position: relative;
        padding-bottom: 3px;
        &::after {
          content: '';
          position: absolute; left: 0; bottom: 0;
          width: 0; height: 1px;
          background-color: var(--footer-red);
          transition: width 0.3s ease-in-out;
        }
        &:hover::after { width: 100%; }
      }
      .icon svg { fill: var(--footer-red); }
    }

    .ftr-trenner .line {
      margin: 0 39px 0 40px;
      border-right: 1px solid rgb(255 255 255 / 20%);
      height: 100%;
    }
  }
}

/* --- Unabhängige Utility Klassen & Spezial-Elemente --- */

.brxe-icon-box.anfahrt {
  width: 220px;
  justify-content: space-between;
  display: inline-flex;
  /* padding-bottom: 2px; */
  /* border-bottom: 1px solid var(--footer-red); */
  transition: all 0.2s ease;

  .content { font-weight: 500; }
  .icon svg { fill: var(--footer-red); }
  
  &:hover {
    /* padding-bottom: 1px; */
    /* border-bottom-width: 2px; */
  }
} 

.ftr-service-social {
  gap: 20px;
  li { padding: 0 !important; }
  svg g { stroke: var(--footer-red) !important; }
} 

/** Header Style **/
/* Grundzustand im Header-Template */
#brx-header {
  position: fixed;
  width: 100%;
  z-index: 100;
  height: min-content;
  transition: background-color 0.4s ease, padding 0.3s ease;

  :is(.hdr-wrapper, .hdr-content) {
    height: min-content;
  }
  
  /* Die Logos im Header */
  .rewe-logo {
    transition: transform 0.7s ease-in-out, width 0.7s ease-in-out;
    transform-origin: left top;
  }
  .slogan-wrapper {
    margin-top: -6px;
    transition: transform 0.7s ease-in-out, height 0.7s ease-in-out, margin 0.7 ease-in-out;
    transform-origin: left center;
  }

  /* Das Logo-Shrinking (via Scroll-Interaction) */
  &.scrolling .rewe-logo {
    width: 84px;
    /* transform: scale(0.5); */
    transform-origin: left top;
  }
  &.scrolling .slogan-wrapper {
    margin-top: 1rem;
    height: 50px;
    transform-origin: left center;
  }
}

.hdr-wrapper {
  display: flex;
  padding: 20px 0;
  background-color: rgb(0 0 0 / 65%); /* Am Anfang unsichtbar */

  &:not([data-past-hero="true"]) {
  /* background: rgb(0 0 0 / 65%); */
  background: transparent;
}

  .hdr-content {
    display: flex;
    flex-direction: row;
    max-width: 100%;
    width: 100%;
    padding: 0 20px;

    .hdr-logo-wrapper {
      display: flex;
      flex-direction: row;
      column-gap: 10px;
      width: max-content;
      .rewe-logo {
        width: 168px;
        height: auto;
      }
      .slogan-wrapper {
        display: flex;
        flex-direction: row;
        padding-top: 8px;
        column-gap: 10px;
        height: 75px;
        align-items: flex-end;

        .slogan {
          width: 214px;
          height: auto;
          margin-bottom: -6px;
        }
        .wappen {
          width: 33px;
          height: 38px;
        }
      }
    }
    .hdr-menu-wrapper {
      display: flex;
      align-items: flex-end;
      nav ul li {
        position: relative;
        &::after {
          content: '';
          position: absolute; left: 0; bottom: 0;
          width: 0; height: 2px;
          background-color: #fff;
          transition: width 0.3s ease-in-out;
        }
        &:hover::after { width: 100%; }

        &.current-menu-item::after {
          content: '';
          position: absolute; left: 0; bottom: 0;
          width: 100%; height: 2px;
          background-color: #fff;
        }

        a {
          font-weight: 600;
          padding: 0 5px;
        } 
      } 
    }
  }
}


/** Card Style Extra **/
.zukunft-wrapper {
  .zukunft-img img {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .zukunft-content {
    padding: 1.5rem;
  }
}

.all-eyes-on {
  img {
    margin-top: 1rem;
  }
}

/** Akkordion Style **/
.green-building {
  .brxe-block.listening {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgb(6 7 5 / 15%);

    &:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }
    .brxe-heading {
      font-family: "Sora", serif;
      font-variation-settings: 'wght' 600;
      font-size: 22px;
    }
    .accordion-content-wrapper {
      .brxe-text {
        margin-bottom: 1em;
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}

.brxe-button {
  &:hover {
    cursor: pointer;
  }
}

/** Tour Style **/
.itc-frontend-container {
  gap: 0;
  .itc-info-block {
    margin: 37px auto;
    .itc-info-text {
      font-size: 20px;
      font-variation-settings: 'wght' 600;
      text-align: center;
    }
  }
}
.itc-iframe-wrapper {
  border-radius: 1rem;
  overflow: hidden;
}
iframe.itc-main-iframe,
.itc-thumb-item {
  border: none;
  padding: 0;
  img {
    height: 165px;
    object-fit: cover;
  }
}
:is(iframe.itc-main-iframe) {
  border-radius: 2rem;
}
:is(.itc-thumb-img-wrapper) {
 border-radius: 1rem;
 overflow: hidden;
}
.itc-thumb-label {
  font-size: 20px;
}
.itc-slider-inner {
  gap: 30px;
}

.itc-iframe-wrapper{position:relative!important;}
.tour-hint-overlay{
  position:absolute;inset:0;z-index:20;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;background:transparent;
  transition:opacity .25s ease;
}
.tour-hint-overlay.is-hidden{opacity:0;pointer-events:none;}

.tour-hint-badge{
  display:flex;align-items:center;gap:12px;
  background:#f3ede4;border-radius:999px;
  padding:12px 22px;box-shadow:0 6px 20px rgba(0,0,0,.18);
  font-family:inherit;
}
 
.tour-hint-hand{font-size:22px;display:inline-block;line-height:1;}

/* Hand pendelt bei Hover auf Button ODER auf dem restlichen */
/* iFrame-Bereich – beides ist ja die gleiche Overlay-Fläche. */
.tour-hint-overlay:hover .tour-hint-hand{
  animation:tour-hint-swing .6s ease-in-out infinite;
}
@keyframes tour-hint-swing{
  0%,100%{transform:translateX(-7px);}
  50%{transform:translateX(7px);}
}
 
.tour-hint-text{display:flex;flex-direction:column;text-align:left;}
.tour-hint-text strong{font-size:14px;color:#2b2b2b;}
.tour-hint-text small{font-size:12px;color:#6b6b6b;}


@media (max-width: 1280px) {
  section {
    grid-template-columns: 
    [full-start] 1rem [content-start] calc(50% - var(--gap-4xl) / 2 - 1rem) [content-left-end] calc(var(--gap-4xl) / 2) [center] calc(var(--gap-4xl) / 2) [content-right-start] calc(50% - var(--gap-4xl) / 2 - 1rem) [content-end] 1rem [full-end];
    gap: 0;
  }
  /* .hero {
    height: 750px;
  } */
  .shoping-grid {
    grid-template-columns: 
    [full-start] 1rem [content-start] calc(50% - var(--gap-xl) / 2 - 1rem) [content-left-end] calc(var(--gap-xl) / 2) [center] calc(var(--gap-xl) / 2) [content-right-start] calc(50% - var(--gap-xl) / 2 - 1rem) [content-end] 1rem [full-end];
    gap: 0;
    row-gap: 2rem;
  }
  .basdorf-grid {
    margin-bottom: 2rem;
  }
  .c-reportage-container {
    >.content-box-left, >.content-box-right, >img {
      margin-top: 2rem;
    }
  }
  .reportage-grid {
    .info-box {
      margin-left: 2rem;
    }
  }
  .ib-style-1,
  .listing-style-span3-1 {
    max-width: calc(33% - var(--gap-xxl));
    margin: 0 auto;
  }
  .listing-gap-1,
  .gap2,
  .gap-m,
  .gap-xl {
    margin: 2rem auto;
    &.description {
      margin-top: 0;
      margin-left: 0;
    }
  }
  .content-box-left {
    grid-column: content-start / content-left-end;
  }
  .content-box-right,
  .img-box-right-m {
    grid-column: content-right-start / content-end;
  }
  .content-style-s.left {
    margin-top: 2rem;
  }
  .content-style-s.center {
    .description {
      margin-bottom: 2rem;
    }
  }
  .block-wrapper-3,
  .block-wrapper-4 {
    margin: 1.5rem auto;
  }
  .l-flex-container {
    &.full {
      padding: 0 1rem;
      gap: 5%;
      img {
        height: 120px;
      }
    }
  }
  .c-logo-container {
    padding-bottom: 0;
  }
}

@media (max-width: 991px) and (orientation: landscape){
  .hdr-header .hdr-content .hdr-logo-wrapper .rewe-logo {
    width: 90px;
  }
  .hdr-header.scrolling .hdr-content .hdr-logo-wrapper .rewe-logo {
    width: 50px;
  }
  section {
    grid-template-columns: 
    [full-start] 1rem [content-start] calc(50% - var(--gap-xl) / 2 - 1rem) [content-left-end] calc(var(--gap-xl) / 2) [center] calc(var(--gap-xl) / 2) [content-right-start] calc(50% - var(--gap-xl) / 2 - 1rem) [content-end] 1rem [full-end];
    gap: 0;
  }

  .hero {
    height: 700px;
  }
  
  .padding-reset {
    padding: 2rem 0;
  }
  .listing-style-span3,
  .listing-style-span3-1 {
    display: flex;
    max-width: 100%;
    img {
      height: 400px;
      width: 100%;
      object-fit: cover;
      top: 0;
    }
    h3, .brxe-text-basic {
      padding: 0 1rem;
    }
  }
  .block-wrapper-content-3 img {
    width: 100%;
    height: 300px;
  }
  .block-wrapper-3,
  .main-grid-container.gtc-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .list-m li {
    align-items: start;
    column-gap: 0.5rem;
    svg {
      margin-top: 0.25rem!important;
    }
  }
  .list-m li span {
    align-items: start;
    column-gap: 0.5rem;
    img.emoji {
      margin-top: 0.25rem!important;
    }
  }
  :is(.listing-style-wrapper img) {
    height: 450px !important;
  }
  :is(img.emoji) {
    height: auto !important;
  }
  .geschichte-img {
    width: 250px !important;
  }
  .c-card-team-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem !important;
  }
  .listing-plag {
    padding: 0 1rem;
  }
  .l-flex-container {
    &.full {
      padding: 0 1rem;
      gap: 5%;
      img {
        height: 90px;
      }
    }
  }
}

/** Das sind wir Teamfoto-Sektion **/
.l-style-team {
  container-name: team;
  container-type: inline-size;
}
.team {
  display: flex;
  gap: 1rem;
}
@container team (min-width: 600px) {
  .team {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;

    :is(.teaser, .section-headline, .tag, .description) {
      /* grid-column: 1 / 3; ersetzt | robuster wenn die spaltenzahl verändert wird */
      grid-column: 1 / -1; /* rubuster */
    }
    :is(.img-1, .img-2) {
      grid-row: 4 / 5;
    }

    .teaser {grid-row: 1 / 2;}
    .section-headline {grid-row: 2 / 3;}
    .tag.big-1 {grid-row: 3 / 4;}
    .tag.big-2 {grid-row: 6 / 7;}
    .img-1 {grid-column: 1 / 2;}
    .img-2 {grid-column: 2 / 3;}
    .description {grid-row: 5 / 6;}
  }
}

@container team (min-width: 991px) {
  .team {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(137, 8px);
    column-gap: 4rem;
    row-gap: 0;

    :is(.teaser, .section-headline, .big-1) {
      grid-column: 1 / 3;
    }
    :is(.img-1, .description, .big-2) {
      grid-column: 3 / 5;
    }
    :is(.img-1, .img-2) {
      img {
        aspect-ratio: 1 / 1;
        object-fit: cover;
        height: 296px;
      }
    }
    .teaser {grid-row: 1 / 4;}
    .section-headline {grid-row: 6 / 28;font-size: 48px;}
    .tag.big-1 {grid-row: 36 / 92;}
    .img-2 {grid-column: 2 / 3;grid-row: 100 / 137;}
    .img-1 {grid-column: 3 / 4;grid-row: 1 / 38;}
    .description {grid-row: 46 / 59;}
    .tag.big-2 {grid-row: 67 / 123;}
    :is(.tag.big-1, .tag.big-2) {
      img {
        height: 445px;
        object-fit: cover;
      }
    }
  }
}

@media (max-width: 768px) {

  .description {
    font-size: 14px;
  }
  /* header */
  #brx-header {
    .hdr-wrapper .hdr-content {
      flex-wrap: nowrap;
      align-items: end;
      .hdr-logo-wrapper {
        .rewe-logo {
          width: 100px;
        }
        .slogan-wrapper {
          display: none;
        }
      }
    }
    &.scrolling .rewe-logo {
      width: 50px !important;
    }
  }

  /* content */
  section {
    display: flex;
    flex-direction: row;
    padding: 5rem 0;
    gap: 2rem;

    &.padding-reset {
      padding: 5rem 1rem;
    }
    .brxe-container {
      padding: 0 1rem;

      &.parallax-image {
        padding: 0;
      }
    }
  }
  .block-wrapper-3,
  .block-wrapper-4,
  .main-grid-container {
    display: flex;
    row-gap: 2rem;
    &.gap-3xl {
      gap: 2rem;
    }
  }
  .ib-cont {
    display: flex;
    flex-direction: column!important;
    margin: 2rem auto;
  }
  .ib-style-1 {
    max-width: 100%;
    width: 100%;
    margin: auto;
  }
  .listing-style-span3-1 {
    max-width: 100%;
    height: auto;
    padding: 0 1rem 1rem;
    position: relative;

    .brxe-text-basic {
      margin-bottom: 2rem;
    }
    
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 30px;

      width: calc(100% - 60px);
      height: 1px;
      background-color: rgb(0 0 0 / 20%);
    }

    &:last-child::after {
      
      height: 0;
    }
  }
  .listing-style-span3-2 {
    max-width: 100%;
    height: auto;
  }
  .fs22 {
    font-size: 18px;
  }
  .content-style-s.center {
    .brxe-heading,
    .brxe-text-basic {
      text-align: center;
    }
  }
  .markt-einblick {
    gap: 1rem;
  }
  .ib-style-normal {
    flex: none;
    width: 47%;
    display: grid;
    .content {
      align-items: center;
      p {
        text-align: center!important;
      }
    }
  }
  :is(.img-box-left-xl, .img-box-right-xl, .zukunft-img, .hero) {
    &::after {
      border-radius: 1rem 0 1rem 0;
      width: 30px;
      height: 30px;
    }
  }
  .tour {
    padding: 0;
  }
  .shoping-grid, .gast-grid, .basdorf-grid, .reportage-grid {
    display: flex;
    width: 100%;
    :is(.content-box-left, .content-box-right) {
      width: 100%;
    }
    .img-1 {
      margin-bottom: 2rem;
    }
    .geschichte-img {
      margin-bottom: 0.75rem;
    }
    .time-area {
      gap: 0.5rem;
      .area.teaser {
        font-size: 12px;
      }
    }
  }
  .basdorf-grid {
    h3 {
      width: 100%;
      text-align: left;
      margin: 0.5rem 0;
      font-size: 18px;
    }
    .description {
      font-size: 14px;
    }
  }
  .reportage-grid {
    .description.italic {
      text-wrap: balance;
    }
    .info-box {
      margin-top: 1rem;
      margin-left: 0;
      max-width: 100%;
      width: 100%;
    }
  }
  .img-height-m,
  .img-height-l {
    display: block;
    height: auto;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 1rem;
    border-radius: 2rem;
  }
  .img-box-left-xl {
    &.img-height-2xl {
      min-height: 400px;
    }
  }
  :is(.listing-style-content-xl) {
    height: auto;
    img {
      height: 250px!important;
      &.emoji {
        height: auto!important;
      }
    }
    .specials .brxe-text, img {
      max-width: 100%!important;
    }
  }
  .info-box-wrapper {
    width: 100%;
    .info-box {
      width: 100%;
    }
  }
  .list-m li span {
    align-items: start;
    column-gap: 0.5rem;
    img.emoji {
      margin-top: 0.25rem !important;
    }
  }
  .c-card-team-container .block-wrapper-content-3 {
    /* border: 1px solid rgb(0 0 0 / 40%); */
    padding: 0.5rem;
    border-radius: 1rem;
    justify-items: center;
    text-align: center;
  }

  .geschichte-img {
    max-width: 100% !important;
  }

  /* AI Icon */
  :is(.c-ai-content, [data-ai-label="true"]) {
    &::after {
      width: 30px;
      height: 30px;
    }
  }

  /* footer */
  .brxe-icon-box .icon {
    width: 100%;
  }
  .img-box-right-m {
    padding: 1rem;
  }
  :is(.angebote, .rezepte, .rewe-de) {
    .icon {
      width: min-content;
    }
  }
  #itc-tour-1 .itc-slider-inner {
    width: var(--itc-min-w);
    margin: 0 auto;
  }
  .l-flex-container {
    &.full {
      img {
        height: 60px;
      }
    }
  }
  .haltung .content {
    :is(h2, h3, h4, p) {
      text-align: center!important;
    }
  }
  .shoping-grid .icon {
    align-items: start!important;
    width: min-content;
  }
  .shoping-grid .content {
    align-items: start!important;
    .ib-style-normal {}
    :is(h4, p){text-align: left!important;}
  }
  :is(.c-ai-content.ai-extra) {
    padding: 0!important;
    margin: 0 1rem;

    img {
      padding: 0!important;
    }
  } 
  :is(.ib-wrapper.wir) {
    .brxe-icon-box {
      h4, p {
        text-align: center!important;
      }
    }
  }
  .brd-rd-m {
    border-radius: 2rem;
  }
  .hero[data-ai-label="true"]::after,
  .zukunft-wrapper .zukunft-img[data-ai-label="true"]::after {
    border-radius: 1rem 0 0 0;
  }
  .kontakt-daten .icon {
    width: min-content;
  }
  .brxe-icon-box.anfahrt {
    width: 100%;
    .icon {
      width: min-content;
    }
  }
  .ftr-content, .c-law-content {
    --line-clr-normal: #fdfdfd;
    --line-clr: rgb(from var(--line-clr-normal) r g b / 20%);
    --p-clr-normal: #ffffff;
    --p-clr: rgb(from var(--p-clr-normal) r g b / 78%);

    width: 262px !important;
    margin: 0 auto;
    padding: 0 !important;

    .c-trenner {
      display: none;
    }

    .ftr-logo {
      justify-content: center;
      align-items: center;
      position: relative;

      .tag {
        height: 180px !important;
        width: auto !important;
      }
      .basdorf-logo {
        height: 60px !important;
      }
      .basdorf-wappen {
        margin: auto;
      }
    }
  }
  .ftr-service .brxe-icon-box .icon {
    width: min-content;
  }
  :is(.design, .intocities, .wandlitz) {
    h3 {
      font-size: 16px !important;
      text-align: center;
    }
    a.tag {
      max-width: 262px;
      width: 100% !important;
      height: auto !important;
      img {
        width: 262px !important;
        height: auto !important;
      }
    }
  }
  .brxe-icon-box.anfahrt, .ftr-sitemap ul li {
    width: 220px;
  }
  .brxe-icon-box.anfahrt::after {
    width: 100% !important;
  }
  .ftr-service-social {
    margin: 8px auto 0;
    li.has-link a {
      padding: 0 !important;
    }
  }
  .ftr-wrapper .ftr-content .c-trenner {
    margin: 20px 0;
  }

  footer#brx-footer [class^="ftr-"], footer#brx-footer [class*="ftr-"] {
    h3 {
      position: relative;
      width: 100%;
      margin-top: 50px;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: -20px;
        width: 100%;
        height: 1px;
        background-color: var(--line-clr);
      }
    }
    p, .brxe-text-basic {
      color: var(--p-clr);
    }
    .wandlitz .tag {
      position: relative;
      max-width: 262px;
      width: 100%;
      margin: 50px 0;
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: -30px;
        width: 100%;
        height: 1px;
        background-color: var(--line-clr);
      }
      &::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -30px;
        width: 100%;
        height: 1px;
        background-color: var(--line-clr);
      }
    }
  }
  .c-law-content {
    align-items: center !important;
    gap: 20px;
    .brxe-text-basic {
      color: rgb(from var(--p-clr-normal) r g b / 70%) !important;
      text-align: center;
      font-size: 14px !important;
      margin: 0 !important;
    }
    ul#menu-rechtliches {
      gap: 15px;

      li {
        width: 100%;
        margin: 0;

        a {
          width: 100%;
          justify-content: center;
        }
      }
    }
  }

  .hdr-wrapper .hdr-content .hdr-menu-wrapper nav ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 20px;

    li {
    
      a {
        font-size: 26px !important;
        line-height: 36px !important;
      }

      &.current-menu-item::after {
        background-color: var(--rewe-rot);
        width: 60px;
        height: 5px;
        left: 50%;
        bottom: -10px;
        transform: translateX(-50%);
      }
    }
  }
}

@media (max-width: 600px) {
  .l-flex-container {
    &.full {
      img {
        height: 50px;
      }
    }
  }
}