style.css

html, body {
    margin: 0; 
    padding: 0; 
    /* background-color: rgb(196, 255, 216); */
    font-family: "Source Sans 3", sans-serif;
}

.top-section-wrapper {
    background-color: #001D37;
    overflow: hidden;  /* If the screen is small, this will remove the horizontal scroll bar. */
    padding-left: 16px;
    padding-right: 16px;
}

.top-section {
    /* background-color: #3a5974; */
    color: white;
    padding-top: 139px;
    padding-bottom: 139px;
    /* padding-left: 16px;
    padding-right: 16px; */
    max-width: 1066px;
    margin: auto;
    position: relative;
}

.circle {
  background-color: #D660FF;
  width: 617px;
  height: 617px;
  border-radius: 50%;
  opacity: .85;
  filter: blur(150px);
  position: absolute;
  top: 64px;
  right: -390px;
}

.circle-2 {
  background-color: #6079FF;
  width: 617px;
  height: 617px;
  border-radius: 50%;
  opacity: .85;
  filter: blur(150px);
  position: absolute;
  top: -358px;
  left: -123px;
}

.actual-top-content {
  z-index: 2;  /* This can be optional if you write "position: relative" below. */
  position: relative;  /* Write this to make the element/s here on top. */ 
    /*This should follow if you write z-index above so z-index will take effect? */
}

.top-section h1 {
  font-size: 6.25rem;
  margin: 0;
  line-height: 97%;
  max-width: 525px;
}

.intro-text {
  font-size: 1.25rem;
  line-height: 169%;
  margin: 1rem 0;
  max-width: 435px;
}

.intro-buttons {
  margin-bottom: 129px;
}

.intro-features {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr; /* The default is 1fr if you don't declare it! */
  column-gap: 16px;
  row-gap: 16px;
}

.intro-feature {
  border: 1px solid rgba(255, 255, 255, .24);
  padding: 33px 25px;
  /* background-color: #475AFF; */
}

.intro-feature h2 {
  font-size: 1.5rem;
  margin: 35px 0 5px 0;
}

.intro-feature p {
  margin: 0;
  font-size: 1.0625rem;
}

.our-btn {
    display: inline-block;  /* For better upper and lower margins */
    font-size: 1.125em;
    font-weight: 600;
    font-family: "Verdana", serif;
    background-color: #475AFF;
    border: 2px solid #475AFF;
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 200px;
    transition: background-color 0.3s ease-out, border 0.3s ease-out, color 0.3s ease-out;
}

.our-btn:hover {
  background-color: #2236e6;
  border: 2px solid #2236e6;
}

.our-btn-transp {
  background-color: transparent;
  border: 2px solid white;
}

.our-btn-transp:hover {
  background-color: white;
  color: blue;
  border: 2px solid white;
}

.utility-mr {
  /* border: 2px solid white; */
  margin-right: 10px;
}

.page-section {
  background-color: white;
  padding: 130px 16px;
}

.page-section-inner {
  max-width: 1066px;
  margin: 0 auto;
}
.page-section-title {
  font-size: 5.31rem;
  margin: 0;
  line-height: 1;
}

.pets-filter {
  color: #9F9F9F;
  font-size: 1.375rem;
}

.pets-filter button {
  background-color: transparent;
  font-size: 1.375rem;
  border: none;
  font-family: "Source Sans 3", sans-serif;
  color: #9F9F9F;
}

.site-footer {
  text-align: center;
  color: #A6A6A6;
  font-size: 0.875rem;
  margin: 0 0;
  padding: 0 0 65px 0;
}

.list-of-pets {
  display: grid;
  grid-template-columns: 1fr 1fr; 
  column-gap: 34px;
  row-gap: 28px;
}

.pet-card {
  display: grid;
  grid-template-columns: 165px 1fr;
  border-radius: 20px;
  border: 1px solid #f3f3f3;
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.08); 
  overflow: hidden; /* So that the border-radius will be seen. */
}

.pet-card-photo {
  order: 1;
  grid-row: 1; /* To swap the pet-card-text with pet-card-photo*/
}

.pet-card-photo img {
  width: 100%;  /* So that the 165px in grid-template-columns will take effect. */
  display: block; /* So that the gap between the image and the border is removed.*/
  height: 100%; /* So that the image will occupy the whole height. */
  object-fit: cover;  /* So that the image won't be distorted when stretched. */
}

.pet-card-text {
  padding: 15px  25px;
}

.pet-card-text h2{
  margin: 0 0 10px 0;
  font-size: 1.625rem;
  font-weight: 700;
}

.pet-description {
  margin: 0px;
  color: #626262;
  line-height: 150%;
  margin: 0 0 15px 0;
}

.pet-age {
  font-size: .85rem;
  color: #a2a2a2;
  margin: 0;
}

@media screen and (max-width: 600px) {  /* This  rule is for small screen like phones. */
  .top-section {      /* ALWAYS put the @media AFTER the selectors that will be affected. */
    padding-top: 100px;
    padding-bottom: 70px;
  }
  .top-section h1 {
    font-size: 4rem;
  }
  .intro-buttons {
    margin-bottom: 80px;
  }
  .intro-features {     
    grid-template-columns: 1fr;  /* 1 column only for mobile phone screen */
  }
  .page-section {
    padding: 80px 16px;
  }
  .page-section-title {
    font-size: 4rem;
  }
  .pets-filter {
    font-size: 1.15rem;
  }
  .pets-filter button {
    font-size: 1.15rem;
  }
  /* .list-of-pets {
    grid-template-columns: 1fr;            
  } */ /* 1 column only for mobile phone screen */
}

@media screen and (max-width: 800px) {  /* 1 column only for below 800px screen. */
  .list-of-pets {
    grid-template-columns: 1fr; 
    row-gap: 15px;
  }
}

@media screen and (min-width:601px) and (max-width: 900px) {  /* This  rule is for medium screen like tablets. */
  .intro-features {     /* ALWAYS put the @media AFTER the selectors that will be affected. */
    grid-template-columns: 1fr 1fr; /* 2 columns for tablet screen. */
  }
}