/* CONTAINER_STYLES.CSS */

.content-wrapper {
  width: 98%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  /* border: 3px solid red; */
  padding: 1em;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "main_img sidebar1"
    "main_img sidebar2";
    
  justify-content: center;
  gap: 15px;
  width: 98%;
  border: 5px solid #3014cb;
  padding: 2em;
  background-color: #d8d6f0;
}
#main_img_container {
  display: grid;
  grid-area: main_img;
  border: 3px solid green;
  place-items: center;
}
#sidebar1{
  grid-area: sidebar1;
}
#sidebar2 {
  grid-area: sidebar2;
}

.tile {
  padding: 1.5em;
  background-color: #fff;
  border: #000 2px solid;
  /* max-height: 400px; */
}
.main-image-style {
max-width: 100%;
height: auto;
box-shadow: 3px 3px 5px #999;
border: 2px solid #000;
}

.image-style {
max-width: 100%;
height: auto;
box-shadow: 3px 3px 5px #999;
border: 2px solid #000;
}

@media screen and (max-width: 1000px) {
  /* .grid-button {
    font-size: 15px;
   } */
   .grid-container {
    grid-template-columns: 1fr;
    /* grid-template-rows: 0.5fr 0.5fr 1fr; */
    padding: 8px;
    width: 100%;
    grid-template-areas:
      "main_img"
      "sidebar1"
      "sidebar2";
    }
  }