/* Отменена настройка body */
/*
body {
  display:grid;
  place-content:center;
  min-height:100vh;
  overflow:hidden;
}
*/

/* Регион экрана для выбранного укрупнённого изображения */
/*
.w {
  width:55vmin;
  height:55vmin;
}
*/

/* мое дополнение для скругленных рамок */
.rounded_border {
    border-radius: 400px; /* Радиус скругления */
    border: 3px solid green; /* Параметры рамки */
    box-shadow: 0 0 7px #666; /* Параметры тени */
}

.w {
  /*width:30vmin;*/
  /* Мое изменение */
  /* height:65vmin; */
  
  /* 1-й вариант */ 
  /* 100vh минус высота шапки */
  height: calc(100dvh - 520px);
  
  /* 2-й вариант */
  /* Первый ряд по контенту, второй — на всю оставшуюся высоту */
  /* 
  display: grid;
  grid-template-rows: auto 1fr; 
  height: 100vh;
  */
  /* 3-й вариант */
  /* Занимает всё оставшееся пространство */
  /* Контейнер на весь экран */
  /*
  flex-grow: 1; 
  display: flex;
  flex-direction: column;
  height: 100vh;
  */

}

.ts {
  /* Площадь показа меню с увеличением */
  /* width:80%; height:100%; */
  width:80%;  
  
  position:relative;
  /* Высота полосы для картинок выбора */
  --barH:25%; /* высота зоны картинок   выбора = 100% - barH */
}

.t {
  --w:30%;
  display:block; 
  width:var(--w); height:var(--barH);
  position:absolute; bottom:0; left:var(--l);
  -webkit-transform-origin:top left;
          transform-origin:top left;
}

.t img {
  /* Уменьшение размеров картинок для выбора */
  dislay:block; width:60%; height:60%;
  -o-object-fit:cover;
     object-fit:cover;
  /* Шкала увеличена до 1.0 */
  -webkit-transform:scale(1.0);
          transform:scale(1.0);
}


[type="radio"] { 
  display:none; 
}

/* моя вставка для гиперссылки */
:checked + label.t a {
  /* left:0;*/
  /* сделано смещение */
  left: 20%;
  bottom:var(--barH);
  /* Выбранное изображение */
  /* Площадь ссылки на выбранном изображении */
  /* width:100%; height:calc(100% - var(--barH)); */
  width:50%; height:calc(100% - var(--barH));;
}

/* выбранное изображение */
:checked + label.t {
  
  /* сделано смещение */
  left: 25%;
  
  /* Смещение снизу */
  /* bottom: var(--barH); */
  bottom: 15%;
  
  /* Площадь на выбранном изображении */
  /* width:100%; height:calc(100% - var(--barH)); */
  width:50%; height:calc(75% - var(--barH));
}

:checked + label.t img {
  -o-object-fit:contain;
     object-fit:contain;
}

/* 
optional
*/

.ts {/* thumbnails bar */
  -webkit-perspective:100px;
          perspective:100px;
  -webkit-perspective-origin:center center;
          perspective-origin:center center;
  -webkit-transform-style:preserve-3d;
          transform-style:preserve-3d;
  pointer-events:none;
}

.ts:after {/* пластина под картинками внизу */
  content:""; /* подпись на пластине в данном примере отсутствует */ 
  display:block; 
  /* Затемнение пластины под картинками */
  /* height 100% - длинная полоса */
  width:100%; height:20%;
  position:absolute; 
  bottom:0;
  background:linear-gradient(transparent 20%, rgba(150,150,150,0.9));
  -webkit-transform:rotateX(90deg)scaleX(1.2);
          transform:rotateX(90deg)scaleX(1.2);
  -webkit-transform-origin:bottom center;
          transform-origin:bottom center;
}

:not(:checked) + .t { /* inactive labels */
  -webkit-transform:translate3d(0, 0, -5px);
          transform:translate3d(0, 0, -5px);
  pointer-events:auto;
}

:not(:checked) + .t:hover {
  -webkit-transform:translate3d(0, -7px, -5px);
          transform:translate3d(0, -7px, -5px);
  box-shadow:0 30px 30px -25px rgba(0,0,0,0.3);
  cursor:pointer;
}

:not(:checked) + .t img {
  -webkit-transform:scale(0.9);
          transform:scale(0.9); /* create gaps */
}

:checked + .t { /* active label */
  box-shadow:0 0 0 transparent;
  -webkit-animation:anim 2s 1;
          animation:anim 2s 1;
} @-webkit-keyframes anim {
  from { -webkit-transform:rotateY(6deg)rotateX(3deg); transform:rotateY(6deg)rotateX(3deg) }
} @keyframes anim {
  from { -webkit-transform:rotateY(6deg)rotateX(3deg); transform:rotateY(6deg)rotateX(3deg) }
}

/* 
transitions
*/
.t {/* active->inactive & hover->rest */
  transition:bottom 0.6s, left 0.6s, width 0.3s, box-shadow 1s, -webkit-transform 0.5s;
  transition:transform 0.5s, bottom 0.6s, left 0.6s, width 0.3s, box-shadow 1s;
  transition:transform 0.5s, bottom 0.6s, left 0.6s, width 0.3s, box-shadow 1s, -webkit-transform 0.5s;
}
.t:hover, :checked + .t {
  transition:bottom 0.6s, left 0.6s, width 0.3s, box-shadow 0s, -webkit-transform 0.5s;
  transition:transform 0.5s, bottom 0.6s, left 0.6s, width 0.3s, box-shadow 0s;
  transition:transform 0.5s, bottom 0.6s, left 0.6s, width 0.3s, box-shadow 0s, -webkit-transform 0.5s;
}