.mydogs{
    text-align: center;
}
.mydogs__title{
    font-size: var(--size-2xl);
    color: var(--clr-dark);

    margin-bottom: 2rem;
}
.mydogs__dog-subtitle{
    font-size: var(--size-lg);
    color: var(--clr-slate600);

    margin-top: 2rem;
    margin-bottom: 1rem;
}
.mydogs__container{
        background-color: rgb(245, 244, 244);
        padding: 2%;
        margin-right: 3%;
        margin-left: 3%;
        border-radius: 10px;
}
.mydogs__dog-title{
    font-size: var(--size-xl);
    color: var(--clr-dark);

    margin-top: 2rem;
    margin-bottom: 1rem;
}
.mydogs__dog{
    margin-bottom: 2rem;
    
}
.mydogs__dog-list{
    display: inline-block;
    text-align: left;
    margin: 0 auto;
    font-size: 1.1rem ;
    color: var(--clr-slate800);
}
.mydogs__dog-list li{
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.4rem;
}
.mydogs__dog-list li::before{
    content: "";
    position: absolute;
    left: 0;
    color: var(--clr-dark);
    font-weight: bold;
}
.mydogs__dog-description1{
    font-size: var(--size-base);
    color: var(--clr-slate800);
    margin-bottom: 1rem;
    margin-top: 0.5rem;
}
.mydogs__dog-description2{
    font-size: var(--size-base);
    color: var(--clr-slate800);
    margin-top: 1.5rem;
}
.mydogs__dog-img{
    border-radius: 25px;
}
.mydogs__gallery-link {
  display: table;      /* makes padding work properly */
  padding: 0.4rem 0.8rem;    /* adds space around text */
  margin: 1rem auto;
  max-width: 100%;             
  text-align: center;             
  font-size: 1rem;            
  color: #ffffff;             
  background-color: #6a9c78; 
  border-radius: 6px;          
  text-decoration: none;       
  transition: background 0.3s; 
}

.mydogs__gallery-link:hover {
  background-color: #55805a;   /* darker on hover */
}

@media (min-width: 475px) {
    .mydogs__title{
        font-size: var(--size-3xl);
    }
    .mydogs__dog-title{
        font-size: var(--size-xl);
        color: var(--clr-dark);
    
        
    }
    .mydogs__dogs-subtitle{
        font-size: var(--size-lg);
    
    }
    .mydogs__dog-description1{
        font-size: var(--size-base);
        
    }
    .mydogs__dog-description2{
        font-size: var(--size-base);
        
    }
  }
  /* sm */
  @media (min-width: 640px) {
    .mydogs__title{
        font-size: var(--size-3xl);
    }
    .mydogs__dog-title{
        font-size: var(--size-2xl);
    }
    .mydogs__dog-subtitle{
        font-size: var(--size-xl);
    
    }
    .mydogs__dog-description1{
        font-size: var(--size-lg);
        margin-bottom: 1rem;
        margin-top: 1.5rem;
    }
    .mydogs__dog-description2{
        font-size: var(--size-lg);
        
    }
  }
  /* md */
  @media (min-width: 768px) {
    .mydogs__container{
        display: grid;
        place-items: center;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
        'image1 content1'
        'content2 image2'
        'image3 content3'
        'content4 image4'
        'image5 content5'
        'content6 image6'
        'image7 content7'
        ;
    }

    .mydogs__image1{
        grid-area: image1;
    }
    .mydogs__image2{
        grid-area: image2;
    }
    .mydogs__image3{
        grid-area: image3;
    }
    .mydogs__image4{
        grid-area: image4;
    }
    .mydogs__image5{
        grid-area: image5;
    }
    .mydogs__image6{
        grid-area: image6;
    }
    .mydogs__image7{
        grid-area: image7;
    }
    .mydogs__content1{
        grid-area: content1;
    }
    .mydogs__content2{
        grid-area: content2;
    }
    .mydogs__content3{
        grid-area: content3;
    }
    .mydogs__content4{
        grid-area: content4;
    }
    .mydogs__content5{
        grid-area: content5;
        font-size: var(--size-sm);
    }
    .mydogs__content6{
        grid-area: content6;
    }
    .mydogs__content7{
        grid-area: content7;
    }
    .mydogs__dog-img{
        margin-top: 2rem;
    }

    .mydogs__title{
       
        font-size: var(--size-4xl);
    }
    .mydogs__dog-title{
        display: block;
        font-size: var(--size-lg);
    }
    .mydogs__dog-subtitle{
        font-size: var(--size-base);
       
    }
    .mydogs__dog-description1{
        font-size: var(--size-xs);
        margin-bottom: 1em 0;
        
    }
    .mydogs__dog-description2{
        font-size: var(--size-xs);
        margin-bottom: 1em;
    }
    .mydogs__dog{
        margin-bottom: 0;
        margin-top: 0;
        
    }
  }
  /* lg */
  @media (min-width: 1024px) {
    .mydogs__title{
        font-size: var(--size-4xl);
        
    }
    .mydogs__dog-subtitle{
        font-size: var(--size-2xl);
       
    }
    .mydogs__dog-title{
        font-size: var(--size-3xl);
    }
    .mydogs__dog-description1{
        font-size: var(--size-xl);
        margin-bottom: 1rem;
        margin-top: 1.5rem;
    }
    .mydogs__dog-description2{
        font-size: var(--size-xl);
        
    }
  }
  
  /* xl */
  @media (min-width: 1280px) {
    .mydogs__title{
        font-size: var(--size-5xl);
        
    }
    .mydogs__dog-subtitle{
        font-size: var(--size-3xl);
        
    }
    .mydogs__dog-title{
        font-size: var(--size-4xl);
    }
    .mydogs__dog-description1{
        font-size: var(--size-xl);
        margin-bottom: 1rem;
        margin-top: 1.5rem;
    }
    .mydogs__dog-description2{
        font-size: var(--size-xl);
        
    }
  }
  /* 2xl */
  @media (min-width: 1536px) {
    .mydogs__title{
        font-size: var(--size-6xl);
        margin-bottom: 2rem;
    }
    .mydogs__dog-title{
        font-size: var(--size-4xl);
    }
    .mydogs__dog-description1{
        font-size: var(--size-2xl);
        margin-bottom: 1rem;
        margin-top: 1.5rem;
    }
    .mydogs__dog-description2{
        font-size: var(--size-2xl);
        
    }
  }