#body
{
  article
  {
    padding-bottom:80px;
    header
    {
      
      h1
      {
        padding-bottom:20px;
        margin-bottom: 60px;
        border-bottom: 3px solid $main-color;
      }
    }

    #slider-photo
    {

      width: 816px;
      padding-left:24px;
      padding-right:24px;
      margin:0 auto;
      @media(max-width:815px)
      {
        width: 100%;
      }
      #main-photo
      {
        margin-bottom:20px;
        li
        {
          display: none;
          input
          {
            display: none;
          }
          &:has(input[type=radio]:checked){
            display: block;
          }
          picture
          {
            display: block;
            width: 100%;
            img
            {
              display: block;
              max-width: 100%;
              margin:0 auto;
            }
          }
        }
      }
      #thumbs-photo
      {
        display: flex;
        flex-wrap:wrap;
        li
        {
          label
          {
            display: block;
            cursor: pointer;
          }
          
          width: calc((100% - 40px) / 5);
          margin:0 5px 10px 5px;
          &:nth-child(5n)
          {
            margin-right: 0;
          }
          &:nth-child(5n + 1)
          {
            margin-left: 0;
          }
          picture
          {
            display: block;
            width: 100%;
            padding-top:100%;
            position: relative;
            overflow: hidden;
            img
            {
              display: block;
              position: absolute;
              top:0;
              left:0;
              width: 100%;
              height: 100%;
              object-fit: cover;
              object-position: center;
            }
          }
        }
      }
      #description
      {
        padding:24px 0;
      }
      
    }
  }
}