/**
 * ===========
 *  Services
 * ===========
 * */
.services {
  display: grid;
  grid-template: repeat(2, 1fr) / repeat(auto-fit, minmax(min(100%, 25rem), 1fr));
}

.service-item {
  width: 100%;
}

.service-item-image {
  width: 200px;
}

.service-item-image img{
  width: 100%;
}

.service-item-text {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  padding: 2rem 0;
}

.service-item-text h3 {
  margin-bottom: 1rem;
}

.service-item:first-child, .service-item:last-child {
  background-color: #beff7c;
}

.service-item:nth-child(2) {
  background-color: #28f4e7;
}

.service-item:nth-child(3), .service-item:nth-child(4) {
  background-color: #ffe177;
}

.service-item:nth-child(5) {
  background-color: #b19cc0;
}

.service-item-title {
  font-weight: bold;
  font-size: 30px;
  text-align: center;
  max-width: 80%;
}

/**
 * ===========
 *  About
 * ===========
 * */
 .about > div, .what-we-do > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 5rem auto;
  width: 80%;
 }

.about-text, .what-we-do-text {
  width: 25rem;
  margin-right: 2rem;
  margin-bottom: 3em;
}

.about-text p, .what-we-do-text p {
  font-size: 14px;
  font-weight: 100;
  color: gray;
  margin-bottom: 2rem;
  line-height: 1.50rem;
}

.about-image {
  width: 25rem;
}


/**
 * ===========
 * What we do
 * ===========
 * */

.what-we-do {
  background-color: var(--color-ligth-gray);
  padding: 1.5rem 0;
}

.what-we-do-text {
  margin-top: 3em;
}

/**
 * ===========
 * Training
 * ===========
 * */

.training {
  display: grid;
  margin: -3.75rem auto 5rem auto;
  padding: 1.5rem;
  width: 80%;
  background-color: var(--white);
  border-radius: 1rem;
}

.dogs-photos {
  margin-top: .75rem;
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  border-radius: 1rem;
}

.dogs-photos figure.feature {
  grid-column-end: span 2;
  grid-row-end: span 2;
}

.dogs-photos figure.feature-col{
  grid-column-end: span 2;
}

.dogs-photos figure {
  cursor: pointer;
  overflow: hidden;
}

.dogs-photos figure img{
  transform: scale(1);
  transition: 0.3s ease-in-out transform;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.dogs-photos figure img:hover{
  transform: scale(1.1);
  transition: 0.3s ease-in-out transform;
}

.dogs-graduated{
  width: 75%;
  margin: .75rem auto;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.dogs-graduated p{
  display: flex;
  flex-direction: column;
}

.dogs-graduated p span{
  font-family: var(--secondary-font);
  color: gray;
}

/**
 * ===========
 *  History
 * ===========
 * */

.history {
  margin: 5rem auto;
  width: 80%;
}

.history .title {
  text-align: center;
}

.history-grid {
  display: grid;
  grid-column-gap: .78rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  margin-bottom: 1.75rem;
}

.history-btn {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-content: space-between;

  height: 7em;
}

.history-item {
  background-color: #f5f5f5;
  padding: 1.5rem;
  margin: 1.5rem auto;
}

.history-item p{
  font-family: var(--secondary-font);
  line-height: 1.5rem;
  margin-top: 1rem;
}

/**
 * ===========
 *  Footer
 * ===========
 * */

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  background-color: var(--color-middle);
  padding: 1.5rem 5rem;
}

.location {
  color: white;
  font-family: var(--secondary-font);
  line-height: 1.4rem;
  margin-top: 3em;
}

.mapouter {
  position:relative;
  text-align:right;
  height: 280px;
  width: 280px;
  border-radius: 1rem;
}

.gmap_canvas {
  overflow:hidden;
  background:none!important;
  height: 280px;
  width: 280px;
  border-radius: 1rem;
}

@media (max-width: 500px) {
  .dogs-photos {
    grid-template-columns: auto;
  }
}