
.album_P {
    display: grid;
    /*grid-template-columns: 35% 43% 22%;*/
    grid-template-columns: auto auto auto;
    /*grid-template-rows:minmax(min-content, 17rem);*/
    /*grid-template-rows:min-content;*/
    grid-template-rows: auto;
    align-items: stretch;
    height: fit-content;
  }
    /* samo za live */
  .album_P_only {
    overflow-y: scroll;
  }

  .album_P_only::-webkit-scrollbar {
    display: none;
  }

  .album_P_slika {/* .carousel */
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
  }

    .album_P_slika ul {
    display: block;
    width: 100%;
    height: 100%;
    }

  .album_P_slika_button {
    position: absolute;
    display: flex;
    top: 60%;
    transform: translateY(-50%);
    z-index: 10;
    color: var(--color_LunarGreen);
    cursor: pointer;
    justify-content: center;
    align-items: center;
    width:  var(--padding_10);
    height: var(--padding_10);
    background-color: var(--color_RockBlue);
    border-radius: 50%;
  }
  
  .album_P_slika_button svg{
    width:  var(--padding_5);
    height: var(--padding_5);
  }
  .album_P_slika_button.prev {
    left: var(--padding_2);
    }
  
    .album_P_slika_button.prev svg { 
      transform: rotate(270deg);
    }
  
    .album_P_slika_button.next {
      right: var(--padding_2);
      }
  
    .album_P_slika_button.next svg { 
      transform: rotate(90deg);
    } 

  .carousel_slide { /* .slide */
    position: absolute;
    display: flex;
      inset: 0;
      opacity: 0;
    justify-content: center;
    align-items: start;
    width: 100%;
    height: 100%;
    transition: 200ms opacity ease-in-out;
    transition-delay: 200ms;
  }

  .carousel_slide[data-active] { /* .slide */
    opacity: 1;
  }

  .carousel_slide img{
    display: block;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1 / 1 ;
    height: auto;
    object-fit: contain;
  }

  .album_P_seznam {
    padding-left: calc(var(--hamburger-gap) * 3);
    min-height: 0;
  }

  .album_P_seznam ul{
    height: fit-content;
  }
  .album_P_seznam ul li{
    display: flex;
    padding: calc(var(--hamburger-gap) * 0.5) 0;
    flex-direction: row;
    border-bottom: 1px solid var(--color_LunarGreen);
  }

  .album_P_seznam ul li > span {
    width: var(--padding_5);
    text-align: right;
  }

  .album_P_seznam > span h3 {
    border-bottom: 2px solid var(--color_LunarGreen);
    width: 100%;
  }
    .album_P_seznam ul li a{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-content: space-between;
    padding-left: calc(var(--hamburger-gap) * 3);
    color: var(--color_LunarGreen);
  }

  .album_P_seznam ul li a:hover span:first-child {
    transform: translateX(5%);
  }

  .album_P_podrobnosti{
    display: flex;
    margin-left: calc(var(--hamburger-gap) * 3);
    padding: calc(var(--hamburger-gap) * 3);
    padding-left: calc(var(--hamburger-gap) * 3);
    background-color: var(--color_RockBlue);
    /*min-height: 100%; */
    /*min-height: 0;*/
  }

  .album_P_podrobnosti li {
    padding-top: calc(var(--hamburger-gap) * 2);

  }

  .album_P_podrobnosti li span h4{
    font-weight: 900;
  }

  .album_P_podrobnosti ul li a:hover {
    transform: translateX(8%);
  }

  .album_P_slika_download {
    position: absolute;
    display: flex;
    top: var(--padding_2);
    right: var(--padding_2);
    justify-content: center;
    align-items: center;
    width:  var(--padding_10);
    height: var(--padding_10);
    background-color: var(--color_RockBlue);
    border-radius: 50%;
    padding-top: var(--padding_1);
  }

  .album_P_slika_download svg{
    top: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
}

  .album_P_slika_lokacija{
    position: absolute;
    display: flex;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color_LunarGreen);
    font-family: var(--font-Roboto);
    justify-content: center;
    align-items: center;
    width:  calc(var(--padding_10)* 1.2);
    height: calc(var(--padding_10)* 1.2);
    background-color: var(--color_RockBlue);
    border-radius: 50%;
  }
  .album_P_noga{
    grid-column: 1 / 1;
    display: flex;
    justify-content: space-evenly;
    padding-top: var(--padding_5);
    font-weight: 600;
    height: fit-content;
  }

  .album_P_noga_kompilacija{
    grid-column: 1 / span 2;
    flex-direction: column;
  }

  .album_P_noga p {
    padding-bottom: var(--padding_2);
   }



   @media only screen and (max-width: 64em) /*769-1024px*/ {
/*  Albumi  */

    .side_C:has(.album_P){
      overflow: scroll;
    }
    .album_P{
      grid-template-columns: 60% 40%;
      grid-template-rows: 50% auto auto;
      align-items: stretch;
      min-height: 100vh;
      padding-bottom: 1rem;
    }

    .album_P_slika{
      grid-area: 1 / 1 / 2 / 3;
    }

    .album_P_slika ul {
      height: fit-content;
      height: 80%
    }
     .album_P_slika ul li{
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      height: 100%;
    }

    .album_P_seznam {
      grid-area: 2 / 1 / 3 / 2;
      padding-top: var(--padding_5);
      height: fit-content;
    }

    .album_P_podrobnosti {
      grid-area: 2 / 2 / 3 / 3;
    }

    .album_P_noga{
      grid-area: 3 / 1 / 4 / 3;
      /*padding-bottom: var(--padding_5);*/
    }

   }

   @media only screen and (max-width: 48em) /*0-769px*/ {

      /* Albumi */

       .album_P{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 100vw auto auto auto;
        align-items: stretch;
        overflow: scroll;
        padding: 0 var(--padding_3);
      }

      .album_P_slika{grid-area: 1 / 1 / 2 / 3;}
      .album_P_noga{
        grid-area: 2/ 1 / 3 / 3;
        padding: calc(var(--hamburger-gap) * 3);  
      }
      .album_P_seznam {grid-area: 3 / 1 / 3 / 3;}
      .album_P_podrobnosti {grid-area: 4 / 1 / 4 / 3;
        margin-left: calc(var(--hamburger-gap)* -0.5);
        padding-left: calc(var(--hamburger-gap) * 3) !important;}

    .album_P_seznam ul{
      padding-left: calc(var(--hamburger-gap) * 3) !important;
    } */
   }