.gs-formats{
  padding:80px 0;
  background:var(--green-50);
  color:var(--neutral-900);
}

.gs-formats .gs-section-head{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:32px;
  align-items:end;
  margin-bottom:48px;
}

.gs-formats .gs-section-head>div{
  grid-column:1 / span 9;
}

.gs-formats .gs-eyebrow{
  display:none;
}

.gs-formats .gs-section-head h2{
  max-width:none;
  margin:0;
  color:var(--neutral-900);
  font-family:var(--serif);
  font-size:60px;
  font-weight:600;
  line-height:68px;
  letter-spacing:-.02em;
}

.gs-formats .gs-section-head::after{
  display:none;
  content:none;
}

.gs-formats .gs-format-list{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:32px;
  row-gap:32px;
  margin:0;
  padding:0;
  border:0;
  list-style:none;
}

.gs-formats .gs-format-list li,
.gs-formats .gs-format-list li:nth-child(n){
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:24px;
  align-items:center;
  grid-column:1 / -1;
  min-width:0;
  min-height:0;
  width:auto;
  margin-top:0;
  padding:0;
  border:0;
  border-top:0;
  border-radius:0;
  background:transparent;
  transform:none;
}

.gs-formats .gs-format-list li::before{
  content:"";
  display:block;
  width:224px;
  aspect-ratio:1 / 1;
  justify-self:end;
  background-color:transparent;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
}

.gs-formats .gs-format-list li:nth-child(1)::before{
  background-image:url("assets/greenspire-vezetoi-csapat-fenntarthatosag-ikon.png");
}

.gs-formats .gs-format-list li:nth-child(2)::before{
  background-image:url("assets/greenspire-munkatarsi-csoportok-fenntarthatosag-ikon.png");
}

.gs-formats .gs-format-list li:nth-child(3)::before{
  background-image:url("assets/greenspire-szervezeti-szemleletformalas-fenntarthatosag-ikon.png");
}

.gs-formats .gs-format-list li:nth-child(4)::before{
  background-image:url("assets/greenspire-vizhasznalat-kornyezeti-jogok-okologiai-szorongas-ikon.png");
}

.gs-formats .gs-format-list li:nth-child(5)::before{
  background-image:url("assets/greenspire-fenntarthatosagi-uzenet-mukodes-ikon.png");
}

.gs-formats .gs-format-list span{
  display:none;
}

.gs-formats .gs-format-list li:nth-child(odd)::before{
  grid-column:1;
  grid-row:1;
  justify-self:end;
}

.gs-formats .gs-format-list li:nth-child(odd) p{
  grid-column:2;
  grid-row:1;
  justify-self:start;
  text-align:left;
}

.gs-formats .gs-format-list li:nth-child(even)::before{
  grid-column:2;
  grid-row:1;
  justify-self:start;
}

.gs-formats .gs-format-list li:nth-child(even) p{
  grid-column:1;
  grid-row:1;
  justify-self:end;
  text-align:right;
}

.gs-formats .gs-format-list p{
  width:auto;
  max-width:560px;
  margin:0;
  color:var(--neutral-900);
  font-family:var(--serif);
  font-size:30px;
  font-weight:600;
  line-height:38px;
}

.gs-formats .gs-format-list li:nth-child(4) p,
.gs-formats .gs-format-list li:nth-child(5) p{
  font-size:24px;
  line-height:32px;
}

.gs-formats .gs-format-closing{
  max-width:900px;
  margin:48px 0 0 auto;
  padding:0;
  border:0;
  color:var(--neutral-700);
  font-family:var(--serif);
  font-size:30px;
  line-height:38px;
}

.gs-formats .gs-format-closing strong{
  display:block;
  margin-top:16px;
  color:var(--green-800);
  font-size:36px;
  line-height:44px;
}

@media(max-width:1024px){
  .gs-formats{
    padding:64px 0;
  }

  .gs-formats .gs-section-head{
    grid-template-columns:repeat(8,minmax(0,1fr));
    gap:32px;
    margin-bottom:40px;
  }

  .gs-formats .gs-section-head>div{
    grid-column:1 / span 7;
  }

  .gs-formats .gs-section-head h2{
    font-size:48px;
    line-height:56px;
  }

  .gs-formats .gs-format-list{
    grid-template-columns:repeat(8,minmax(0,1fr));
    column-gap:32px;
    row-gap:32px;
  }

  .gs-formats .gs-format-list li,
  .gs-formats .gs-format-list li:nth-child(n){
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:24px;
    grid-column:1 / -1;
  }

  .gs-formats .gs-format-list li::before{
    width:192px;
  }

  .gs-formats .gs-format-list p{
    font-size:24px;
    line-height:32px;
  }

  .gs-formats .gs-format-list li:nth-child(4) p,
  .gs-formats .gs-format-list li:nth-child(5) p{
    font-size:24px;
    line-height:32px;
  }

  .gs-formats .gs-format-closing{
    margin-top:40px;
  }
}

@media(max-width:767px){
  .gs-formats{
    padding:48px 0;
  }

  .gs-formats .gs-section-head{
    grid-template-columns:1fr;
    gap:0;
    margin-bottom:32px;
  }

  .gs-formats .gs-section-head>div{
    grid-column:1;
  }

  .gs-formats .gs-section-head h2{
    font-size:36px;
    line-height:44px;
  }

  .gs-formats .gs-format-list{
    grid-template-columns:1fr;
    gap:32px;
  }

  .gs-formats .gs-format-list li,
  .gs-formats .gs-format-list li:nth-child(n){
    grid-column:1;
    grid-row:auto;
    grid-template-columns:1fr;
    gap:16px;
    margin-top:0;
  }

  .gs-formats .gs-format-list li:nth-child(n)::before{
    grid-column:1;
    grid-row:auto;
    width:160px;
    justify-self:center;
  }

  .gs-formats .gs-format-list li:nth-child(n) p{
    grid-column:1;
    grid-row:auto;
    justify-self:stretch;
    max-width:none;
    text-align:left;
    font-size:24px;
    line-height:32px;
  }

  .gs-formats .gs-format-closing{
    margin:40px 0 0;
    padding:0;
    font-size:24px;
    line-height:32px;
  }

  .gs-formats .gs-format-closing strong{
    font-size:30px;
    line-height:38px;
  }
}