/* ===== Base Grid Wrapper ===== */ 

.grid-container {
  width: 100%;
  margin: 0 auto;
  --accordion-padding: 20px;
  background-color: #000000;
}

.grid-item-wrapper { 
  
  width: 100%; 
  height: 100%; 
  box-sizing: border-box; 
  /* outline: 2px solid orange; */
 } 

.grid-item-container{
    margin-top: 0;
}

.grid-item-container-title, .grid-item-container-ficha{
  border-radius: 38px;
  
}


.grid-list {
  display: flex;
 
}

.grid-list > .grid-list-item {
  /* background-color: rgba(57, 51, 38,1); */
  display: flex;
  flex-shrink: 0;
  /* outline: 1px solid red; */
}
.grid-item-container-title, .grid-item-container-ficha{
  border-radius: 38px;
  width: auto;
  height: 94vh;
  margin-top: 6vh;
  
}
.grid-item-container-title h1{
  color:orange;
  padding: 0 25px;
  font-size: 10rem;
}
/* .grid-list > .grid-list-item:first-child { padding-left: var(--about-pad); } */
/* .grid-list > .grid-list-item:last-child { padding-right: 100px; } */

 @media (max-width: 768px) and (orientation: portrait){                     /*mobile*/

   .layout-frame8x6{
  position: relative;
  display: flex;
 /*  flex-direction: column; */
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
  gap: var(--gap, 1.5vw);  
  height: 100%;}

   .layout-frame8x6 .card{
    aspect-ratio: 2 / 1;
    max-width: 47%;
   }
  }

 @media (max-width: 1180px) and (orientation: portrait){                     /*mobile*/

  :root { --gap: 4vw; --radius: 3vw; }

    .grid-wrapper {
  overflow: hidden;
  width: 100dvw;
  
  /* background-color: #000000; */
}
.grid-list {
  width: 100dvw;
  
  flex-direction: column;
  /* background-color: rgb(7, 93, 93); */
}
.grid-list > .grid-list-item {
  
  padding: calc(var(--gap)/2)  var(--gap);
}
.grid-list > .grid-list-item:last-child { padding-bottom:  calc(var(--gap)*2); }

  .grid-item-container{
    width: 100%;
    border-radius: 38px;

  }
.grid-item-container-title, .grid-item-container-ficha{
  
  height: auto;
  width: 100dvw;
  /* height: 94vh;
  margin-top: 6vh; */
  
}


  .grid-item-wrapper { 
  display: flex;
  flex-direction: column;
  gap: var(--gap, 1.5vw);  
  height: 100%;
  
}

    .card {
    font-weight: 700;
    font-size: clamp(18px, 6vw, 36px);
    line-height: 1;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
  }
  .card .tile {
  position: absolute;
  width: 100%;
  height: auto;}


   .layout-frame8x6{
  position: relative;
  display: flex;
 /*  flex-direction: column; */
  flex-wrap: wrap;
  justify-content:space-evenly;
  width: 100%;
  gap: calc(var(--gap, 1.5vw)/2);  
  height: 100%;}

   .layout-frame8x6 .card{
    aspect-ratio: 5 /4;
    width: calc((100dvw - (var(--gap, 1.5vw)/1))/4);
    border-radius: calc(var(--radius)/2) ;
   }
  


   .title h1{ color: bisque; position: relative; top: 0px;
          font-size: clamp(1rem, 3vh, 4rem); }
   }


/*=====================================================*/



 @media (max-width: 1180px) and (orientation: landscape), (min-width: 1181px){        /*tablet & desktop*/

  .grid-wrapper {
  overflow: hidden;
  height: 100dvh;
  background-color: #000000;
}

.grid-list{
   height: 100%;
}
.grid-list > .grid-list-item {
  padding: 0 25px;
}
  .grid-item-wrapper { 
    padding: var(--gap, 1.5vw) 0; 
display: grid; 
  gap: var(--gap, 1.5vw);              /* Default gap if not defined */ 
  grid-template-columns: repeat(24, 1fr); 
  grid-template-rows: repeat(12, 1fr); 
 }

  .grid-item-container{
    border-radius: 38px;
    aspect-ratio: 16 / 9;
    height: 94dvh;
    margin-top: 6dvh;

  }

  .grid-item-container-title, .grid-item-container-ficha{
  
  width: auto;
  height: 94vh;
  margin-top: 6vh;
  
}

 .layout-frame8x6{

 height:50vh;
  display:grid;
  padding: var(--gap);
  gap: calc(var(--gap)*.75);
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(6, 1fr);
} 

}


/* ===== Column Spans (C-spanN) ===== */
.C-span1   { grid-column: span 1/ span 2;   } 
.C-span2   { grid-column: span 2 / span 2;} 
.C-span3   { grid-column: span 3/ span 3;   } 
.C-span4   { grid-column: span 4/ span 4;   } 
.C-span5   { grid-column: span 5/ span 5;   } 
.C-span6   { grid-column: span 6/ span 6;   } 
.C-span7   { grid-column: span 7/ span 7;   } 
.C-span8   { grid-column: span 8/ span 8;   } 
.C-span9   { grid-column: span 9/ span 9;   } 
.C-span10  { grid-column: span 10/ span 10;  } 
.C-span11  { grid-column: span 11/ span 11;  } 
.C-span12  { grid-column: span 12/ span 12;  } 
.C-span13  { grid-column: span 13/ span 13;  } 
.C-span14  { grid-column: span 14/ span 14;  } 
.C-span15  { grid-column: span 15/ span 15;  } 
.C-span16  { grid-column: span 16/ span 16;  } 
.C-span17  { grid-column: span 17/ span 17;  } 
.C-span18  { grid-column: span 18/ span 18;  } 
.C-span19  { grid-column: span 19/ span 19;  } 
.C-span20  { grid-column: span 20/ span 20;  } 
.C-span21  { grid-column: span 21/ span 21;  } 
.C-span22  { grid-column: span 22/ span 22;  } 
.C-span23  { grid-column: span 23/ span 23;  } 
.C-span24  { grid-column: span 24/ span 24;  } 
 
/* ===== Row Spans (R-spanN) ===== */ 
.R-span1   { grid-row: span 1 /span 1;   } 
.R-span2   { grid-row: span 2/span 2;   } 
.R-span3   { grid-row: span 3/span 3;   } 
.R-span4   { grid-row: span 4/span 4;   } 
.R-span5   { grid-row: span 5/span 5;   } 
.R-span6   { grid-row: span 6/span 6;   } 
.R-span7   { grid-row: span 7/span 7;   } 
.R-span8   { grid-row: span 8/span 8;   } 
.R-span9   { grid-row: span 9/span 9;   } 
.R-span10  { grid-row: span 10/span 10;  } 
.R-span11  { grid-row: span 11/span 11;  } 
.R-span12  { grid-row: span 12/span 12;  } 
 
/* ===== Column Start Positions (col-SN) ===== */ 
.col-S1   { grid-column-start: 1;   } 
.col-S2   { grid-column-start: 2;   } 
.col-S3   { grid-column-start: 3;   } 
.col-S4   { grid-column-start: 4;   } 
.col-S5   { grid-column-start: 5;   } 
.col-S6   { grid-column-start: 6;   } 
.col-S7   { grid-column-start: 7;   } 
.col-S8   { grid-column-start: 8;   } 
.col-S9   { grid-column-start: 9;   } 
.col-S10  { grid-column-start: 10;  } 
.col-S11  { grid-column-start: 11;  } 
.col-S12  { grid-column-start: 12;  } 
.col-S13  { grid-column-start: 13;  } 
.col-S14  { grid-column-start: 14;  } 
.col-S15  { grid-column-start: 15;  } 
.col-S16  { grid-column-start: 16;  } 
.col-S17  { grid-column-start: 17;  } 
.col-S18  { grid-column-start: 18;  } 
.col-S19  { grid-column-start: 19;  } 
.col-S20  { grid-column-start: 20;  } 
.col-S21  { grid-column-start: 21;  } 
.col-S22  { grid-column-start: 22;  } 
.col-S23  { grid-column-start: 23;  } 
.col-S24  { grid-column-start: 24;  } 
 
/* ===== Row Start Positions (row-SN) ===== */
.row-S1   { grid-row-start: 1;   } 
.row-S2   { grid-row-start: 2;   } 
.row-S3   { grid-row-start: 3;   } 
.row-S4   { grid-row-start: 4;   } 
.row-S5   { grid-row-start: 5;   } 
.row-S6   { grid-row-start: 6;   } 
.row-S7   { grid-row-start: 7;   } 
.row-S8   { grid-row-start: 8;   } 
.row-S9   { grid-row-start: 9;   } 
.row-S10  { grid-row-start: 10;  } 
.row-S11  { grid-row-start: 11;  } 
.row-S12  { grid-row-start: 12;  } 
 
.outline { outline: 2px solid bisque;}
/*================================ Exeptions to Grid
==========================================*/


section.layout {
  aspect-ratio: 16 / 9;
  width: 100vw;
  max-height: 100vh;
  margin: 0 auto;
  z-index: 2;
  
  
}

.layout .title {
  position: relative;
  height: 8vh;
  padding: var(--gap);
  margin: var(--gap)  0 ;
  display: grid;
 justify-content: center;
 align-content: center;
  }

.title h1{ color: bisque; position: relative; top: 0px; 
  
}

.layout {
  padding: clamp(12px, 2vw, 24px) clamp(12px, 2vw, 24px) calc(clamp(12px, 2vw, 24px) + var(--gap))  clamp(12px, 2vw, 24px);
  overflow: hidden;
  background-color: rgba(51, 51, 51, 0);
  display: grid;
  background: linear-gradient(180deg,orange, #990057 100%);
  /* margin: 0 0 var(--gap)  0 ; */
  /* height: 100%; */
}

/*  .layout-frame8x6{
outline: 2px solid orange; */
/*  height:50vh;
  display:grid;
  padding: var(--gap);
  gap: calc(var(--gap)*.75);
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(6, 1fr);
} */