Incorrect image display for tablet version

[rasokolovska]

Issue Description

Background:

Up to 660px, the image is displayed on the desktop version. This is not correct, as it will take longer to load on tablet extensions.

Here is the HTML structure of the element

 <picture>
      <source srcset="images/research-timer-tablet.png" media="(max-width: 660px)">
      <img class="research__image" src="images/research-timer-desktop.png" alt="Картинка таймера">
  </picture>

Proposed Solution:

When the screen is expanded from 659px to 1199px, the research__image should change to the image for the tablet version. That is, you need to change the property max-width: 660px❌ in the <source> tag to max-width: 1199px✅.

Quick Instruction for Working on the Issue

‼️ Before moving to the new branch, make sure you have the latest updates from the main branch by running the git pull command.

• Please create a new branch and name it fix-source-research-image.
• Change the width in the <sourse> tag to max-width: 1199px

  <picture>
    <source srcset="images/research-timer-tablet.png" media="(max-width: 1199px)">
    <img class="research__image" src="images/research-timer-desktop.png" alt="Картинка таймера">
  </picture>

• Make changes: fix the issue in the branch.
• Thoughtfully test: make sure that the right image is loading on the right extension.
• Open a pull request. Refer to a specific problem in the description of your PR request:

  This pull request resolves #[<issue_number>](link)

[MarPostovik]

.take

[github-actions[bot]]

@MarPostovik 👋 Thanks for showing interest in this issue ❤️ This ticket seems to be in good hands with another contributor.