:root {
      --mainColor: #333646;
      --bodyBg: #f2f2f5;
      --hoverColor: #1c59bc;
      --btnBg: #1c59bc;
      --btnColor: #ffffff;
      --btnBgHover: #152b8e;
      --navDropBg: #333646;
      --navDropColor: #ffffff;
      --navDropHover: #535770;
      --stickyNavBg: #333646;
      --stickyNavColor: #f7f6fb;
      --sectionBg: #f4f6fb;
    }

    .back2top {
      right: 20px
    }
    
    @media only screen and (max-width:414px) {
      .backtop {
        right: 10px
      }
    }
    
    .random-item__caption {
      min-height: auto !important
    }
    
    .top-section {
      margin-top: 0 !important;
    }
    
    .top-section:not(:first-child) {
      margin-top: 3rem;
    }
    
    @media (max-width:1100px) {
      .top-section {
        margin-bottom: 3rem !important
      }
    }
    
    .top-section__list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      background-color: var(--greyColor);
    }
    
    @media (max-width:1160px) {
      .top-section__list {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    
    @media (max-width:500px) {
      .top-section__list {
        display: block;
      }
    }
    
    .top-section__item {
      position: relative;
    }
    
    .top-section-article {
      display: block;
      position: relative;
      z-index: 10;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      height: 360px;
    }
    
    @media (max-width:1160px) {
      .top-section-article {
        height: 260px;
      }
    }
    
    .top-section-article::before {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      content: "";
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .45) 56%, rgba(0, 0, 0, .45) 100%);
      transition: opacity 400ms ease-in;
    }
    
    .top-section__item:hover .top-section-article::before {
      opacity: 0.8;
      transition: opacity 300ms ease-in;
    }
    
    .top-section-article__caption {
      min-height: 140px;
      padding: 0 2.5rem;
      position: absolute;
      bottom: 2rem;
      left: 0;
      z-index: 1;
      display: flex;
      flex-direction: column;
      width: 100%;
      height: auto;
      transform: translateY(0);
      transition: transform 400ms ease-in-out;
    }
    
    @media (max-width:1300px) {
      .top-section-article__caption {
        padding: 0 2rem;
        min-height: auto;
      }
    }
    
    @media (max-width:700px) {
      .top-section-article__caption {
        padding: 0 1.2rem;
        padding-bottom: 25px;
        bottom: 0;
      }
    }
    
    @media (max-width:500px) {
      .top-section-article__caption {
        padding: 0 2rem;
        padding-bottom: 35px;
      }
    }
    
    .top-section-article__title {
      margin-bottom: auto;
      padding-bottom: 1rem;
      display: block;
      font-size: 1.3rem;
      font-weight: var(--bold);
      line-height: 135%;
    }
    
    @media (max-width:1160px) {
      .top-section-article__title {
        font-size: 1.2rem;
      }
    }
    
    @media (max-width:600px) {
      .top-section-article__title {
        font-size: 1rem;
      }
    }
    
    @media (max-width:500px) {
      .top-section-article__title {
        font-size: 1.3rem;
      }
    }
    
    .top-section-article:hover .hover-bottom-border {
      background-size: 100% 100%;
      transition: background-size 800ms ease-in-out;
    }
    
    .top-section-article__link {
      color: var(--lightColor);
      text-decoration: none
    }
    
    .top-section-article__link:hover {
      color: var(--lightColor);
      text-decoration: none
    }
    
    .site-header {
      padding-top: 1.2rem;
      border-bottom: 1px solid var(--borderColor);
    }
    
    .site-header__wrap {
      margin-bottom: 1.5rem !important;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
    
    @media(max-width: 600px) {
      .site-header__wrap {
        flex-direction: column;
        justify-content: center;
      }
    }
    
    .site-header__btns {
      display: flex;
      justify-content: end;
    }
    
    .site-search-btn {
      margin-left: 1rem;
      width: 38px;
      height: 38px;
      background-color: var(--greyBg);
      color: var(--mainColor);
      border-radius: 50%;
    }
    
    .site-search-btn svg {
      width: 34px;
      height: 34px;
      fill: currentColor;
    }
    
    .site-header__socials,
    .site-header__btns {
      flex: 1;
    }
    
    .site-header__branding {
      margin: 0 auto;
      padding: 0 1rem;
      max-width: 300px;
      display: flex;
      justify-content: center;
      position: relative;
    }
    
    @media(max-width: 1100px) {
      .site-header__branding {
        padding: 0;
        max-width: 230px;
      }
    }
    
    @media(max-width: 600px) {
      .site-header__branding {
        margin-bottom: 1.2rem;
      }
    }
    
    .site-title {
      display: inline-flex;
      text-align: center;
      font-size: 1.4rem;
      font-weight: var(--bold);
      line-height: 115%;
    }
    
    .site-title__link {
      color: var(--mainColor);
      text-decoration: none;
    }
    
    .site-title__link:hover {
      color: var(--hoverColor);
      text-decoration: none;
    }
    
    .mobile-socials-btn {
      margin-right: 1rem;
      position: relative;
      z-index: 1;
      display: none;
      width: 38px;
      height: 38px;
      background-color: var(--greyBg);
      color: var(--mainColor);
      border-radius: 50%;
      overflow: hidden;
      transition: transform 800ms ease-in-out;
    }
    
    .mobile-socials-btn svg {
      width: 24px;
      height: 24px;
      fill: currentColor;
    }
    
    @media(max-width: 1100px) {
      .site-header__socials {
        display: none;
      }
      .mobile-socials-btn {
        display: block;
      }
    }
    
    .toggle-comments {
      margin-bottom: 2rem;
      padding: 1rem 0;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      background-color: var(--btnBg);
      color: var(--btnColor);
      font-family: inherit;
      border-radius: 6px;
      font-size: 1rem;
      line-height: 1;
      font-weight: var(--medium);
      transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
    }
    
    .toggle-comments:hover {
      background-color: var(--btnBgHover);
      color: var(--btnColor);
    }
    
    .toggle-comments svg {
      margin-right: 0.7rem;
      fill: currentColor;
      width: 1.5rem;
      height: 1.5rem;
      object-fit: cover;
    }
    
    .remove-toggle {
      display: none
    }
    
    .comments__wrapper {
      height: 0;
      display: none;
      overflow: hidden;
      opacity: 0;
    }
    
    blockquote {
      border-color: #57e
    }
    
    .recent-list__item::before {
      background-color: #57e
    }
    
    .featured-list__item::before {
      background-color: #e7327d
    }