.cardMyth{
 background-color: var(--submenu-bg-color);
 border-color: var(--submenu-bg-color);
 overflow: hidden;
}
.cardMyth img {
 transform: scale(0.95);
 transition: transform 0.5s ease;
}
.cardMyth img:hover {
 transform: scale(1);
}
.paddingColCardsMyth{
 padding-left: 5px;
 padding-right: 5px;
}



@media only screen and (min-width: 768px) {
 #divGridMthy{
  display: grid;
  grid-template-columns: repeat(25,3vw);
  grid-template-rows: repeat(30,2vw);
  margin: auto;
  z-index: 1;
 }
 #divImgGridMyth{
  margin: auto;
  grid-column: 6/21;
  grid-row: 1/30;
  z-index: -1;
  height: 100%;
 }
 #divTxt1GridMyth{
  grid-column: 1/7;
  grid-row: 9/14;
 }
 #divTxt2GridMyth{
  grid-column: 1/7;
  /* grid-row: 16/25; */
  grid-row: 19/25;
 }
 #divTxt3GridMyth{
  grid-column: 20/26;
  grid-row: 6/16;
 }
 #divTxt4GridMyth{
  grid-column: 20/26;
  grid-row: 20/23;
 }
 
 .imgMyth{
  width: 50vw;
 }

 .divColorMyth{
  /* width: fit-content; */
  width: 50%;
  margin: 0 0 0 auto;
 }

 .card-title-Mtyh{
  /* font-size: 3.5em; */
  font-size: 3vw;
 }

}

@media only screen and (max-width: 767px) {
 #divGridMthy{
  display: grid;
  grid-template-columns: repeat(25,3vw);
  grid-template-rows: repeat(30,2vw);
  margin: auto;
  z-index: 1;
 }
 #divImgGridMyth{
  margin: auto;
  grid-column: 6/21;
  grid-row: 1/30;
  z-index: -1;
  height: 100%;
 }
 #divTxt1GridMyth{
  grid-column: 2/8;
  grid-row: 9/14;
 }
 #divTxt2GridMyth{
  grid-column: 1/8;
  grid-row: 16/25;
 }
 #divTxt3GridMyth{
  grid-column: 19/26;
  grid-row: 7/16;
 }
 #divTxt4GridMyth{
  grid-column: 19/26;
  grid-row: 17/23;
 }

 .imgMyth{
  width: 90vw;
 }


 .divColorMyth{
  /* width: fit-content; */
  width: 80%;
  margin: auto auto auto auto;
  text-align: center;
 }

 .card-title-Mtyh{
  /* font-size: 3.5em; */
  font-size: 10vw;
 }

}