I will provide you :-
1. HTML code,
2. "Computed" Styles (obtained from "Computed" tab) of all the elements inside this HTML.

Based on these two information, can you generate "CSS" code for the given HTML so that it styles the HTML according to the provided "Computed" styles.

1. HTML code:-

```<div class="cards">
    <div>
      <div>
        <picture>
          <source type="image/webp" srcset="a827d3.jpg">
          <source type="image/webp" srcset="a827d3.jpg">
          <source type="image/jpeg" srcset="a827d3.jpg">
          <img loading="lazy" src="a827d3.jpg">
        </picture>
      </div>
      <div>
        <h2>Uplift Exercise Physiology</h2>
        <p>"""[SimpleSet is] really good! Super quick to setup... Great variety of exercises... You can create and send a high quality, easily digestible program to a patient within minutes, making it a win-win-win for the patient, clinician and business owner."""</p>
        <a href="/cs/uplift" class="">Read More...</a>
      </div>
    </div>
    <div>
      <div>
        <picture>
          <source type="image/webp" srcset="dbf731.jpg">
          <source type="image/webp" srcset="dbf731.jpg">
          <source type="image/jpeg" srcset="dbf731.jpg">
          <img loading="lazy" src="dbf731.jpg">
        </picture>
      </div>
      <div>
        <h2>PHIT Well</h2>
        <p>"""There is an unbeatable value for the cost of [SimpleSet].  We found the intuitive functionality [of SimpleSet] perfect for our high paced clinic, where our clinicians were able to pick up and use the programming without extensive training."""</p>
        <a href="/cs/phitwell" class="">Read More...</a>
      </div>
    </div>
    <div>
      <div>
        <picture>
          <source type="image/webp" srcset="cb978c.jpg">
          <source type="image/webp" srcset="cb978c.jpg">
          <source type="image/jpeg" srcset="cb978c.jpg">
          <img src="cb978c.jpg">
        </picture>
      </div>
      <div>
        <h2>Sports Physio YYC</h2>
        <p>""My motto is teach a person to fish — I breed a culture of being able to maintain and help yourself through a sustainable recovery, and SimpleSet has been a huge player in this.""</p>
        <a href="/cs/ericaholmes" class="">Read More...</a>
      </div>
    </div>
  </div>```

2. "Computed" Styles (obtained from "Computed" tab) of all the elements inside this HTML:-

Lets name link with href = "https://simpleset.net/cs/ericaholmes" as link1. The computed styles of link1 are:-
""	background-color: rgba(0, 0, 0, 0)
	box-sizing: border-box
	clear: none
	color: rgb(255, 255, 255)
	display: block
	flex-direction: row
	float: none
	font-family: Lato, "Trebuchet MS", sans-serif
	font-size: 16px
	font-weight: 700
	height: 59px
	line-height: normal
	margin-bottom: 0px
	margin-left: 47.7031px
	margin-right: 47.7031px
	margin-top: 32px
	padding-bottom: 20px
	padding-left: 20px
	padding-right: 20px
	padding-top: 20px
	text-align: center
	width: 540.594px""

Lets name text with Text Content = ""My motto is teach a person to fish — I breed a culture of being able to maintain and help yourself through a sustainable recovery, and SimpleSet has been a huge player in this."" as text1. The computed styles of text1 are:-
""	background-color: rgba(0, 0, 0, 0)
	box-sizing: border-box
	clear: none
	color: rgb(17, 17, 17)
	display: block
	flex-direction: row
	float: none
	font-family: Lato, "Trebuchet MS", sans-serif
	font-size: 16px
	font-weight: 400
	height: 52px
	line-height: 26px
	margin-bottom: 0px
	margin-left: 0px
	margin-right: 0px
	margin-top: 0px
	padding-bottom: 0px
	padding-left: 0px
	padding-right: 0px
	padding-top: 0px
	text-align: start
	width: 636px""

Lets name text with Text Content = "Sports Physio YYC" as text2. The computed styles of text2 are:-
""	background-color: rgba(0, 0, 0, 0)
	box-sizing: border-box
	clear: none
	color: rgb(17, 17, 17)
	display: block
	flex-direction: row
	float: none
	font-family: Lato, "Trebuchet MS", sans-serif
	font-size: 28px
	font-weight: 700
	height: 41px
	line-height: 41px
	margin-bottom: 32px
	margin-left: 0px
	margin-right: 0px
	margin-top: 0px
	padding-bottom: 0px
	padding-left: 0px
	padding-right: 0px
	padding-top: 0px
	text-align: center
	width: 636px""

link1,text1,text2 is nested inside a container. Lets name this container as container1. The computed styles of container1 are:-
""	background-color: rgba(0, 0, 0, 0)
	box-sizing: border-box
	clear: none
	color: rgb(17, 17, 17)
	display: block
	flex-direction: row
	float: none
	font-family: Lato, "Trebuchet MS", sans-serif
	font-size: 16px
	font-weight: 400
	height: 316px
	line-height: normal
	margin-bottom: 0px
	margin-left: 0px
	margin-right: 0px
	margin-top: 0px
	padding-bottom: 50px
	padding-left: 26px
	padding-right: 26px
	padding-top: 50px
	text-align: start
	width: 688px""

Lets name image with src = "cb978c.jpg" as image1. The computed styles of image1 are:-
""	background-color: rgba(0, 0, 0, 0)
	box-sizing: border-box
	clear: none
	color: rgb(17, 17, 17)
	display: block
	flex-direction: row
	float: none
	font-family: Lato, "Trebuchet MS", sans-serif
	font-size: 16px
	font-weight: 400
	height: 454.078px
	line-height: normal
	margin-bottom: 0px
	margin-left: 0px
	margin-right: 0px
	margin-top: 0px
	padding-bottom: 0px
	padding-left: 0px
	padding-right: 0px
	padding-top: 0px
	text-align: start
	width: 688px""

image1 is nested inside a container. Lets name this container as container2. The computed styles of container2 are:-
""	background-color: rgba(0, 0, 0, 0)
	box-sizing: border-box
	clear: none
	color: rgb(17, 17, 17)
	display: block
	flex-direction: row
	float: none
	font-family: Lato, "Trebuchet MS", sans-serif
	font-size: 16px
	font-weight: 400
	height: 454.078px
	line-height: normal
	margin-bottom: 0px
	margin-left: 0px
	margin-right: 0px
	margin-top: 0px
	padding-bottom: 0px
	padding-left: 0px
	padding-right: 0px
	padding-top: 454.078px
	text-align: start
	width: 688px""

container1,container2 is nested inside a container. Lets name this container as container3. The computed styles of container3 are:-
""	background-color: rgb(238, 238, 238)
	box-sizing: border-box
	clear: none
	color: rgb(17, 17, 17)
	display: block
	flex-direction: row
	float: none
	font-family: Lato, "Trebuchet MS", sans-serif
	font-size: 16px
	font-weight: 400
	height: 770.078px
	line-height: normal
	margin-bottom: 0px
	margin-left: 0px
	margin-right: 0px
	margin-top: 0px
	padding-bottom: 0px
	padding-left: 0px
	padding-right: 0px
	padding-top: 0px
	text-align: start
	width: 688px""

Lets name link with href = "https://simpleset.net/cs/phitwell" as link2. The computed styles of link2 are:-
""	background-color: rgba(0, 0, 0, 0)
	box-sizing: border-box
	clear: none
	color: rgb(255, 255, 255)
	display: block
	flex-direction: row
	float: none
	font-family: Lato, "Trebuchet MS", sans-serif
	font-size: 16px
	font-weight: 700
	height: 59px
	line-height: normal
	margin-bottom: 0px
	margin-left: 47.7031px
	margin-right: 47.7031px
	margin-top: 32px
	padding-bottom: 20px
	padding-left: 20px
	padding-right: 20px
	padding-top: 20px
	text-align: center
	width: 540.594px""

Lets name text with Text Content = ""There is an unbeatable value for the cost of [SimpleSet].  We found the intuitive functionality [of SimpleSet] perfect for our high paced clinic, where our clinicians were able to pick up and use the programming without extensive training."" as text3. The computed styles of text3 are:-
""	background-color: rgba(0, 0, 0, 0)
	box-sizing: border-box
	clear: none
	color: rgb(17, 17, 17)
	display: block
	flex-direction: row
	float: none
	font-family: Lato, "Trebuchet MS", sans-serif
	font-size: 16px
	font-weight: 400
	height: 78px
	line-height: 26px
	margin-bottom: 0px
	margin-left: 0px
	margin-right: 0px
	margin-top: 0px
	padding-bottom: 0px
	padding-left: 0px
	padding-right: 0px
	padding-top: 0px
	text-align: start
	width: 636px""

Lets name text with Text Content = "PHIT Well" as text4. The computed styles of text4 are:-
""	background-color: rgba(0, 0, 0, 0)
	box-sizing: border-box
	clear: none
	color: rgb(17, 17, 17)
	display: block
	flex-direction: row
	float: none
	font-family: Lato, "Trebuchet MS", sans-serif
	font-size: 28px
	font-weight: 700
	height: 41px
	line-height: 41px
	margin-bottom: 32px
	margin-left: 0px
	margin-right: 0px
	margin-top: 0px
	padding-bottom: 0px
	padding-left: 0px
	padding-right: 0px
	padding-top: 0px
	text-align: center
	width: 636px""

link2,text3,text4 is nested inside a container. Lets name this container as container4. The computed styles of container4 are:-
""	background-color: rgba(0, 0, 0, 0)
	box-sizing: border-box
	clear: none
	color: rgb(17, 17, 17)
	display: block
	flex-direction: row
	float: none
	font-family: Lato, "Trebuchet MS", sans-serif
	font-size: 16px
	font-weight: 400
	height: 342px
	line-height: normal
	margin-bottom: 0px
	margin-left: 0px
	margin-right: 0px
	margin-top: 0px
	padding-bottom: 50px
	padding-left: 26px
	padding-right: 26px
	padding-top: 50px
	text-align: start
	width: 688px""

Lets name image with src = "dbf731.jpg" as image2. The computed styles of image2 are:-
""	background-color: rgba(0, 0, 0, 0)
	box-sizing: border-box
	clear: none
	color: rgb(17, 17, 17)
	display: block
	flex-direction: row
	float: none
	font-family: Lato, "Trebuchet MS", sans-serif
	font-size: 16px
	font-weight: 400
	height: 454.078px
	line-height: normal
	margin-bottom: 0px
	margin-left: 0px
	margin-right: 0px
	margin-top: 0px
	padding-bottom: 0px
	padding-left: 0px
	padding-right: 0px
	padding-top: 0px
	text-align: start
	width: 688px""

image2 is nested inside a container. Lets name this container as container5. The computed styles of container5 are:-
""	background-color: rgba(0, 0, 0, 0)
	box-sizing: border-box
	clear: none
	color: rgb(17, 17, 17)
	display: block
	flex-direction: row
	float: none
	font-family: Lato, "Trebuchet MS", sans-serif
	font-size: 16px
	font-weight: 400
	height: 454.078px
	line-height: normal
	margin-bottom: 0px
	margin-left: 0px
	margin-right: 0px
	margin-top: 0px
	padding-bottom: 0px
	padding-left: 0px
	padding-right: 0px
	padding-top: 454.078px
	text-align: start
	width: 688px""

container4,container5 is nested inside a container. Lets name this container as container6. The computed styles of container6 are:-
""	background-color: rgb(238, 238, 238)
	box-sizing: border-box
	clear: none
	color: rgb(17, 17, 17)
	display: block
	flex-direction: row
	float: none
	font-family: Lato, "Trebuchet MS", sans-serif
	font-size: 16px
	font-weight: 400
	height: 796.078px
	line-height: normal
	margin-bottom: 0px
	margin-left: 0px
	margin-right: 0px
	margin-top: 0px
	padding-bottom: 0px
	padding-left: 0px
	padding-right: 0px
	padding-top: 0px
	text-align: start
	width: 688px""

Lets name link with href = "https://simpleset.net/cs/uplift" as link3. The computed styles of link3 are:-
""	background-color: rgba(0, 0, 0, 0)
	box-sizing: border-box
	clear: none
	color: rgb(255, 255, 255)
	display: block
	flex-direction: row
	float: none
	font-family: Lato, "Trebuchet MS", sans-serif
	font-size: 16px
	font-weight: 700
	height: 59px
	line-height: normal
	margin-bottom: 0px
	margin-left: 47.7031px
	margin-right: 47.7031px
	margin-top: 32px
	padding-bottom: 20px
	padding-left: 20px
	padding-right: 20px
	padding-top: 20px
	text-align: center
	width: 540.594px""

Lets name text with Text Content = ""[SimpleSet is] really good! Super quick to setup... Great variety of exercises... You can create and send a high quality, easily digestible program to a patient within minutes, making it a win-win-win for the patient, clinician and business owner."" as text5. The computed styles of text5 are:-
""	background-color: rgba(0, 0, 0, 0)
	box-sizing: border-box
	clear: none
	color: rgb(17, 17, 17)
	display: block
	flex-direction: row
	float: none
	font-family: Lato, "Trebuchet MS", sans-serif
	font-size: 16px
	font-weight: 400
	height: 78px
	line-height: 26px
	margin-bottom: 0px
	margin-left: 0px
	margin-right: 0px
	margin-top: 0px
	padding-bottom: 0px
	padding-left: 0px
	padding-right: 0px
	padding-top: 0px
	text-align: start
	width: 636px""

Lets name text with Text Content = "Uplift Exercise Physiology" as text6. The computed styles of text6 are:-
""	background-color: rgba(0, 0, 0, 0)
	box-sizing: border-box
	clear: none
	color: rgb(17, 17, 17)
	display: block
	flex-direction: row
	float: none
	font-family: Lato, "Trebuchet MS", sans-serif
	font-size: 28px
	font-weight: 700
	height: 41px
	line-height: 41px
	margin-bottom: 32px
	margin-left: 0px
	margin-right: 0px
	margin-top: 0px
	padding-bottom: 0px
	padding-left: 0px
	padding-right: 0px
	padding-top: 0px
	text-align: center
	width: 636px""

link3,text5,text6 is nested inside a container. Lets name this container as container7. The computed styles of container7 are:-
""	background-color: rgba(0, 0, 0, 0)
	box-sizing: border-box
	clear: none
	color: rgb(17, 17, 17)
	display: block
	flex-direction: row
	float: none
	font-family: Lato, "Trebuchet MS", sans-serif
	font-size: 16px
	font-weight: 400
	height: 342px
	line-height: normal
	margin-bottom: 0px
	margin-left: 0px
	margin-right: 0px
	margin-top: 0px
	padding-bottom: 50px
	padding-left: 26px
	padding-right: 26px
	padding-top: 50px
	text-align: start
	width: 688px""

Lets name image with src = "a827d3.jpg" as image3. The computed styles of image3 are:-
""	background-color: rgba(0, 0, 0, 0)
	box-sizing: border-box
	clear: none
	color: rgb(17, 17, 17)
	display: block
	flex-direction: row
	float: none
	font-family: Lato, "Trebuchet MS", sans-serif
	font-size: 16px
	font-weight: 400
	height: 454.078px
	line-height: normal
	margin-bottom: 0px
	margin-left: 0px
	margin-right: 0px
	margin-top: 0px
	padding-bottom: 0px
	padding-left: 0px
	padding-right: 0px
	padding-top: 0px
	text-align: start
	width: 688px""

image3 is nested inside a container. Lets name this container as container8. The computed styles of container8 are:-
""	background-color: rgba(0, 0, 0, 0)
	box-sizing: border-box
	clear: none
	color: rgb(17, 17, 17)
	display: block
	flex-direction: row
	float: none
	font-family: Lato, "Trebuchet MS", sans-serif
	font-size: 16px
	font-weight: 400
	height: 454.078px
	line-height: normal
	margin-bottom: 0px
	margin-left: 0px
	margin-right: 0px
	margin-top: 0px
	padding-bottom: 0px
	padding-left: 0px
	padding-right: 0px
	padding-top: 454.078px
	text-align: start
	width: 688px""

container7,container8 is nested inside a container. Lets name this container as container9. The computed styles of container9 are:-
""	background-color: rgb(238, 238, 238)
	box-sizing: border-box
	clear: none
	color: rgb(17, 17, 17)
	display: block
	flex-direction: row
	float: none
	font-family: Lato, "Trebuchet MS", sans-serif
	font-size: 16px
	font-weight: 400
	height: 796.078px
	line-height: normal
	margin-bottom: 0px
	margin-left: 0px
	margin-right: 0px
	margin-top: 0px
	padding-bottom: 0px
	padding-left: 0px
	padding-right: 0px
	padding-top: 0px
	text-align: start
	width: 688px""

container3,container6,container9 is nested inside a container. Lets name this container as container10. The computed styles of container10 are:-
""	background-color: rgba(0, 0, 0, 0)
	box-sizing: border-box
	clear: none
	color: rgb(17, 17, 17)
	display: grid
	flex-direction: row
	float: none
	font-family: Lato, "Trebuchet MS", sans-serif
	font-size: 16px
	font-weight: 400
	height: 2364.23px
	line-height: normal
	margin-bottom: 0px
	margin-left: 0px
	margin-right: 0px
	margin-top: 0px
	padding-bottom: 0px
	padding-left: 0px
	padding-right: 0px
	padding-top: 0px
	text-align: start
	width: 688px""



Generate "CSS" code for the given HTML block so that it styles the HTML block according to the provided "Computed" styles. Don't included the styles inline, instead generate a separate file for it (external css). Only generate the "CSS" code and no explanation.

The generated CSS code must be around 1000 tokens atleast