.three-images-with-text-right-module {
  padding: 48px 0px;

  ul {
    list-style-type: disc;
    margin-left: 20px;
  }

  .block {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    @media screen and (max-width: 768px) {
      grid-template-columns: repeat(1, 1fr);
    }

    .text-block {
      width: 75%;
      margin-left: 25%;
      display: flex;
      flex-direction: column;
      gap: 24px;
      
      @media screen and (max-width: 768px) {
          width: 100%;
          margin-top: 32px;
          margin-left: 0;
          text-align: center;
      }

      h4 {
        text-align: center;
        font-weight: 700;
        font-size: 26px;
        color: #0f1f09;

        &.align-left {
          text-align: left;
        }
      }

      p {
        font-size: 16px;
      }

      .tags-block {
        display: flex;
        flex-direction: column;
        gap: 16px;

        @media screen and (max-width: 767px) {  
            text-align: center;
          }
          
          h6 {
            font-size: 16px;
            font-weight: 700;
            color: #0f1f09;
          }
          
          .tags {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            
            @media screen and (max-width: 767px) {
                justify-content: center;
            }

          .tag {
            padding: 4px 8px;
            border: 1px solid #dfe6dc;
            color: #2e3e28;
            text-decoration: none;
            transition: 75ms;
            background-color: white;

            &:hover {
              background-color: rgb(232, 232, 232);
            }

            span {
              font-size: 14px;
              font-weight: 500;
            }
          }
        }
      }

      .buttons {
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 12px;

        a {
          padding: 12px 20px;
          font-size: 14px;
          color: #2e3e28;
          font-weight: 700;
          transition: 75ms;
          text-decoration: none;

          &.button-primary {
            border: 1px solid #2e3e28;

            &:hover {
              color: white;
              background-color: #2e3e28;
            }
          }

          &.button-secondary {
            &:hover span {
              padding-bottom: 4px;
              border-bottom: 2px solid #2e3e28;
            }
          }
        }
      }
    }

    .image-block {
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;

      &.three-images {
        grid-template-areas:
          "image1 image2"
          "image1 image3";
      }
      
      &.two-images {
        grid-template-areas:
          "image1 image2"
          "image1 image2";
      }
      
      &.one-images {
        display: flex;
      }

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

      .image1 {
        grid-area: image1;
      }

      .image2 {
        grid-area: image2;
      }

      .image3 {
        grid-area: image3;
      }
    }
  }
}