float-blog/wp-content/themes/float/sass/modules/_home.scss

.home-wrapper {
  .title {
    width: 263.37px;
    margin: auto;
    font-family: 'Abril Fatface';
    font-style: normal;
    font-weight: normal;
    font-size: 132.947px;
    background: linear-gradient(89.24deg, #6063EA 0.49%, #E963A4 99.69%);
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  .post-list-filter {
    &__post-type {
      h2 {
        font-size: 24px;
      }
    }
  }

  .sub-title {
    margin-top: 50px;

    @media (max-width: 500px) {
      display: block !important;

      .social-share {
        margin-top: 15px;
      }
    }

    .line {
      width: 127px;
      height: 10px;
      background: linear-gradient(89.24deg, #6063EA 0.49%, #E963A4 99.69%);
    }
  }

  .pagination-block {
    margin-top: 30px;

    .btn-page {
      cursor: pointer;

      &.btn-default {
        &:hover {
          background-color: #0000001a;
        }

        &.active {
          background-color: #E963A4;
          border-color: #e963a4;
          color: white;

          &:hover {
            background-color: #E963A4;
            border-color: #E963A4;
            color: white;
          }
        }
      }
    }
  }

  .content-wrapper {
    margin-top: 40px;

    .recent-post {
      .row:nth-child(1) {
        .col-md-6 {
          height: 500px;

          @media (max-width: 768px) {
            height: 350px;
          }

          @media (max-width: 500px) {
            height: 300px;
          }

          @media (max-width: 375px) {
            height: 250px;
          }

          &:nth-child(2) {
            @media (max-width: 500px) {
              margin-top: 24px;
            }
          }
        }
      }

      .row:nth-child(2) {
        @media (max-width: 500px) {
          margin-top: 24px;
        }

        .col-md-12 {
          height: 400px;

          @media (max-width: 768px) {
            height: 250px;
          }

          @media (max-width: 500px) {
            height: 200px;
          }

          @media (max-width: 375px) {
            height: 150px;
          }
        }
      }

      .row:nth-child(3) {
        .col-md-6 {
          height: 900px;

          @media (max-width: 768px) {
            height: 600px;
          }

          @media (max-width: 500px) {
            height: 500px;
          }

          @media (max-width: 375px) {
            height: 400px;
          }

          &:nth-child(2) {
            @media (max-width: 500px) {
              margin-top: 24px;
            }
          }
        }
      }
      
    }
  }
}