* {
  box-sizing:border-box
}

body {
  margin:0;
  background:#f7f6f2;
  color:#20242c;
  font-family:Arial,Helvetica,sans-serif
}

main {
  width:min(1760px,calc(100% - 64px));
  margin:70px auto
}

.eyebrow {
  font-size:11px;
  letter-spacing:.16em;
  font-weight:700;
  color:#5a6573
}

h1 {
  font-size:clamp(40px,5vw,72px);
  line-height:1.02;
  letter-spacing:-.055em;
  margin:24px 0
}

p {
  line-height:1.6
}

.lead {
  color:#5a6573;
  max-width:60ch;
  font-size:17px
}

.templates {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:24px;
  margin-top:45px
}

article {
  border:1px solid #d8dbe0;
  border-radius:16px;
  overflow:hidden;
  background:#fff
}

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

img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/2;
  object-fit:cover
}

.gallery-card-copy {
  padding:22px 20px
}

article span {
  font-size:10px;
  font-weight:700;
  color:#647184;
  letter-spacing:.08em
}

h2 {
  font-size:32px;
  line-height:1.1;
  letter-spacing:-.04em;
  margin:12px 0
}

article p {
  color:#667184;
  font-size:13px
}

strong {
  display:block;
  font-size:13px;
  line-height:1.5;
  margin-top:22px
}

.note {
  font-size:12px;
  color:#687487;
  margin-top:30px
}

a:focus-visible {
  outline:3px solid #185ce4;
  outline-offset:-4px
}

a:hover strong {
  color:#185ce4
}

@media(max-width:760px) {
  main {
    width:calc(100% - 32px);
    margin:35px auto
  }
}

.gallery-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
}

.gallery-count {
  font-size:75px;
  letter-spacing:-.075em;
  font-weight:700;
  color:#20242c;
  text-align:right;
}

.gallery-count small {
  display:block;
  font-size:9px;
  letter-spacing:.14em;
  color:#5a6573;
}

.gallery-nav {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:28px;
}

.gallery-nav a {
  padding:9px 15px;
  border:1px solid #d8dbe0;
  border-radius:999px;
  font-size:12px;
  background:#fff;
}

.gallery-nav a:hover {
  border-color:#20242c;
}

.gallery-photo {
  position:relative;
  overflow:hidden;
}

.gallery-photo img {
  object-position:75% center;
}

.gallery-number {
  position:absolute;
  left:18px;
  top:18px;
  background:#ffffffeb;
  color:#20242c;
  padding:7px 9px;
  border-radius:50%;
  font-size:11px;
  letter-spacing:0;
}

.templates article {
  scroll-margin-top:25px;
  min-width:0;
}

.gallery-card-copy {
  flex:1;
  min-height:220px;
  overflow-wrap:anywhere;
}

.gallery-card-copy>span {
  display:block;
  line-height:1.5;
}

.gallery-card-copy p {
  min-height:44px;
}

.templates article:hover {
  border-color:#aeb5be;
}

@media(max-width:1279px) {
  .templates {
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

@media(max-width:1023px) {
  .templates {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:767px) {
  .templates {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:539px) {
  .templates {
    grid-template-columns:1fr;
    gap:20px;
  }
}

@media(max-width:760px) {
  .gallery-heading {
    align-items:start;
  }
  .gallery-count {
    font-size:48px;
    margin-top:26px;
  }
  .gallery-count small {
    font-size:7px;
  }
  .gallery-heading h1 {
    font-size:clamp(31px,7vw,45px);
  }
  .gallery-nav {
    gap:7px;
  }
  .gallery-nav a {
    padding:9px 12px;
  }
  .gallery-card-copy {
    min-height:0;
  }
}

.layout-picker {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-block:32px 26px;
  padding:24px;
  border:1px solid #d8dbe0;
  border-radius:16px;
  background:#fff;
}
.layout-picker h2 {font-size:20px;margin:0;letter-spacing:-.02em}
.layout-picker p {font-size:13px;margin:7px 0 0;color:#5a6573}
.layout-buttons {display:flex;gap:8px;flex-wrap:wrap}
.layout-buttons button {padding:13px 18px;min-height:44px;border:1px solid #d8dbe0;border-radius:8px;font:inherit;font-size:13px;background:#f7f6f2;color:#20242c;cursor:pointer}
.layout-buttons button[aria-pressed=true] {background:#20242c;color:#fff;border-color:#20242c}
.layout-buttons button:focus-visible,.gallery-formats a:focus-visible {outline:3px solid #486ccc;outline-offset:4px}
.templates article {display:flex;flex-direction:column}
.templates article>a {display:flex;flex-direction:column;flex:1}
.gallery-formats {display:flex;gap:8px;flex-wrap:wrap;padding:0 20px 20px;margin-top:auto}
.gallery-formats a {flex:1;white-space:nowrap;text-align:center;padding:11px 9px;font-size:11px;border:1px solid #d8dbe0;border-radius:6px;min-height:40px}
.gallery-formats a:hover {background:#f7f6f2}
html[data-layout=oldalmenu] .gallery-formats a:nth-child(2),
html[data-layout=felsomenu] .gallery-formats a:first-child {border-color:#20242c;background:#f7f6f2}
@media(max-width:760px) {
  .layout-picker {padding:18px}
  .layout-buttons {width:100%}
  .layout-buttons button {flex:1;padding-inline:10px}
}