.calendario {
  background: #1F4D6D;
  padding: 3rem 5rem;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-areas: 
      "c_t c_t"
      "c_g c_e"
      "c_n c_e";

}

.calendario_title {
  grid-area: c_t;

}

.calendario_google {
  grid-area: c_g;
  background: #ffffff36;
  padding: 1rem;
  margin: 1rem;
  border-radius: 0.8rem;
  min-width: 30rem;
  height: 27rem;
}

iframe#calendario_google {
  border: none;
  border-radius: 0.5rem;
  width: 100%;
  min-width: 28rem;
  min-height: 25rem;
  /* estava no código do calendário mas ainda não sei o que fazem 
  frameborder: 0;
  scrolling: no;
  */
}


/* calendario_eventos */
.calendario_eventos {
  grid-area: c_e;
  background: #ffffff36;
  border-radius: 0.8rem;
  padding: 1rem;
  margin: 1rem;
  min-width: 30rem;
  max-height: 46rem;
  overflow-x: hidden;
  overflow-y: auto;

  .evento {
    display: flex;
    margin: 0 0 1rem 0;
    background:white;
    border-radius: 0.8rem;
    height: 12rem;

    .foto {
      width: 12rem;
      background: #0f2d4c;
      border-radius: 0.8rem;

      > img {
        width: -webkit-fill-available;
        border-radius: 0.8rem;
      }
    }

    .descrição {
      padding: 1rem;
      overflow: scroll;
      
      > p {
        margin-top: -5px;
        font-family: inherit;
        
        
        
      }
    }
    
  }

}

/* calendario_fotos */
.calendario_fotos {
  height: 18rem;
  grid-area: c_n;
  padding: 1rem;
  margin: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 10px;
  font-family: 'DM Sans', sans-serif;
  transition: background .4s ease-in;
  background-color: none;
  box-sizing: border-box;

}



.calendario_fotos .fotos input[type=radio] {
appearance: none;
background-color: #fff;
margin: 0;
font: inherit;
color: currentColor;
width: 1rem;
height: 1rem;
border: 0.15em solid currentColor;
border-radius: 50%;
}

.calendario_fotos .fotos input[type=radio]::before {
content: "";
width: 0.65em;
height: 0.65em;
border-radius: 50%;
transform: scale(0);
transition: 120ms transform ease-in-out;
box-shadow: inset 1em 1em red;
}

.calendario_fotos .fotos input[type=radio]:checked::before {
transform: scale(1);
}

.calendario_fotos .fotos input[type=radio]:focus {
outline: max(-2px, 0.15em) solid currentColor;
outline-offset: max(2px, 0.15em);
}

.calendario_fotos .fotos .cards .card {
position: absolute;
width: 60%;
height: 100%;
left: 0;
right: 0;
margin: auto;
transition: transform .4s ease;
cursor: pointer;
}

.calendario_fotos .fotos {
width: 100%;
max-width: 800px;
max-height: 600px;
height: 100%;
transform-style: preserve-3d;
display: flex;
justify-content: center;
align-items: center;
}

.calendario_fotos .fotos .cards {
position: relative;
width: 100%;
height: 100%;
margin-bottom: 20px;
}

.calendario_fotos .fotos .cards img {
width: 100%;
height: 100%;
border-radius: 10px;
object-fit: cover;
}
/* rodar 1-4; 2-1; 3-2; 4-3*/
#item-1:checked ~ .cards #song-4, #item-2:checked ~ .cards #song-1, #item-3:checked ~ .cards #song-2, #item-4:checked ~ .cards #song-3 {
transform: translatex(-40%) scale(.8);
opacity: .4;
z-index: 0;
}
/* rodar 1-2; 2-3; 3-4; 4-1*/
#item-1:checked ~ .cards #song-2, #item-2:checked ~ .cards #song-3, #item-3:checked ~ .cards #song-4, #item-4:checked ~ .cards #song-1 {
transform: translatex(40%) scale(.8);
opacity: .4;
z-index: 0;
}
/* rodar 1-1; 2-2; 3-3; 4-4*/
#item-1:checked ~ .cards #song-1, #item-2:checked ~ .cards #song-2, #item-3:checked ~ .cards #song-3, #item-4:checked ~ .cards #song-4 {
transform: translatex(0) scale(1);
opacity: 1;
z-index: 1;

img {
  box-shadow: 0px 0px 5px 0px rgba(81, 81, 81, 0.47);
}
}


/* RESPONSIVE */

@media (max-width: 72rem) {
  .calendario {
      display: grid;
      grid-template-columns: auto;
      grid-template-areas: 
        "c_t ."
        "c_g ."
        "c_n ."
        "c_e .";
      justify-content: center;
      overflow: auto;
    }
}