/*
Theme Name: Tomas Ramanauskas
Theme URI: https://tomasramanauskas.com
Author: Tomas Ramanauskas
Description: Editorial portfolio + training services theme. Single-page homepage with 5 sections.
Version: 1.0
License: GPL v2 or later
Text Domain: tr-theme
*/

:root{
    --bg:#F4F1EA;
    --ink:#121212;
    --muted:#8A857C;
    --line:#1212121A;
    --accent:#E54B1C;
    --serif:'Instrument Serif', Georgia, serif;
    --mono:'Space Mono', ui-monospace, monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{background:#EDE9E0;color:var(--ink);-webkit-font-smoothing:antialiased}
  body{
    font-family:var(--mono);
    font-size:13px;
    line-height:1.55;
    letter-spacing:0.01em;
  }

  .frame{
    max-width:420px;
    margin:24px auto;
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.08);
  }

  header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 20px;
    border-bottom:1px solid var(--line);
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    position:sticky;
    top:0;
    background:var(--bg);
    z-index:10;
  }
  header .mark{font-weight:700}
  header .menu{cursor:pointer;display:flex;gap:6px;align-items:center}
  header .menu::before{content:"";width:16px;height:1px;background:var(--ink);display:inline-block}

  /* HERO */
  .hero{padding:36px 20px 28px}
  .hero .kicker{
    font-size:10px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:22px;
    display:flex;
    justify-content:space-between;
  }
  .hero h1{
    font-family:var(--serif);
    font-weight:400;
    font-size:58px;
    line-height:0.94;
    letter-spacing:-0.02em;
    margin:0;
  }
  .hero h1 em{
    font-style:italic;
    color:var(--accent);
  }
  .hero-top{
    display:grid;
    grid-template-columns:1fr 42%;
    gap:14px;
    align-items:end;
    margin-bottom:28px;
  }
  .portrait{
    width:100%;
    aspect-ratio:3/4;
    overflow:hidden;
    background:#E8E4DB;
  }
  .portrait img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 35%;
    display:block;
  }
  .hero .intro{
    font-family:var(--mono);
    font-size:12.5px;
    line-height:1.65;
    max-width:36ch;
    color:var(--ink);
    margin-top:0;
  }

  /* NAV */
  .sections{border-top:1px solid var(--line);margin-top:32px}
  .section-item{
    display:grid;
    grid-template-columns:36px 1fr auto;
    align-items:baseline;
    padding:22px 20px;
    border-bottom:1px solid var(--line);
    gap:12px;
    cursor:pointer;
    transition:background .2s;
    text-decoration:none;
    color:inherit;
  }
  .section-item:hover{background:rgba(0,0,0,0.02)}
  .section-item .num{
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:0.1em;
    color:var(--muted);
    padding-top:8px;
  }
  .section-item .title{
    font-family:var(--serif);
    font-size:32px;
    line-height:1;
    letter-spacing:-0.01em;
  }
  .section-item .title small{
    display:block;
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:0.04em;
    color:var(--muted);
    text-transform:none;
    margin-top:6px;
    line-height:1.5;
    max-width:26ch;
  }
  .section-item .arrow{
    font-family:var(--mono);
    font-size:14px;
    color:var(--ink);
    padding-top:8px;
  }

  /* TEASER (juoda default) */
  .teaser{
    padding:56px 20px 32px;
    background:var(--ink);
    color:var(--bg);
  }
  .teaser .chap{
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:#8A857C;
    margin-bottom:16px;
    display:flex;
    justify-content:space-between;
  }
  .teaser h2{
    font-family:var(--serif);
    font-weight:400;
    font-size:54px;
    line-height:0.98;
    letter-spacing:-0.02em;
    margin-bottom:24px;
  }
  .teaser h2 em{font-style:italic}
  .teaser p{
    font-family:var(--mono);
    font-size:12.5px;
    line-height:1.65;
    max-width:32ch;
    color:#D9D4CA;
    margin-bottom:28px;
  }
  .teaser .links{
    border-top:1px solid #ffffff1F;
    padding-top:0;
  }
  .teaser .link-row{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:12px;
    padding:16px 0;
    border-bottom:1px solid #ffffff1F;
    font-family:var(--mono);
    font-size:11.5px;
    letter-spacing:0.04em;
    text-transform:uppercase;
    cursor:pointer;
    text-decoration:none;
    color:inherit;
    transition:padding-left .2s ease;
  }
  .teaser a.link-row:hover{padding-left:4px}
  .teaser .link-row .lbl{display:flex;gap:12px;flex:1;padding-right:8px}
  .teaser .link-row .lbl::before{content:"→";color:#8A857C;flex-shrink:0}
  .teaser .link-row .val{color:#D9D4CA;text-transform:none;letter-spacing:0;text-align:right;flex-shrink:0}
  .teaser .group-label{
    font-family:var(--mono);
    font-size:9.5px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.35);
    margin-bottom:6px;
  }
  .teaser .links + .group-label{margin-top:28px}

  /* TEASER raudona variacija */
  .teaser.red{background:var(--accent);color:var(--ink)}
  .teaser.red .chap{color:rgba(0,0,0,0.55)}
  .teaser.red .chap span:first-child{color:var(--ink)}
  .teaser.red p{color:rgba(0,0,0,0.82)}
  .teaser.red .links{border-top-color:rgba(0,0,0,0.18)}
  .teaser.red .link-row{border-bottom-color:rgba(0,0,0,0.18);color:var(--ink)}
  .teaser.red .link-row .lbl::before{color:rgba(0,0,0,0.45)}
  .teaser.red .link-row .val{color:rgba(0,0,0,0.65)}

  /* BOOK */
  .book{
    padding:56px 20px 40px;
    background:var(--bg);
  }
  .book .chap{
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:16px;
    display:flex;
    justify-content:space-between;
  }
  .book .chap span:first-child{color:var(--ink)}
  .book h2{
    font-family:var(--serif);
    font-weight:400;
    font-size:54px;
    line-height:0.98;
    letter-spacing:-0.02em;
    margin-bottom:28px;
  }
  .book-card{
    display:grid;
    grid-template-columns:110px 1fr;
    gap:18px;
    align-items:flex-start;
    padding-top:12px;
    border-top:1px solid var(--line);
  }
  .book-cover{
    width:110px;
    height:160px;
    background:#B5B3AE url('assets/book_cover.png') center/cover no-repeat;
    background-position:center 35%;
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    text-align:center;
    padding:10px 8px;
    color:#fff;
    font-family:var(--serif);
    font-weight:400;
    font-size:12px;
    line-height:1;
    letter-spacing:0;
    box-shadow:0 6px 20px rgba(0,0,0,0.15);
  }
  .book-cover::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0.25) 0%, transparent 25%, transparent 60%, rgba(0,0,0,0.35) 100%);
  }
  .book-cover .cov-author,
  .book-cover .cov-title{position:relative;z-index:1}
  .book-cover .cov-author{
    font-family:var(--mono);
    font-size:6.5px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    font-weight:700;
  }
  .book-cover .cov-title{
    font-family:var(--serif);
    font-size:11px;
    line-height:1;
    letter-spacing:-0.01em;
    font-style:italic;
  }
  .book-info h3{
    font-family:var(--serif);
    font-weight:400;
    font-size:22px;
    line-height:1.05;
    margin-bottom:8px;
  }
  .book-info .meta{
    font-family:var(--mono);
    font-size:10.5px;
    color:var(--muted);
    margin-bottom:14px;
    letter-spacing:0.02em;
  }
  .book-info .price{
    font-family:var(--mono);
    font-size:14px;
    font-weight:700;
    margin-bottom:14px;
  }
  .book-info .book-status{
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--accent);
    margin:16px 0 14px;
    padding:6px 10px;
    border:1px solid var(--accent);
    display:inline-block;
  }
  .btn{
    display:inline-block;
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    padding:10px 14px;
    background:var(--ink);
    color:var(--bg);
    border:none;
    cursor:pointer;
    text-decoration:none;
  }
  .btn-ghost{
    background:transparent;
    color:var(--ink);
    border:1px solid var(--ink);
    margin-left:6px;
  }

  /* PROJECTS */
  .projects{
    padding:56px 20px 40px;
    background:var(--bg);
    border-top:1px solid var(--line);
  }
  .projects .chap{
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:16px;
    display:flex;
    justify-content:space-between;
  }
  .projects .chap span:first-child{color:var(--ink)}
  .projects h2{
    font-family:var(--serif);
    font-weight:400;
    font-size:54px;
    line-height:0.98;
    letter-spacing:-0.02em;
    margin-bottom:16px;
  }
  .projects .lead{
    font-family:var(--mono);
    font-size:12px;
    line-height:1.65;
    color:var(--muted);
    max-width:32ch;
    margin-bottom:24px;
  }
  .project-list{
    border-top:1px solid var(--line);
  }
  .project-item{
    display:grid;
    grid-template-columns:28px 1fr auto;
    gap:14px;
    padding:18px 0;
    border-bottom:1px solid var(--line);
    align-items:baseline;
    text-decoration:none;
    color:inherit;
    transition:background .2s,padding .2s;
  }
  .project-item:hover{background:rgba(0,0,0,0.02);padding-left:6px;padding-right:6px}
  .project-item .num{
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:0.1em;
    color:var(--muted);
    padding-top:4px;
  }
  .project-item .name{
    font-family:var(--serif);
    font-weight:400;
    font-size:24px;
    line-height:1.05;
    letter-spacing:-0.01em;
    margin-bottom:4px;
  }
  .project-item .desc{
    font-family:var(--mono);
    font-size:10.5px;
    color:var(--muted);
    line-height:1.5;
    max-width:28ch;
  }
  .project-item .side{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
    padding-top:4px;
  }
  .project-item .cat{
    font-family:var(--mono);
    font-size:9px;
    color:var(--muted);
    letter-spacing:0.12em;
    text-transform:uppercase;
  }
  .project-item .arrow{
    font-family:var(--mono);
    font-size:13px;
    color:var(--ink);
  }
  .project-item.soon{cursor:default}
  .project-item.soon:hover{background:transparent;padding-left:0;padding-right:0}
  .project-item .soon-badge{
    font-family:var(--mono);
    font-size:9px;
    font-weight:700;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--bg);
    background:var(--accent);
    padding:5px 9px;
    white-space:nowrap;
  }

  /* FOOTER */
  footer{
    padding:40px 20px 28px;
    background:var(--bg);
    border-top:1px solid var(--line);
    font-family:var(--mono);
    font-size:10px;
    color:var(--muted);
    letter-spacing:0.08em;
    text-transform:uppercase;
    display:flex;
    justify-content:space-between;
    align-items:baseline;
  }
  footer .copy{color:var(--muted)}
  footer .top{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:2px}

  /* INFO banner */
  .info{
    max-width:420px;
    margin:24px auto 0;
    padding:14px 20px;
    font-family:var(--mono);
    font-size:11px;
    color:var(--muted);
    text-align:center;
    line-height:1.6;
  }
  .info strong{color:var(--ink)}

  /* MENU OVERLAY */
  .menu-overlay{
    position:fixed;
    inset:0;
    background:var(--ink);
    color:var(--bg);
    z-index:100;
    transform:translateY(-102%);
    transition:transform .55s cubic-bezier(0.76,0,0.24,1);
    overflow-y:auto;
    padding:18px 20px 32px;
    display:flex;
    flex-direction:column;
  }
  .menu-overlay.open{transform:translateY(0)}
  .menu-overlay .m-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    padding-bottom:18px;
    border-bottom:1px solid #ffffff1F;
  }
  .menu-overlay .m-header .mark{font-weight:700}
  .menu-overlay .m-header .close{cursor:pointer;color:var(--bg)}
  .menu-overlay .m-header .close::after{content:" ✕";color:#8A857C}
  .menu-overlay .m-nav{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:16px 0;
  }
  .menu-overlay .m-item{
    font-family:var(--serif);
    font-weight:400;
    font-size:52px;
    line-height:1.05;
    letter-spacing:-0.02em;
    text-decoration:none;
    color:var(--bg);
    padding:10px 0;
    border-bottom:1px solid #ffffff1F;
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:12px;
    transition:padding-left .3s ease, color .3s ease;
  }
  .menu-overlay .m-item:hover{padding-left:6px;color:var(--accent)}
  .menu-overlay .m-item .m-num{
    font-family:var(--mono);
    font-size:10px;
    color:#8A857C;
    letter-spacing:0.12em;
  }
  .menu-overlay .m-footer{
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:#8A857C;
    display:flex;
    justify-content:space-between;
    padding-top:16px;
    border-top:1px solid #ffffff1F;
  }

  /* EXPAND (teaser link rows) */
  .teaser .link-group{border-bottom:1px solid #ffffff1F}
  .teaser.red .link-group{border-bottom-color:rgba(0,0,0,0.18)}
  .teaser .link-group .link-row{border-bottom:none;padding:16px 0}
  .teaser .link-group .link-row .lbl::before{content:"→";transition:transform .3s ease;display:inline-block}
  .teaser .link-group.open .link-row .lbl::before{transform:rotate(90deg)}
  .teaser .link-detail{
    max-height:0;
    overflow:hidden;
    transition:max-height .5s ease;
  }
  .teaser .link-group.open .link-detail{max-height:600px}
  .teaser .detail-inner{
    padding:4px 0 22px 24px;
    font-family:var(--mono);
    font-size:11.5px;
    line-height:1.65;
    color:#D9D4CA;
    max-width:34ch;
    text-transform:none;
    letter-spacing:0.01em;
  }
  .teaser.red .detail-inner{color:rgba(0,0,0,0.78)}
  .teaser .detail-inner p{margin-bottom:14px}
  .teaser .detail-inner .spec{
    margin:14px 0 20px;
    border-top:1px solid rgba(255,255,255,0.14);
  }
  .teaser .detail-inner .spec > div{
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:12px 0;
    border-bottom:1px solid rgba(255,255,255,0.14);
    align-items:flex-start;
  }
  .teaser .detail-inner .spec > div > span:first-child{
    color:rgba(255,255,255,0.45);
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    flex-shrink:0;
    padding-top:1px;
  }
  .teaser .detail-inner .spec > div > span:last-child{
    color:#D9D4CA;
    text-align:right;
    font-family:var(--mono);
    font-size:11px;
    line-height:1.55;
    letter-spacing:0;
    text-transform:none;
    max-width:70%;
  }
  .teaser.red .detail-inner .spec{border-top-color:rgba(0,0,0,0.18)}
  .teaser.red .detail-inner .spec > div{border-bottom-color:rgba(0,0,0,0.18)}
  .teaser.red .detail-inner .spec > div > span:first-child{color:rgba(0,0,0,0.55)}
  .teaser.red .detail-inner .spec > div > span:last-child{color:rgba(0,0,0,0.82)}
  .teaser .detail-inner strong{color:var(--bg);font-weight:700}
  .teaser.red .detail-inner strong{color:var(--ink);font-weight:700}

  .teaser .outro{
    margin-top:26px;
    padding-top:22px;
    border-top:1px solid #ffffff1F;
    font-family:var(--mono);
    font-size:12px;
    line-height:1.65;
    color:#D9D4CA;
    max-width:34ch;
  }
  .teaser .outro a{color:var(--bg);border-bottom:1px solid rgba(255,255,255,0.3);text-decoration:none}
  .teaser.red .outro{color:rgba(0,0,0,0.78);border-top-color:rgba(0,0,0,0.18)}
  .teaser.red .outro a{color:var(--ink);border-bottom-color:rgba(0,0,0,0.3)}
  .teaser .detail-inner .btn-inline{
    display:inline-block;
    font-family:var(--mono);
    font-size:10px;
    font-weight:700;
    letter-spacing:0.14em;
    text-transform:uppercase;
    padding:11px 16px;
    background:var(--bg);
    color:var(--ink);
    text-decoration:none;
    margin-top:6px;
  }
  .teaser.red .detail-inner .btn-inline{background:var(--ink);color:var(--bg)}
  /* ========================================
     DESKTOP (900px+)
     ======================================== */
  @media (min-width:900px){
    html,body{background:var(--bg)}

    .frame{
      max-width:none;
      margin:0;
      background:var(--bg);
      border:none;
      border-radius:0;
      overflow:visible;
      box-shadow:none;
    }

    /* HEADER */
    header{
      padding:24px 60px;
      font-size:12px;
      letter-spacing:0.1em;
    }
    header .menu{gap:10px}
    header .menu::before{width:24px}

    /* HERO */
    .hero{
      padding:100px 60px 80px;
      max-width:1400px;
      margin:0 auto;
    }
    .hero .kicker{
      font-size:12px;
      letter-spacing:0.16em;
      margin-bottom:60px;
    }
    .hero h1{
      font-size:150px;
      line-height:0.92;
      letter-spacing:-0.025em;
    }
    .hero-top{
      grid-template-columns:1fr 38%;
      gap:40px;
      margin-bottom:60px;
    }
    .portrait{max-width:480px;margin-left:auto}
    .hero .intro{
      font-size:15px;
      line-height:1.7;
      max-width:52ch;
    }

    /* NAV (01-05) */
    .sections{
      max-width:1400px;
      margin:40px auto 0;
      border-top:1px solid var(--line);
    }
    .section-item{
      grid-template-columns:80px 1fr auto;
      padding:40px 60px;
      gap:40px;
    }
    .section-item .num{font-size:12px}
    .section-item .title{
      font-size:80px;
      line-height:1;
    }
    .section-item .title small{
      font-size:13px;
      margin-top:14px;
      max-width:40ch;
    }
    .section-item .arrow{font-size:20px}

    /* TEASER (01, 02) */
    .teaser{
      padding:140px 60px 100px;
    }
    .teaser > *{
      max-width:1400px;
      margin-left:auto;
      margin-right:auto;
    }
    .teaser .chap{
      font-size:12px;
      letter-spacing:0.16em;
      margin-bottom:32px;
    }
    .teaser h2{
      font-size:110px;
      line-height:0.96;
      margin-bottom:40px;
      max-width:14ch;
    }
    .teaser p{
      font-size:15px;
      line-height:1.7;
      max-width:52ch;
      margin-bottom:60px;
    }
    .teaser .link-row{
      padding:28px 0;
      font-size:14px;
      letter-spacing:0.06em;
    }
    .teaser .link-group .link-row{padding:28px 0}
    .teaser .detail-inner{
      padding:8px 0 40px 40px;
      font-size:14px;
      max-width:56ch;
    }
    .teaser .detail-inner .spec > div{padding:16px 0}
    .teaser .detail-inner .spec > div > span:first-child{font-size:11px}
    .teaser .detail-inner .spec > div > span:last-child{font-size:14px}
    .teaser .group-label{font-size:11px;margin-bottom:10px}
    .teaser .links + .group-label{margin-top:48px}

    /* BOOK */
    .book{padding:140px 60px 100px}
    .book > *{
      max-width:1400px;
      margin-left:auto;
      margin-right:auto;
    }
    .book .chap{font-size:12px;letter-spacing:0.16em;margin-bottom:32px}
    .book h2{font-size:110px;line-height:0.96;margin-bottom:60px}
    .book-card{
      grid-template-columns:280px 1fr;
      gap:60px;
      padding-top:24px;
    }
    .book-cover{
      width:280px;
      height:420px;
      padding:22px 18px;
      font-size:16px;
    }
    .book-cover .cov-author{font-size:11px;letter-spacing:0.18em}
    .book-cover .cov-title{font-size:24px}
    .book-info h3{font-size:32px;margin-bottom:14px;max-width:30ch}
    .book-info .meta{font-size:12px;margin-bottom:24px}
    .book-info .book-status{
      font-size:12px;
      letter-spacing:0.16em;
      padding:8px 14px;
    }

    /* PROJECTS */
    .projects{padding:140px 60px 100px}
    .projects > *{
      max-width:1400px;
      margin-left:auto;
      margin-right:auto;
    }
    .projects .chap{font-size:12px;letter-spacing:0.16em;margin-bottom:32px}
    .projects h2{font-size:110px;line-height:0.96;margin-bottom:32px}
    .projects .lead{
      font-size:15px;
      line-height:1.7;
      max-width:52ch;
      margin-bottom:60px;
    }
    .project-item{
      grid-template-columns:60px 1fr auto;
      gap:40px;
      padding:32px 0;
    }
    .project-item:hover{padding-left:12px;padding-right:12px}
    .project-item .num{font-size:12px;padding-top:6px}
    .project-item .name{font-size:48px;margin-bottom:8px;line-height:1}
    .project-item .desc{font-size:13px;max-width:52ch;margin-top:4px}
    .project-item .side{gap:10px;padding-top:10px}
    .project-item .cat{font-size:11px;letter-spacing:0.14em}
    .project-item .arrow{font-size:18px}
    .project-item .soon-badge{
      font-size:11px;
      letter-spacing:0.18em;
      padding:7px 12px;
    }

    /* FOOTER */
    footer{
      padding:60px 60px 40px;
      font-size:11px;
      letter-spacing:0.1em;
    }

    /* INFO banner */
    .info{
      max-width:none;
      padding:20px 60px;
      font-size:12px;
    }

    /* MENU OVERLAY */
    .menu-overlay{padding:40px 60px 60px}
    .menu-overlay .m-header{
      font-size:12px;
      letter-spacing:0.1em;
      padding-bottom:24px;
    }
    .menu-overlay .m-nav{padding:40px 0;max-width:1400px;margin:0 auto;width:100%}
    .menu-overlay .m-item{
      font-size:120px;
      line-height:1.05;
      padding:20px 0;
    }
    .menu-overlay .m-item:hover{padding-left:16px}
    .menu-overlay .m-item .m-num{font-size:14px;letter-spacing:0.14em}
    .menu-overlay .m-footer{
      font-size:11px;
      padding-top:24px;
      max-width:1400px;
      margin:0 auto;
      width:100%;
    }
  }

  /* ========================================
     LARGE DESKTOP (1400px+) — fine-tuning
     ======================================== */
  @media (min-width:1400px){
    .hero,
    .sections,
    .teaser > *,
    .book > *,
    .projects > *{
      padding-left:0;
      padding-right:0;
    }
    .teaser,
    .book,
    .projects{
      padding-left:max(60px,calc((100% - 1400px)/2));
      padding-right:max(60px,calc((100% - 1400px)/2));
    }
  }