main {
    margin: 0 auto;
    max-width: 1200px;
}

.cine-info-header {

    border-bottom: 2px solid #D6D6D6;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 40px;
    padding-bottom: 20px;

    & h1 {
        font-family: 'DMSans-bold';
        font-size: 25px;
        color: #363636;
    }

    & span {
        font-family: 'DMSans-medium';
        font-size: 16px;
        color: #8F8F8F;
    }

    & label {
        font-family: 'DMSans-bold';
        font-size: 14px;
        color: #363636;
    }

    & select {
        background: #F9F9F9 0% 0% no-repeat padding-box;
        border: 1px solid #E6E6E6;
        border-radius: 40px;
        padding: 10px;
        font-family: 'DMSans-bold';
        font-size: 12px;
        color: #363636;
        cursor: pointer;
        appearance: none;
        background-image: url("https://dev.atarde.com.br/themes/portal-atr-deploy/assets/cineInsite/img/icons/dropdown.svg");
        background-repeat: no-repeat;
        background-position: right 0.7rem top 50%;
        background-size: 0.65rem auto;
        height: 38px;
        width: 200px;
        padding-left: 22px
    }

    & div {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-top: 15px;
    }
}

.cine-info-container {
    margin-top: 20px;
    margin-bottom: 60px;
    display: flex;
    gap: 25px;
    & .cine-info-section-left {

        max-width: 370px;

        & .cine-info-poster-movie{
            border-radius: 10px;
            box-shadow: 0px 10px 10px #0000000D;
            width: 370px;
            height: 520px;
            overflow: hidden;
            position: relative;

            & .cine-info-poster-mark {
              position: absolute;
              top: 20px;
              right: 0;
              z-index: 999999;

              & img {
                width: 65px;
                height: 20px;
              }
            }
            & img{
              width: 100%;
              height: 100%;
              object-fit: cover;
              object-position: center;
              transition: all 0.3s ease;
              position: relative;
              &:hover{
                transform: scale(1.1);
              }
            }

            & .cine-info-poster-content {

                position: absolute;
                z-index: 99999;
                bottom: 15px;
                left: 15px;
                display: flex;
                align-items: center;
                gap: 12px;
                font-family: 'DMSans-medium';
                font-size: 12px;
                color: var(--white);

                & .classificacao-indicativa {
                    background-color: #03B227;
                    width: 25px;
                    height: 25px;
                    border-radius: 3px;
                    box-shadow: 0px 0px 5px #00000066;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                
                    & span {
                      font-size: 14px;
                      font-family: "DMSans-Bold";
                      color: var(--white);
                    }
                }
            }

            
        }
        
        & .cine-info-description {

            margin-top: 15px;
            display: flex;
            flex-direction: column;
            gap: 10px;

            & h1 {
                font-family: 'DMSans-bold';
                font-size: 16px;
                color: #363636;
            }

            & div {
                display: flex;
                align-items: center;
                gap: 10px;
                margin-bottom: 10px;

                & span {
                    font-family: 'DMSans-bold';
                    font-size: 10px;
                    border: 1px solid #BE10BE;
                    border-radius: 15px;
                    color: #BE10BE;
                    padding: 7px;
                    padding-top: 7px;
                    cursor: pointer;

                    &:hover {
                      background-color: #BE10BE;
                      color: #fff;
                    }
                }
            }

            & p {
                font-family: 'DMSans-medium';
                font-size: 16px;
                color: #6F6F6F;
                line-height: 26px;
            }
        }

        & .cine-info__cast {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-top: 30px;
            & h3 {
              font-family: "DMSans-bold", sans-serif;
              font-size: 16px;
              line-height: 29px;
              color: var(--primaryText);
            }
            & .cine-info__castWrapper {
              display: grid;
              grid-template-columns: repeat(2, 1fr);
              gap: 15px;
              & .cine-info-cast__author {
                display: flex;
                flex-direction: column;
                gap: 10px;
                & figure {
                  width: 170px;
                  height: 170px;
                  overflow: hidden;
                  border-radius: 10px;
                  & img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center;
                    transition: all 0.3s ease;
                    &:hover {
                      transform: scale(1.1);
                    }
                  }
                }
                & figcaption {
                  display: flex;
                  flex-direction: column;
                  & p {
                    font-family: "DMSans-bold", sans-serif;
                    font-size: 10px;
                    line-height: 20px;
                    color: var(--primaryToGray);
                    text-transform: uppercase;
                  }
                  & span {
                    font-family: "DMSans-medium", sans-serif;
                    font-size: 16px;
                    line-height: 20px;
                    color: var(--primaryToGray);
                    text-transform: capitalize;
                  }
                }
              }
            }
            & .cine-info__moreActors {
              display: flex;
              flex-direction: row;
              width: 100%;
              height: 38px;
              justify-content: center;
              align-items: center;
              background-color: var(--btnDark);
              color: var(--primaryToGray);
              gap: 10px;
              user-select: none;
              border-radius: 10px;
              cursor: pointer;
            }
        }

        .cine-info__trailer {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-top: 15px;
            cursor: pointer;
            &:hover {
              #trailer-image {
                transform: scale(1.1);
              }
              
            }
            & h2 {
              font-family: "DMSans-bold", sans-serif;
              font-size: 25px;
              line-height: 29px;
              color: var(--primaryText);
            }
            & .cine-info__trailerWrapper {
              position: relative;
              width: 100%;
              height: 265px;
              border-radius: 10px;
              overflow: hidden;
              &::after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: transparent
                  linear-gradient(180deg, #0f0f0f00 0%, #0f0f0f 100%) 0% 0% no-repeat
                  padding-box;
                z-index: 1;
              }
              & .cine-info-poster-mark {
                position: absolute;
                top: 20px;
                right: 0;
                z-index: 999999;
  
                & img {
                  width: 65px;
                  height: 20px;
                }
              }

              & .classificacao-indicativa {
                background-color: #03B227;
                width: 25px;
                height: 25px;
                border-radius: 3px;
                box-shadow: 0px 0px 5px #00000066;
                display: flex;
                align-items: center;
                justify-content: center;
                position: absolute;
                left: 20px;
                top: 20px;
            
                & span {
                  font-size: 14px;
                  font-family: "DMSans-Bold";
                  color: var(--white);
                }
            }
              & #trailer-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
                transition: all 0.3s ease;
                cursor: pointer;
                &:hover {
                  transform: scale(1.1);
                }
              }
              & .article-trailer__content {
                display: flex;
                flex-direction: row;
                gap: 15px;
                padding: 20px;
                align-items: center;
                position: absolute;
                bottom: 0;
                left: 0;
                z-index: 2;
                & > img {
                  width: 60px;
                  height: 60px;
                }
                & > div {
                  display: flex;
                  flex-direction: column;
                  & span {
                    font-family: "DMSans-bold", sans-serif;
                    font-size: 14px;
                    line-height: 30px;
                    color: var(--auxiliarText);
                  }
                  & p {
                    font-family: "DMSans-Bold", sans-serif;
                    font-size: 25px;
                    line-height: 30px;
                    color: var(--white);
                  }
                }
              }
            }
        }

        & .cine-info__about{
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-top: 15px; 
            & h2 {
              font-family: "DMSans-bold", sans-serif;
              font-size: 25px;
              line-height: 29px;
              color: var(--primaryText);
            }
            & .cine-info__aboutWrapper{
              display: flex;
              flex-direction: column;
              gap: 12px;
              background-color: var(--whiteBg);
              padding: 24px;
              box-shadow: 0px 10px 10px #0000000D;
              border-radius: 10px;
                & p{
                  font-family: "DMSans-bold", sans-serif;
                  font-size: 18px;
                  line-height: 30px;
                  color: var(--primaryToGray);
                }
                & span{
                  font-family: "DMSans-medium", sans-serif;
                  font-size: 16px;
                  line-height: 30px;
                  color: var(--auxiliarText);
                }
            }
          }
    }

    & .cine-info-section-right {
      width: 100%;

      & .cine-info-venue-container {
        background: var(--whiteBg);
        box-shadow: 0px 10px 10px #0000000D;
        border-radius: 10px;
        width: 100%;
        padding: 25px;
        display: flex;
        flex-direction: column;
        gap: 30px;

        & h1 {
          font-family: "DMSans-bold", sans-serif;
          font-size: 25px;
          line-height: 30px;
          color: #C42525;
        }

        & .cine-info-venue {
          display: flex;
          flex-direction: column;
          gap: 10px;
         

          & h1 {
            font-family: "DMSans-bold", sans-serif;
            font-size: 20px;
            color: #484848;
          }

          & span {
            font-family: "DMSans-medium", sans-serif;
            font-size: 14px;
            color: #8F8F8F;
          }

          & .cine-info-venue-options {
            display: flex;
            gap: 15px;

            & .cine-info-venue-option {
              border: 1px solid #BEBEBE;
              border-radius: 10px;
              padding: 8px 20px;
              cursor: pointer;

              & span {
                font-family: "DMSans-bold", sans-serif;
                font-size: 11px;
              }

              & .cine-info-venue-format-leg {
                background: #DAF6FF 0% 0% no-repeat padding-box;
                border-radius: 6px;
                color: #0863A0;
                padding: 3px;
                font-size: 12px;
              }

              & .cine-info-venue-format-dub {
                background: #DEFAD5 0% 0% no-repeat padding-box;
                border-radius: 6px;
                color: #088110;
                padding: 3px;
                font-size: 12px;
              }
            }
          }
        }
      }
    }
}

.cine-info-mobi-btn {
  display: none !important;
}

.cine-info-mobi-description {
  display: none;
}


@media (max-width: 800px) {

  main {
    padding: 20px;
  }

  .cine-info-container {
    flex-direction: column;
  }

  .cine-info-poster-movie {
    width: 100%;
    max-width: 100%;
    max-height: 265px;
  }

  .cine-info-description {
    align-items: center;
    gap: 15px !important;
  }

  .cine-info-description p {
    display: none;
  }

  .cine-info__cast {
    display: none !important;
  }

  .cine-info-section-left {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .cine-info-mobi-btn {
    display: flex;

    & div {
      font-family: "DMSans-bold", sans-serif;
      font-size: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #EAEAEA;
      border-radius: 10px;
      padding: 13px 30px;
      color: #363636;
    }
  }
  
  .cine-info-mobi-description {
    display: flex;
    font-family: "DMSans-medium", sans-serif;
    font-size: 14px;
    color: #6F6F6F;
  }

  .cine-info-poster-content {
    display: none !important;
  }

  .cine-info-venue-option {
    padding: 8px 7px !important;
  }

  .cine-info-venue-container > h1 {
    font-size: 18px;
  }

  .cine-info-venue > h1 {
    font-size: 12px !important;
  }

  .cine-info-venue-container {
    gap: 20px !important;
  }

  .cine-info-header {
    margin-top: 20px;
  }
}