// out: ../style-css/style.css, compress: true, sourceMap: true
@import "_mixins";
//variables

//colors
$news-color: #dd3333;
$sport-color: #81d742;
$journalism-color: #dd9933;
$base-color: #47b0ed;
$gray-color: #333946;
$business-color: #4c66a4;
$culture-color: #ff5d00;
$moto-color: #3ca12c;
$kitchen-color: darken($color: $journalism-color,
  $amount: 10%,
);
$lifestyle-color: lighten($color: $base-color,
  $amount: 10%,
);

//font-size
$base-font-size: 16px;
$small-font-size: 12px;
$large-font-size: 32px;
$xlarge-font-size: 46px;

//spacing
$main-spacing: 20px;
$small-spacing: 10px;
$big-spacing: 40px;

body {
  line-height: 1.5;
  font-family: "Roboto", sans-serif;
}

* {
  // margin: 0;
  // padding: 0;
  box-sizing: border-box;
}

h3 {
  font-size: 18px;
}

#cookie-information {
  background-color: #303440;
  color: white;
  padding: $main-spacing 0;
  font-size: 10px;
  text-align: center;

  a {
    font-weight: 900;
    color: white;
    font-size: 12px;
  }
}

#main-menu {
  text-transform: uppercase;

  @include respond-below(md) {
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    background: black;
    display: none;

    &.visible {
      @include flexbox;
      // z-index: 99999;
    }
  }

  div[id^="menu-container-"] {
    @include respond-below(md) {
      width: 100%;
      @include flexbox;
      @include align-items(center);
      @include justify-content(center);
    }

    ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
      flex-direction: column;

      @include respond-above(md) {
        @include flexbox;
        flex-direction: row;
      }

      @include respond-below(md) {
        width: 100%;
      }

      li {
        position: relative;
        width: 100%;
        font-size: 12px;
        text-align: center;
        padding: 0;

        @media (max-width: 992px) {
          a {
            padding: 10px;
          }
        }

        @include respond-above(md) {
          width: auto;
          font-size: $small-font-size;
          padding: 20px;
        }

        @include respond-above(md) {
          font-size: 14px;
          padding: 10px;
        }

        &.active {
          background-color: $base-color;

          @include respond-above(md) {}
        }

        &.parent {
          >a {
            i {
              opacity: 1;
              margin-left: 5px;
            }
          }
        }

        ul {
          position: absolute;
          display: none;

          @include respond-below(md) {
            position: static;
          }
        }

        @include respond-above(md) {
          &:hover {
            ul {
              display: block;
            }
          }
        }

        &.active {
          ul {
            display: block;
          }
        }
      }
    }
  }
}

#main-menu-btn.active {
  position: fixed;
  top: 20px;
  right: 20px;
  font-size: 16px;
  background-color: transparent;
}

#main-menu-btn {
  height: 50px;
  width: 50px;
  color: #fff;
  background: transparent;
  display: none;
  z-index: 999;
  line-height: 50px;
  text-align: center;
  font-size: 25px;
  cursor: pointer;

  @include respond-below(md) {
    display: block;
  }
}

//header

.header {
  display: flex;
  flex-direction: column;

  //logo
  &__logo {
    padding: 20px 0;

    @include respond-below(sm) {
      display: flex;
      justify-content: center;
    }
  }

  //navigation

  &__navigation {
    width: 100%;
    background-color: #19232d;
    margin-bottom: 20px;

    @include respond-above(md) {
      margin-bottom: 60px;
    }

    #menu-container-1 {
      width: 100%;
      // max-width: 450px;
      margin: 0 auto;

      // @include respond-above(xs) {
      //   max-width: 500px;
      // }

      // @include respond-above(sm) {
      //   max-width: 700px;
      // }

      // @include respond-above(md) {
      //   max-width: 900px;
      // }

      // @include respond-above(lg) {
      //   max-width: 1100px;
      // }

      ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        list-style: none;
        margin: 0;

        li {
          padding: 10px 5px;
          transition: background-color 0.3s;
          cursor: pointer;
          font-size: 14px;

          &:hover {
            background-color: #289dcc;
          }

          a {
            text-decoration: none;
            color: white;
            // font-weight: 700;
            display: block;
            height: 100%;
          }
        }

        li.parent {
          // ul {
          //   @media (max-width:992px) {
          //     display: block;
          //   }
          // }

          @include respond-above(md) {
            ul {
              position: absolute;
              top: 50px;
              left: 0;
              width: 150px;
              background-color: black;
              z-index: 999;

              li {
                text-align: start;
                padding: 10px;
              }
            }

            a {
              i {
                margin-left: 5px;
              }
            }
          }

          &:hover {
            background-color: #19232d;
          }
        }

        li.parent.active {
          @media (max-width: 992px) {
            background-color: black;
          }

          @include respond-above(md) {
            ul {
              display: none;
              background-color: #22303d;
            }

            &:hover {
              ul {
                display: block;
              }
            }
          }
        }
      }
    }
  }
}

//container

//news
.news {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  @include respond-above(sm) {
    height: 350px;
  }

  @include respond-above(xs) {}

  @include respond-above(sm) {
    display: flex;
    justify-content: space-between;
    height: 350px;
  }

  &__big-articles {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;

    @include respond-above(sm) {
      width: 50%;
      padding-right: 2px;
    }

    .big-articles__article {
      width: 100%;
      height: 300px;
      background-size: cover;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-end;
      margin-bottom: 2px;

      @include respond-above(sm) {
        height: 100%;
        margin-bottom: 0;
      }

      .article__category {
        text-decoration: none;
        color: white;
        background-color: #dd3333;
        padding: 3px 8px;
        margin-left: 20px;
        font-size: 10px;
        transition: background-color 0.3s;
        text-transform: uppercase;

        &:hover {
          background-color: $gray-color;
        }
      }

      #article-main {
        padding: 10px 15px 20px;
        background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 0,
            rgba(0, 0, 0, 1) 100%);
        width: 100%;

        .article-title {
          text-transform: uppercase;
          margin: 0;
          font-size: 16px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          text-align: center;
          font-family: "Roboto";

          a {
            text-decoration: none;
            color: white;
            transition: color 0.3s;

            &:hover {
              color: #289dcc;
            }
          }
        }

        .date-add {
          color: white;
          font-size: 10px;
          display: none;

          i {
            margin-right: 5px;
          }
        }
      }
    }
  }

  &__small-articles {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    height: 1000px;

    @media (min-width: 370px) {
      height: 500px;
      gap: 1px;
    }

    @include respond-above(sm) {
      width: 50%;
      height: 100%;
    }

    .small-articles__article {
      width: 100%;
      height: 24%;
      background-size: cover;
      display: flex;
      align-items: flex-end;

      @media (min-width: 370px) {
        width: calc(50% - 1px);
        height: calc(50% - 1px);
      }

      #article-main {
        padding: 15px 10px;
        background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 0,
            rgba(0, 0, 0, 1) 100%);
        width: 100%;

        .article-title {
          font-size: 13px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin: 0;
          text-transform: uppercase;
          font-family: "Roboto";

          a {
            text-decoration: none;
            color: white;
            transition: color 0.3s;
            text-align: center;

            &:hover {
              color: #289dcc;
            }
          }
        }

        .date-add {
          color: white;
          font-size: 10px;
          display: none;

          i {
            margin-right: 5px;
          }
        }
      }
    }
  }
}

//main
.main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .right-section {
    width: 100%;
    order: 1;

    @include respond-above(md) {
      width: calc(30% - 5px);
    }

    .aside {
      display: flex;
      flex-direction: column;
      justify-content: center;
      z-index: 0;
      position: sticky;
      top: 0;
      gap: 20px;

      .title {
        color: white;
        font-weight: 400;
        width: 100%;
        padding-bottom: 6px;
        margin-bottom: 15px;
        border-bottom: 2px solid $base-color;

        span {
          text-align: center;
          background-color: $base-color;
          padding: 6px 12px;
        }
      }

      .tag-section {
        padding: $main-spacing 0;

        .tag__container {
          #tags {
            ul {
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
              list-style: none;

              li {
                padding: 5px;

                a {
                  color: $base-color;
                }
              }
            }
          }
        }
      }

      .weather-section {
        margin-top: $big-spacing;

        .weather__container {
          display: flex;
          flex-direction: column;
          align-items: center;

          .iframe {
            width: 100%;
            height: 380px;

            @include respond-above(md) {
              height: 300px;
            }
          }

          a {
            color: black;
          }
        }
      }

      .weather-section--subpages {
        margin-top: 0;
      }
    }
  }

  .left-section {
    width: 100%;

    @include respond-above(md) {
      width: calc(70% - 5px);
    }

    .left-section-articles {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      flex-wrap: wrap;

      .journalism {
        width: 100%;
      }

      .sport {
        width: 100%;
      }
    }

    //articles
    .articles {
      display: flex;
      flex-direction: row;
      justify-content: center;
      margin-top: $big-spacing;
      flex-wrap: wrap;
      gap: 30px;
      z-index: 0;
      position: relative;
      max-width: 100%;

      .title {
        text-transform: uppercase;
        color: white;
        font-weight: 400;
        width: 100%;
        padding-bottom: 6px;
        margin-bottom: 15px;

        span {
          text-align: center;
          padding: 6px 12px;
        }

        &--journalism {
          span {
            background-color: $journalism-color;
          }
        }

        &--sport {
          span {
            background-color: $sport-color;
          }
        }

        &--business {
          span {
            background-color: $business-color;
          }
        }

        &--culture {
          span {
            background-color: $culture-color;
          }
        }

        &--moto {
          span {
            background-color: $moto-color;
          }
        }

        &--policy {
          span {
            background-color: $news-color;
          }
        }

        &--kitchen {
          span {
            background-color: $kitchen-color;
          }
        }

        &--lifestyle {
          span {
            background-color: $lifestyle-color;
          }
        }
      }

      &__big-article {
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
        width: 100%;

        @include respond-above(md) {
          width: calc(50% - 15px);
        }

        .big-article__img {
          width: 100%;
          height: auto;
        }

        .article__category {
          padding: 3px 8px;
          border-radius: 3px;
          margin: $main-spacing $small-spacing $small-spacing;
          text-align: center;
          font-size: 10px;

          a {
            text-decoration: none;
            font-size: $small-font-size;
            color: white;
          }

          &--journalism {
            background-color: $journalism-color;
            width: 90px;
          }

          &--sport {
            background-color: $sport-color;
            width: 70px;
          }

          &--chronicle {
            background-color: $base-color;
            width: 150px;
          }

          &--policy {
            background-color: $news-color;
          }

          &--culture {
            background-color: $culture-color;
          }

          &--moto {
            background-color: $moto-color;
          }

          &--business {
            background-color: $business-color;
          }

          &--kitchen {
            background-color: $kitchen-color;
          }

          &--lifestyle {
            background-color: $lifestyle-color;
          }
        }

        #article-main {
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 0 $main-spacing;

          .article-title {
            margin: 0 0 10px 0;

            a {
              text-decoration: none;
              color: black;
              transition: color 0.3s;
              font-size: 22px;

              &:hover {
                color: $base-color;
              }
            }
          }

          .date-add {
            font-size: $small-font-size;
            color: #888888;
            margin-bottom: 10px;

            i {
              margin-right: 5px;
            }
          }

          .entry {
            font-size: $small-font-size;
          }
        }
      }

      &__small-articles {
        width: 100%;

        @include respond-above(md) {
          width: calc(50% - 15px);
        }

        .small-article:nth-child(1) {
          margin-top: 0;
        }

        .small-article {
          // box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1);
          display: flex;
          justify-content: flex-start;
          margin: 25px 0;

          .small-article__img {
            width: 30%;
            margin-right: 15px;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          #article-main {
            width: 60%;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;

            .article-title {
              margin-bottom: 10px;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: wrap;
              width: 100%;
              height: 40px;
              line-height: 1.3;

              a {
                font-size: 16px;
                text-decoration: none;
                color: black;
                transition: color 0.3s;
                font-weight: 400;
                display: block;

                &:hover {
                  color: $base-color;
                }
              }
            }

            .date-add {
              font-size: 12px;
              color: gray;
              margin-bottom: 10px;

              i {
                margin-right: 5px;
              }
            }
          }
        }
      }
    }

    .sport.articles {
      justify-content: flex-start;
    }

    .chronicle {
      margin-top: $big-spacing;
      width: 100%;
      margin-bottom: 0;
      z-index: 0;
      position: relative;

      .title--chronicle {
        text-transform: uppercase;
        color: white;
        font-weight: 400;
        width: 100%;
        padding-bottom: 6px;
        margin-bottom: 15px;
        border-bottom: 2px solid $base-color;

        span {
          text-align: center;
          background-color: $base-color;
          padding: 6px 12px;
        }
      }

      .articles--chronicle {
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 0;

        .articles__big-article {
          width: 100%;

          @include respond-above(md) {
            width: calc(50% - 15px);
          }
        }

        .articles__small-articles {
          .small-article {
            width: 100%;
          }
        }
      }
    }
  }
}

//footer

.footer--footer {
  background-color: #252729;
  border-top: 15px solid #333;
  margin-top: 20px;
  max-width: 100%;

  @include respond-above(md) {
    justify-content: start;
  }

  .container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .logo,
  .footer-menu {
    padding: 15px;
    margin: 20px 0;
  }

  .logo {
    @include respond-below(md) {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .footer-menu {
    height: 100%;

    @include respond-above(md) {
      border-left: 1px solid #333;
    }

    #menu-container-1 {
      ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;

        @include respond-above(md) {
          flex-direction: row;
        }

        li {
          width: 100%;

          @include respond-above(md) {
            width: auto;
          }

          a {
            text-align: center;
            text-decoration: none;
            color: white;
            text-transform: uppercase;
            font-size: 12px;
            font-weight: 600;
            padding: 10px;
            display: block;
            position: relative;

            &::after {
              content: "";
              position: absolute;
              width: 100%;
              bottom: 0;
              right: 0;
              border-bottom: 2px solid #555;
              z-index: 0;
            }
          }
        }

        li.active {
          a {
            &::after {
              border-bottom: 2px solid $base-color;
            }
          }
        }

        li.parent {
          a {
            i {
              display: none;
            }
          }

          ul {
            display: none;
          }
        }

        #link-1 {
          display: none;
        }

        #link-2 {
          display: none;
        }
      }
    }
  }
}

//podstrony artykuly
.left-section__subpages {
  width: 100%;
  display: flex;
  flex-direction: column;

  @include respond-above(md) {
    width: calc(70% - 20px);
    margin-right: 20px;
  }

  .title {
    border-bottom: 2px solid $base-color;
    margin-bottom: 15px;
    padding-bottom: 0;

    .site-title {
      color: #fff;
      padding: 6px 12px;
      display: inline-block;
      // background-color: $base-color;
      font-size: 18px;
      margin: 0;

      &--business {
        background-color: $business-color;
      }

      &--culture {
        background-color: $culture-color;
      }

      &--moto {
        background-color: $moto-color;
      }

      &--journalism {
        background-color: $journalism-color;
      }

      &--chronicle {
        background-color: $base-color;
      }

      &--policy {
        background-color: $news-color;
      }

      &--sport {
        background-color: $sport-color;
      }

      &--news {
        background-color: $news-color;
      }
    }
  }

  .articles {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;

    .article-entry.first {
      width: 100%;
      padding: 0;
      margin-left: 0;
    }

    .article-entry {
      width: 100%;
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
      margin-top: $main-spacing;

      @include respond-above(xs) {
        &:nth-child(odd) {
          margin-left: 10px;
        }
      }

      @include respond-above(xs) {
        width: calc(50% - 5px);
      }

      .main-image {
        img {
          width: 100%;
          height: auto;
        }
      }

      .article-entry__category {
        margin: 20px 20px 10px 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;

        a {
          text-decoration: none;
          font-size: $small-font-size;
          color: white;
          padding: 2px 10px;
          margin: 0 5px 0 0;
          border-radius: 3px;
          display: inline-flex;
          background-color: $base-color;
        }
      }

      .article-title {
        margin: 0;
        padding: 0 $main-spacing;

        a {
          text-decoration: none;
          color: black;
          transition: color 0.3s;
          font-size: 22px;

          &:hover {
            color: $base-color;
          }
        }
      }

      .date-add {
        color: gray;
        font-size: $small-font-size;
        padding: $main-spacing;

        i {
          margin-right: 5px;
        }
      }

      .entry {
        padding: 0 $main-spacing;

        p {
          strong {
            font-weight: 400 !important;
          }
        }
      }

      .more {
        text-decoration: none;
        padding: 3px 10px;
        background-color: $base-color;
        color: white;
        font-size: $small-font-size;
        border-radius: 3px;
        display: inline-block;
        margin: 0 20px 20px;
        transition: background-color 0.3s;

        &:hover {
          background-color: darken($color: $base-color, $amount: 30%);
        }
      }
    }

    .article-entry.first {
      width: 100%;
      padding: 0;
      margin-left: 0;
    }
  }

  //article
  .article {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    width: 100%;

    .main-image {
      margin-bottom: 40px;
      margin-top: 20px;

      img {
        width: 100%;
        height: auto;
      }
    }

    .article-title {
      margin: 0;
      padding: 20px 10px 0;
      font-size: 30px;
      font-family: "Roboto";
      font-weight: 600;

      @include respond-above(md) {
        font-size: 40px;
      }
    }

    .social-icons {
      display: flex;
      flex-direction: row;
      margin-top: 10px;
      padding-left: 10px;

      .social-icons-text {
        font-size: 15px;
        font-weight: 600;
        text-transform: uppercase;
        margin-right: 25px;
        margin-bottom: 0;
        line-height: 30px;
        text-align: center;
      }

      a {
        padding: 0 5px;

        img {
          width: 100%;
          height: auto;
          object-fit: cover;
        }
      }
    }

    .wrapper {
      display: flex;
      justify-content: flex-start;
      padding: $small-spacing 0;

      .date-add,
      .views {
        font-size: 13px;
        color: #888888;
        padding: 0 10px;

        i {
          margin-right: 5px;
        }
      }

      .article-tags {
        ul {
          display: flex;
          flex-wrap: wrap;
          list-style: none;
          font-size: $small-font-size;

          i {
            color: gray;
            margin-right: 5px;
          }

          li {
            padding-right: 3px;

            a {
              text-decoration: none;
              color: black;
            }
          }
        }
      }
    }

    .text {
      padding: 0 10px;

      blockquote {
        border-left: 5px solid $base-color;
        padding-left: 25px;
      }

      p {
        img {
          width: 100%;
          height: auto;
        }
      }
    }

    h2 {
      font-size: 20px;
    }
  }
}

//pager

.pager {
  margin-top: 20px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  list-style: none;

  li {
    margin: 0 10px;
    padding: 5px 10px;
    border: 1px solid gray;
    background-color: transparent;
    transition: background-color 0.3s;

    &:hover {
      background-color: $base-color;

      a {
        color: white;
      }
    }

    a {
      text-decoration: none;
      color: black;
    }
  }

  li:nth-child(5),
  li:nth-child(1) {
    display: none;
  }

  li:nth-child(3) {
    &:hover {
      background-color: transparent;
    }
  }
}

.articles {
  .article-list {
    border: 1px solid #eee;
    padding: 20px;
    margin-bottom: 20px;
    width: 100%;

    h3 {
      a {
        font-size: 1.25rem;
        color: $base-color;
        line-height: 1.5;
      }
    }

    .date-add {
      font-size: 0.9rem;
      color: rgba(0, 0, 0, 0.75);
    }
  }
}

/* NADPISYWANE KLASY*/

//title
.title {
  background-color: $gray-color;
  border-bottom: none !important;
  position: relative;
  height: 40px;

  span {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 100% !important;
    font-size: 14px !important;
    text-align: center;
    line-height: 40px;
    padding: 0 12px !important;
    font-weight: 600;
    text-transform: uppercase;
  }
}

//articles__big-article
.articles__big-article {
  position: relative;
  box-shadow: none !important;
  border-bottom: 3px solid $gray-color;

  .article__category {
    position: absolute;
    top: 0;
    left: -10px;
    border-radius: 0 !important;
    transition: background-color 0.3s;

    &:hover {
      background-color: $gray-color !important;
    }
  }

  #article-main {
    width: 80%;
    margin: 0 auto;
    margin-top: -40px;
    padding: 0 !important;

    .article-title {
      background-color: white;
      padding: 15px 20px 0 20px;
      text-overflow: ellipsis;
      overflow: hidden;
      height: 74px;
      font-size: 16px;
      font-weight: 600;
      line-height: 1.3;

      a {
        font-family: "Roboto";
      }
    }

    .date-add {
      padding: 0 20px;
    }

    .entry {
      padding: 0 20px;
    }
  }
}

//entry
.articles__big-article {
  #article-main {
    .entry {
      padding-bottom: 20px;

      p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
        font-size: 16px;
      }
    }
  }
}

//chronicle last post
// .chronicle {
//   .articles--chronicle {
//     .small-article:nth-last-child(1) {
//       display: none;
//     }
//   }
// }

//li parent

li.parent {
  ul {
    background-color: lighten($color: #19232d, $amount: 5%) !important;
  }
}

//popular-post
.popular-post-section {
  .news-list {
    list-style: none;

    li {
      padding-bottom: 15px;
      display: grid;
      grid-template-columns: 80px 1fr;
      grid-template-areas:
        "img txt"
        "img date";
      column-gap: 20px;
      row-gap: 10px;

      .date-add {
        grid-area: date;
        color: #888888;
        font-size: 12px;

        i {
          margin-right: 5px;
        }
      }

      .news-list-img {
        grid-area: img;
        width: 100%;
        height: 80px;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      a {
        text-decoration: none;
        color: black;
        font-family: "Roboto";
        font-size: 15px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        transition: color 0.3s;
        grid-area: txt;

        &:hover {
          color: $base-color;
        }
      }
    }
  }

  .title--sport {
    span {
      background-color: $sport-color !important;
    }
  }

  .title--journalism {
    span {
      background-color: $journalism-color !important;
    }
  }

  .title--policy {
    span {
      background-color: $news-color !important;
    }
  }

  .title--moto {
    span {
      background-color: $moto-color;
    }
  }

  .title--culture {
    span {
      background-color: $culture-color;
    }
  }

  .title--business {
    span {
      background-color: $business-color;
    }
  }
}

//form-group--newsletter
.form-group--newsletter {
  display: grid;
  grid-template-columns: 1fr 50px;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "title title"
    "email btn";
  border: 1px solid #e7e8e8;
  padding: 20px 20px 30px 20px;
  background-color: #f2f2f2;

  label {
    grid-area: title;
    font-size: 13px;
  }

  .form-control {
    grid-area: email;
    display: table-cell;
    width: 100%;
    margin-bottom: 0;
    background: #333946;
    border: none;
    color: #f2f2f2;
    vertical-align: middle;
    outline: 0;
    padding: 12px 15px;
    margin: 0;
    font-family: "roboto";
    font-size: 14px;
    border-radius: 0;
    height: 44px;

    &::placeholder {
      color: white;
    }

    &:focus {
      outline: none;
    }

    &:active {
      outline: none;
    }
  }

  .form-group--button {
    grid-area: btn;
    background-color: #333946;
    padding: 10px;
    position: relative;
    transition: background-color 0.3s;
    border-radius: 0;

    &:hover {
      background-color: $base-color;
    }

    i {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
    }
  }
}

//search-form
.header__navigation {
  #menu-container-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .search--button {
      background-color: transparent;
      border: none;

      i {
        font-size: 19px;
        color: white;
        cursor: pointer;
        padding: 10px;
      }
    }
  }
}

#search-form {
  background-color: white;

  form {
    display: flex;
    justify-content: flex-end;
    height: 50px;
    // margin-top: 1px;

    // @include respond-above(lg) {
    //   margin-top: 0px;
    // }

    input {
      background-color: lighten($color: #333946, $amount: 5%);
      border: none;
      color: white;
      font-size: 14px;
      padding: 0 12px;
      height: 0;
      transition: height 0.3s;
      width: calc(30% - 5px);
    }

    input:focus {
      border: none;
      outline: none;
    }

    input::placeholder {
      color: white;
    }

    .search-input--active {
      height: 100%;
      padding: 8px 12px;
    }
  }
}

//navigation-mobile

.header__navigation {
  position: relative;
  width: 100%;
  height: 50px;

  #menu-container-1 {
    @include respond-above(md) {
      height: 50px !important;

      ul {
        height: 100%;

        li {
          height: 100%;

          a {
            line-height: 34px;
          }
        }
      }
    }
  }

  #main-menu-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  #main-menu-btn.active {
    position: fixed;
    top: 5%;
    left: 90%;

    i {
      font-size: 24px !important;
    }
  }
}

#main-menu.visible {
  #search-form {
    display: none;
  }

  #menu-container-1 {
    .search--button {
      display: none;
    }
  }
}

//search-results
#search-results {
  ul {
    list-style: none;
  }

  li {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-template-areas: "img txt";
    gap: 15px;
    margin-bottom: 20px;

    @include respond-above(xs) {
      grid-template-columns: 250px 1fr;
      grid-template-areas: "img txt";
      gap: 20px;
    }

    .search-results-img {
      grid-area: img;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .article-title {
      grid-area: txt;
      line-height: 0.6;

      @include respond-above(xs) {
        line-height: 1;
      }

      a {
        text-decoration: none;
        color: black;
        transition: color 0.3s;
        font-size: 14px;

        @include respond-above(xs) {
          font-size: 18px;
        }

        &:hover {
          color: $base-color;
        }
      }
    }
  }
}

//image-source
.image-source {
  padding: 0 10px;
  margin-bottom: 10px;
  font-style: italic;

  span {
    font-weight: 600;
    font-style: normal;
  }
}

//author

.author {
  padding: 20px;
  background-color: #f8f8f8;

  @include respond-below(sm) {
    .author-row {
      justify-content: center;
    }
  }

  .author-img {
    width: 100px;
    height: 100px;

    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }

  .author-description {
    .author-name {
      color: $base-color;
      font-weight: 600;
      margin-bottom: 10px;
      display: block;

      @include respond-below(sm) {
        margin-top: 10px;
        text-align: center;
      }
    }

    .author-text {
      font-size: 14px;

      @include respond-below(sm) {
        text-align: center;
      }
    }
  }
}

//navigation li

#menu-container-1 {
  ul {
    li {
      ul {
        li {
          background-color: #22303d !important;

          &:hover {
            background-color: $base-color !important;
          }
        }
      }
    }
  }
}

//colors
.aktualności,
.bukowno,
.jaroszowiec,
.klucze,
.łobzów,
.olkusz,
.rabsztyn,
.wolbrom {
  background-color: $news-color !important;
}

.biznes {
  background-color: $business-color !important;
}

.kultura {
  background-color: $culture-color !important;
}

.motoryzacja {
  background-color: $moto-color !important;
}

.publicystyka {
  background-color: $journalism-color !important;
}

.policja {
  background-color: $base-color !important;
}

.polityka {
  background-color: $news-color !important;
}

.sport,
.piłkanożna,
.piłkaręczna,
.fitnessizdrowie,
.sportywalki {
  background-color: $sport-color !important;
}

.table-of-contents {
  margin: 20px 20px 30px 20px;
  box-shadow: 0 0px 3px 0 rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  padding: 5px;

  .title {
    background-color: transparent;
    color: black;
    font-weight: 600;
    margin-bottom: 5px;

    span {
      font-size: 18px !important;
      text-transform: initial;
      font-weight: 400;
    }
  }

  ol {
    li {
      &:before {
        content: counters(item, ".") ". ";
        counter-increment: item;
      }
    }
  }

  ul {
    li {
      &:before {
        content: counters(item, ".") ". ";
        counter-increment: item;
      }
    }
  }

  ol,
  ul {
    list-style: none;
    counter-reset: item;
    padding-left: 20px;

    li {
      position: relative;

      a {
        // color: black;
        color: #269eae;
        // text-decoration: none;
        text-decoration: underline;

        &:hover {
          // color: $base-color;
          color: #1e7e8b;
        }
      }
    }
  }
}

.main {
  .left-section {
    .kitchen.articles {
      display: flex;
      flex-direction: column;

      .articles__big-article {
        display: flex;
        width: 100%;
        border-bottom: none;

        @include respond-below(xs) {
          flex-direction: column;
        }

        img {
          width: 60%;

          @include respond-below(xs) {
            width: 100%;
          }
        }

        #article-main {
          width: 40%;
          margin-top: 0;
          border-bottom: 3px solid $gray-color;
          border-top: 3px solid $gray-color;

          @include respond-below(xs) {
            border-top: none;
            width: 100%;
            // margin: 0 auto;
            // margin-top: -40px;
            // padding: 0 !important;
          }
        }
      }

      .articles__small-articles {
        display: flex;
        width: 100%;
        gap: 30px;

        @include respond-below(xs) {
          flex-wrap: wrap;
        }

        .small-article {
          display: flex;
          flex-direction: column;
          width: 25%;
          margin-top: 0;

          @include respond-below(xs) {
            width: calc(50% - 15px);
          }

          &__img {
            width: 100%;
          }

          #article-main {
            margin-top: 10px;
            width: 100%;
            flex-direction: column-reverse;

            .article-title {
              height: 60px;
            }
          }
        }
      }
    }
  }
}

//gallery
.gallery {
  padding: $main-spacing;

  .gallery-title {
    font-size: 20px;
    font-weight: 600;
  }

  .gallery-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: $small-spacing;

    .gallery-list-item {
      width: calc(25% - 7.5px);
      height: 160px;
      margin: 0;
      padding: 0;

      a {
        width: 100%;
        height: 100%;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
}