:root{
  --bg:#f6f2eb;
  --paper:#ffffff;
  --text:#202020;
  --muted:#706d68;
  --line:#d6d0c8;
  --soft:#eee8e0;
  --ph:#d1d1d1;
  --ph-dark:#bababa;
  --grain:#d7cfbf;
  --max:1220px;
  --mat:12px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  color:var(--text);
  font-family:Arial, Helvetica, sans-serif;
  line-height:1.6;
  background-color:#f4efe6;
  background-image:url("grain.png");
  background-repeat:repeat;
}

a{color:inherit}

.site-header{
  max-width:var(--max);
  margin:0 auto;
  padding:30px 28px 22px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
}

.brand{
  text-decoration:none;
  display:flex;
  flex-direction:column;
  line-height:1.05;
}

.brand-main{
  display:inline-flex;
  align-items:baseline;
  font-size:2rem;
  line-height:1;
  letter-spacing:-0.04em;
}

.brand-herz{
  color:#b13a2f; /* HERZFOTOS-LOGO: warmes Rot – Farbwert hier selbst aendern */
  font-weight:700;
  letter-spacing:-0.045em;
}

.brand-fotos{
  color:#111;
  font-weight:300;
  letter-spacing:-0.035em;
}

.brand-sub{
  margin-top:6px;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--muted);
}

.main-nav{
  display:flex;
  gap:26px;
  flex-wrap:wrap;
}

.main-nav a{
  text-decoration:none;
  font-size:.95rem;
}

.main-nav a:hover,
.quiet-link:hover,
.footer-links a:hover{
  text-decoration:underline;
  text-underline-offset:4px;
}

.hero{
  max-width:var(--max);
  margin:0 auto;
  padding:12px 28px 84px;
}

/* Hero mit ganz feinem schwarzem Rand */
.hero-image{
  aspect-ratio:16/9;
  min-height:0;
  border:1px solid #111;
}

.placeholder{
  width:100%;
  height:100%;
  background:linear-gradient(135deg,var(--ph),var(--ph-dark));
  color:#666;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* "Papierabzug": weißer Rand + haarfeine äußere Linie */
.photo-frame{
  background:var(--paper);
  padding:var(--mat);
  border:1px solid var(--line);
}

.photo-frame > .placeholder{
  min-height:100%;
}

.hero-copy{
  max-width:760px;
  margin:40px auto 0;
  text-align:center;
}

.eyebrow{
  margin:0 0 12px;
  text-transform:uppercase;
  letter-spacing:.17em;
  font-size:.76rem;
  color:var(--muted);
}

h1,h2{
  margin:0;
  font-family:Georgia, "Times New Roman", serif;
  font-weight:400;
  line-height:1.08;
}

h1{
  font-size:clamp(2.5rem,6vw,5.2rem);
  letter-spacing:-.035em;
}

h2{
  font-size:clamp(2rem,4vw,3.35rem);
  letter-spacing:-.025em;
}

.intro{
  max-width:620px;
  margin:22px auto 0;
  font-size:1.13rem;
  color:#494949;
}

.section{
  max-width:var(--max);
  margin:0 auto;
  padding:90px 28px;
}

.section-head{
  max-width:760px;
  margin-bottom:42px;
}

.section-head p:last-child,
.text-block p,
.contact-box p{
  color:#4e4e4e;
}

.story-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:22px;
  grid-auto-flow:dense;
}

.ph-tall{
  grid-row:span 2;
  min-height:640px;
}

.ph-wide,
.ph-square{
  min-height:310px;
}

.quiet-link-wrap{
  margin-top:26px;
  text-align:right;
}

.quiet-link{
  text-decoration:none;
  border-bottom:1px solid var(--text);
  padding-bottom:2px;
}

.soft{
  max-width:none;
  background-color:#ebe3d8;
  background-image:url("grain.png");
  background-repeat:repeat;
}

.soft > *{
  max-width:var(--max);
  margin-left:auto;
  margin-right:auto;
}

.narrow{max-width:620px}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.gallery-grid .photo-frame{
  aspect-ratio:4/3;
}

.split{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
  align-items:center;
}

.portrait-frame{
  min-height:560px;
}

.portrait{
  min-height:534px;
}

.text-block{
  max-width:560px;
}

.contact{
  padding-top:70px;
  padding-bottom:100px;
}

.contact-box{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:60px 0;
  text-align:center;
}

.contact-box p{
  max-width:560px;
  margin:18px auto 28px;
}

.button{
  display:inline-block;
  text-decoration:none;
  border:1px solid var(--text);
  padding:13px 20px;
  border-radius:999px;
}

.button:hover{
  background:var(--text);
  color:white;
}

.site-footer{
  max-width:var(--max);
  margin:0 auto;
  padding:28px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:30px;
  color:#5b5b5b;
  font-size:.9rem;
}

.site-footer > div:first-child{
  display:flex;
  gap:8px;
  flex-direction:column;
}

.footer-links{
  display:flex;
  gap:20px;
}

.footer-links a{text-decoration:none}

@media (max-width:800px){
  :root{ --mat:7px; }

  .site-header{
    align-items:flex-start;
    flex-direction:column;
  }

  .main-nav{gap:18px}

  .hero{padding-bottom:58px}

  .section{
    padding-top:64px;
    padding-bottom:64px;
  }

  .story-grid,
  .gallery-grid,
  .split{
    grid-template-columns:1fr;
  }

  .ph-tall,
  .ph-wide,
  .ph-square,
  .portrait-frame{
    min-height:340px;
  }

  .portrait{min-height:326px}

  .site-footer{flex-direction:column}
}


/* --- Echte Fotos im ersten Mockup --- */
figure{
  margin:0;
}

.hero-photo{
  margin:0;
  border:1px solid #111;
  background:#fff;
  line-height:0;
}

.hero-photo img{
  width:100%;
  height:auto;
  display:block;
}

.real-photos{
  align-items:start;
}

.photo-frame img{
  width:100%;
  height:auto;
  display:block;
}

.real-photos .photo-frame,
.preview-gallery .photo-frame{
  min-height:0;
}

.real-photos .tall{
  grid-row:span 2;
}

.preview-gallery .photo-frame{
  aspect-ratio:auto;
}

.placeholder-holder{
  min-height:260px;
}

.placeholder-holder .placeholder{
  min-height:236px;
}

@media (max-width:800px){
  .real-photos .tall{
    grid-row:auto;
  }

  .placeholder-holder{
    min-height:220px;
  }

  .placeholder-holder .placeholder{
    min-height:206px;
  }
}


/* --- Klickbare Großansicht / Lightbox --- */
.zoomable{
  cursor:zoom-in;
  outline:none;
}

.zoomable:focus-visible{
  outline:2px solid #222;
  outline-offset:4px;
}

body.lightbox-open{
  overflow:hidden;
}

.lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4vh 4vw;
  background:rgba(20,18,16,.90);
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease, visibility .18s ease;
}

.lightbox.is-open{
  opacity:1;
  visibility:visible;
}

.lightbox-image{
  display:block;
  width:auto;
  max-width:92vw;
  height:auto;
  max-height:90vh;
  object-fit:contain;
  background:#fff;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 18px 60px rgba(0,0,0,.35);
}

.lightbox-close{
  position:absolute;
  top:18px;
  right:24px;
  width:44px;
  height:44px;
  border:0;
  background:transparent;
  color:#fff;
  font:300 42px/1 Georgia, serif;
  cursor:pointer;
}

.lightbox-close:focus-visible{
  outline:1px solid #fff;
  outline-offset:2px;
}

@media (max-width:800px){
  .lightbox{
    padding:3vh 3vw;
  }

  .lightbox-image{
    max-width:94vw;
    max-height:88vh;
  }

  .lightbox-close{
    top:8px;
    right:10px;
  }
}


/* --- Unterseite "Hochzeiten" / editorial album layout --- */
.main-nav .current{
  border-bottom:1px solid currentColor;
  padding-bottom:3px;
}

.gallery-intro{
  max-width:760px;
  margin:0 auto;
  padding:82px 28px 62px;
  text-align:center;
}

.gallery-title{
  font-size:clamp(2.7rem,6vw,5.4rem);
}

.gallery-intro > p:not(.eyebrow){
  max-width:630px;
  margin:22px auto 0;
  color:#4e4e4e;
}

.gallery-hint{
  font-size:.86rem;
  letter-spacing:.04em;
}

.album{
  max-width:1180px;
  margin:0 auto;
  padding:0 28px 80px;
}

.album-row{
  margin:0 auto 38px;
}

.album-row.pair{
  display:flex;
  gap:28px;
  align-items:flex-start;
}

.album-row.pair .photo-frame{
  flex:1 1 0;
}

.album-row.single-wide{
  width:100%;
}

.album-row.single-narrow{
  width:72%;
}

.album-row.single-narrow.left{
  margin-left:0;
  margin-right:auto;
}

.album-row.single-narrow.right{
  margin-left:auto;
  margin-right:0;
}

.gallery-photo{
  min-height:0;
}

.gallery-photo img{
  width:100%;
  height:auto;
  display:block;
}

.portrait-photo{
  max-width:520px;
}

.album-row.pair .portrait-photo{
  flex-grow:.72;
}

.back-home{
  max-width:1180px;
  margin:0 auto;
  padding:0 28px 90px;
  text-align:center;
}

@media (max-width:800px){
  .gallery-intro{
    padding-top:54px;
    padding-bottom:44px;
  }

  .album{
    padding-left:18px;
    padding-right:18px;
  }

  .album-row{
    margin-bottom:22px;
  }

  .album-row.pair{
    gap:14px;
  }

  /* Auf schmalen Geräten bleiben manche Paare nebeneinander,
     sehr schmale Displays wechseln auf eine Spalte. */
  .album-row.single-narrow{
    width:88%;
  }
}

@media (max-width:520px){
  .album-row.pair{
    display:block;
  }

  .album-row.pair .photo-frame + .photo-frame{
    margin-top:18px;
  }

  .album-row.single-narrow{
    width:100%;
  }

  .portrait-photo{
    max-width:none;
  }
}


/* --- Laufendes Bildband im Hero --- */
.hero-with-carousel{
  max-width:none;
  padding-left:0;
  padding-right:0;
}

.hero-with-carousel .hero-copy{
  padding-left:28px;
  padding-right:28px;
}

.hero-carousel-shell{
  position:relative;
  width:100%;
  overflow:hidden;
  padding:10px 0 4px;
}

.hero-carousel{
  position:relative;
  width:100%;
  overflow:hidden;
  touch-action:pan-y;
  cursor:grab;

  /* Weiches Ausblenden der Bilder an beiden Seiten */
  -webkit-mask-image:linear-gradient(
    to right,
    transparent 0%,
    #000 6%,
    #000 94%,
    transparent 100%
  );
  mask-image:linear-gradient(
    to right,
    transparent 0%,
    #000 6%,
    #000 94%,
    transparent 100%
  );
}

.hero-carousel.is-dragging{
  cursor:grabbing;
}

.hero-track{
  display:flex;
  align-items:center;
  gap:24px;
  width:max-content;
  will-change:transform;
  user-select:none;
}

.hero-slide{
  flex:0 0 auto;
  height:clamp(450px, 58.5vw, 795px);
  margin:0;
  padding:7px;
  background:#fff;
  border:1px solid #181818;
  line-height:0;
}

.hero-slide img{
  display:block;
  width:auto;
  height:100%;
  max-width:none;
  object-fit:contain;
  pointer-events:auto;
  -webkit-user-drag:none;
}

.hero-slide.portrait-slide{
  height:clamp(450px, 58.5vw, 795px);
}

.carousel-hint{
  margin:9px 0 0;
  text-align:center;
  color:#817a70;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.13em;
}

@media (max-width:800px){
  .hero-track{
    gap:14px;
  }

  .hero-slide,
  .hero-slide.portrait-slide{
    height:clamp(345px, 96vw, 510px);
    padding:5px;
  }

  .hero-carousel{
    -webkit-mask-image:linear-gradient(
      to right,
      transparent 0%,
      #000 4%,
      #000 96%,
      transparent 100%
    );
    mask-image:linear-gradient(
      to right,
      transparent 0%,
      #000 4%,
      #000 96%,
      transparent 100%
    );
  }

  .carousel-hint{
    font-size:.6rem;
  }
}

@media (prefers-reduced-motion: reduce){
  .carousel-hint{
    display:none;
  }
}


/* --- Reparaturen für Firefox / Windows beim Laufband --- */
.hero-carousel,
.hero-track,
.hero-slide,
.hero-slide img{
  -webkit-user-select:none;
  user-select:none;
}

.hero-carousel{
  cursor:grab;
  overscroll-behavior-x:contain;
}

.hero-carousel.is-dragging{
  cursor:grabbing !important;
}

.hero-slide img{
  cursor:zoom-in;
  -webkit-user-drag:none;
  user-drag:none;
}

.hero-carousel.is-dragging .hero-slide img{
  cursor:grabbing;
}


/* --- Hero-Band: keine Vergrößerungsfunktion mehr --- */
.hero-carousel .hero-slide img{
  cursor:inherit;
}

.hero-carousel:not(.is-dragging) .hero-slide img{
  cursor:grab;
}

.hero-carousel.is-dragging .hero-slide img{
  cursor:grabbing;
}


/* --- Korrektur: alle Bilder im Laufband exakt gleich hoch --- */
.hero-slide,
.hero-slide.portrait-slide{
  height:clamp(450px, 58.5vw, 795px);
}

/* --- Feststehende Kopfzeile beim Scrollen --- */
.site-header{
  position:sticky;
  top:0;
  z-index:5000;

  /* Über die gesamte Browserbreite, Inhalt bleibt optisch an der bisherigen Achse */
  max-width:none;
  margin:0;
  padding-left:max(28px, calc((100vw - var(--max)) / 2 + 28px));
  padding-right:max(28px, calc((100vw - var(--max)) / 2 + 28px));

  background:rgba(246,242,235,.96);
  border-bottom:1px solid rgba(120,110,95,.20);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}

/* Auf kleinen Bildschirmen gleiche Höhe der Laufbandbilder */
@media (max-width:800px){
  .hero-slide,
  .hero-slide.portrait-slide{
    height:clamp(345px, 96vw, 510px);
  }

  .site-header{
    padding-left:28px;
    padding-right:28px;
  }
}


/* --- Kopfzeile: reduziert, randnah, gleicher Hintergrund wie die Seite --- */
.site-header{
  position:sticky;
  top:0;
  z-index:5000;

  width:100%;
  max-width:none;
  margin:0;

  /* Inhalt bewusst sehr nah an den Browserrändern */
  padding:16px 18px 14px;

  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;

  /* exakt derselbe Grundhintergrund wie die übrige Seite */
  background-color:#f4efe6;
  background-image:url("grain.png");
  background-repeat:repeat;

  border-bottom:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

.brand-main{
  font-size:4rem;
  line-height:.92;
  letter-spacing:-0.055em;
}

.brand-sub{
  margin-top:8px;
  font-size:.82rem;
}

.main-nav{
  margin-left:auto;
  display:flex;
  align-items:flex-end;
  gap:0;
}

.main-nav a{
  font-size:1rem;
  text-decoration:none;
  white-space:nowrap;
}

/* Keine "current"-Markierung mehr, da nur Kontakt übrig ist */
.main-nav .current{
  border-bottom:none;
  padding-bottom:0;
}

@media (max-width:800px){
  .site-header{
    padding:12px 12px 10px;
    flex-direction:row;
    align-items:flex-end;
  }

  .brand-main{
    font-size:clamp(2.55rem, 12vw, 4rem);
  }

  .brand-sub{
    font-size:.68rem;
  }

  .main-nav{
    margin-left:auto;
  }

  .main-nav a{
    font-size:.9rem;
  }
}

/* --- Laufband: kein weißes Passepartout mehr, nur haarfeiner schwarzer Rand --- */
.hero-slide,
.hero-slide.portrait-slide{
  padding:0;
  background:transparent;
  border:1px solid #111;
}

@media (max-width:800px){
  .hero-slide,
  .hero-slide.portrait-slide{
    padding:0;
  }
}

/* --- Automatisch aus Ordnern erzeugte Galerien --- */
.auto-gallery-section{
  max-width:none;
  padding-top:74px;
  padding-bottom:78px;
}

/* Überschriften der drei unteren Galerien mittig und möglichst einzeilig. */
.auto-gallery-section .section-head{
  max-width:none;
  margin:0 auto 42px;
  text-align:center;
}

.auto-gallery-section .section-head h2{
  white-space:nowrap;
}

/* Desktop: vier quadratische Vorschauen à 300 × 300 px pro Reihe. */
.auto-gallery-grid{
  width:min(1260px, calc(100% - 56px));
  margin:34px auto 0;
  display:grid;
  grid-template-columns:repeat(4, 300px);
  justify-content:center;
  gap:20px;
  align-items:start;
}

/* Kein weißes Passepartout: nur die feine schwarze Linie. */
.auto-gallery-photo,
.auto-album-photo,
.gallery-photo{
  padding:0;
  background:transparent;
  border:1px solid #111;
  line-height:0;
}

/* Die drei unteren Galerien verwenden quadratische Vorschaubilder.
   Angezeigt wird nur die Vorschau; in der Lightbox wird das zugehörige
   große Original geladen. */
.auto-gallery-photo{
  width:300px;
  max-width:300px;
  aspect-ratio:1 / 1;
  overflow:hidden;
  justify-self:center;
}

.auto-gallery-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.auto-album-photo img{
  width:100%;
  height:auto;
  display:block;
}

.auto-gallery-link{
  margin:0 auto 40px;
  text-align:center;
}

.empty-gallery{
  max-width:720px;
  margin:40px auto;
  text-align:center;
}

@media (max-width:1320px){
  .auto-gallery-grid{
    width:min(940px, calc(100% - 56px));
    grid-template-columns:repeat(3, 300px);
  }
}

@media (max-width:1000px){
  .auto-gallery-grid{
    width:min(620px, calc(100% - 40px));
    grid-template-columns:repeat(2, 300px);
  }
}

@media (max-width:680px){
  .auto-gallery-grid{
    width:300px;
    max-width:calc(100% - 32px);
    grid-template-columns:300px;
  }

  .auto-gallery-section .section-head h2{
    font-size:clamp(1.65rem, 8vw, 2.2rem);
  }
}

/* --- Kontakt: bewusst nicht klickbare, gegen einfache Bots verfremdete Mailadresse --- */
.contact-address{
  cursor:text;
  user-select:text;
}

.contact-address:hover{
  background:transparent;
  color:inherit;
}

/* --- Reduzierter Footer mit aufklappbaren Rechtstexten --- */
.site-footer.legal-footer{
  max-width:none;
  margin:0;
  padding:0;
  border:0;
  display:block;
  background:transparent;
  color:#111;
  font-size:.9rem;
}

.legal-footer-row{
  width:100%;
  padding:24px 28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
}

.legal-toggle{
  appearance:none;
  -webkit-appearance:none;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:#111;
  font:inherit;
  cursor:pointer;
}

.legal-toggle:hover,
.legal-toggle:focus-visible{
  text-decoration:underline;
  text-underline-offset:4px;
}

.legal-toggle:focus-visible{
  outline:1px solid #111;
  outline-offset:5px;
}

.legal-panel{
  background:transparent;
  color:#111;
}

.legal-panel[hidden]{
  display:none;
}

.legal-panel-inner{
  min-height:110px;
  max-width:var(--max);
  margin:0 auto;
  padding:30px 28px 50px;
}

@media (max-width:800px){
  .site-footer.legal-footer{
    flex-direction:initial;
  }

  .legal-footer-row{
    padding:20px 18px;
  }

  .legal-panel-inner{
    padding:26px 18px 42px;
  }
}


/* --- Footer-Korrektur: alte Footer-Regeln vollständig überschreiben --- */
.site-footer.legal-footer > .legal-footer-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  flex-direction:row;
  width:100%;
  box-sizing:border-box;
  align-items:center;
  gap:24px;
}

.site-footer.legal-footer .legal-toggle{
  all:unset;
  box-sizing:border-box;
  display:inline-block;
  color:#111;
  font:inherit;
  line-height:1.3;
  cursor:pointer;
}

.site-footer.legal-footer .legal-toggle:first-child{
  justify-self:start;
  text-align:left;
}

.site-footer.legal-footer .legal-toggle:last-child{
  justify-self:end;
  text-align:right;
}

.site-footer.legal-footer .legal-toggle:hover,
.site-footer.legal-footer .legal-toggle:focus-visible{
  color:#111;
  background:transparent;
  text-decoration:underline;
  text-underline-offset:4px;
}

.site-footer.legal-footer .legal-toggle:focus-visible{
  outline:1px solid #111;
  outline-offset:5px;
}


/* --- Datenschutzerklärung und größere Footer-Links --- */
.site-footer.legal-footer .legal-toggle{
  font-size:1.06rem;
}

.legal-text{
  max-width:900px;
  line-height:1.65;
}

.legal-text h2{
  margin:0 0 34px;
  font-size:clamp(1.8rem, 3vw, 2.4rem);
}

.legal-text section + section{
  margin-top:30px;
}

.legal-text h3{
  margin:0 0 10px;
  font-family:inherit;
  font-size:1.05rem;
  font-weight:600;
  line-height:1.35;
}

.legal-text p{
  margin:0 0 12px;
  color:#2d2d2d;
}

.legal-note{
  font-size:.92em;
  color:#555;
}


/* --- Lokale SEO-Einstiegszeile, bewusst im bestehenden Editorial-Stil --- */
.hero-copy h1{
  max-width:980px;
  margin-left:auto;
  margin-right:auto;
  font-size:clamp(2.15rem,4.6vw,4.35rem);
}

.hero-claim{
  margin:22px auto 0;
  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(1.45rem,2.7vw,2.25rem);
  line-height:1.12;
  letter-spacing:-.02em;
  color:#2b2b2b;
}

.hero-copy .intro{
  max-width:820px;
  line-height:1.65;
}

@media (max-width:700px){
  .hero-copy h1{font-size:clamp(2rem,10vw,3rem)}
  .hero-claim{margin-top:18px}
  .hero-copy .intro{font-size:1.02rem}
}

/* --- Über mich: zentrierter Aufbau mit quadratischem Portrait --- */
.about-section{
  display:block;
  text-align:center;
}

.about-content{
  max-width:680px;
  margin:0 auto;
  text-align:center;
}

.about-content .eyebrow{
  text-align:center;
  margin-bottom:22px;
}

.about-photo{
  width:200px;
  height:200px;
  display:block;
  margin:0 auto 28px;
  object-fit:cover;
  border:1px solid #111;
}

.about-content h2{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  font-size:clamp(1.5rem,3vw,2.5rem);
}

.about-content p{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}



/* --- Kleine Anpassungen 08.09.2026 --- */
.contact-box h2{
  font-size:clamp(1rem,2vw,1.675rem);
}


/* --- Kontaktadresse als Bild --- */
.contact-address-image{
  display:block;
  width:min(376px, 100%);
  height:auto;
  margin:18px auto 0;
  border:0;
  box-shadow:none;
  outline:none;
}