@import './vars.css';

@media (min-width: 576px) {
  .save__img {
    margin: 0;
  }
}

@media (min-width: 767px) {
  .main {
    padding: 84px 0 0;
  }

  .main-title {
    font-size: 64px;
  }

  /* header */

  .header {
    padding: var(--base-spacing) 0;
    height: 84px;
  }

  /* post */

  .post {
    margin-bottom: var(--margin-96);
  }

  .post {
    padding: 0;
  }

  .post-item-wrapper:first-child .post-item {
    padding: 0;
    margin: 0 12px var(--margin-24);
    height: 400px;
  }

  .post-item {
    padding: 0;
    margin: 0 12px;
    height: 400px;
  }

  /* team */

  .team {
    margin: 0 0 70px;
  }

  .team-item-wrapper {
    margin: -12px -12px var(--margin-16);
  }

  .team-item {
    height: 306px;
    padding: 0;
  }

  .team__info {
    padding: 0;
  }

  .team__title {
    margin: 0 0 21px;
    font-size: 42px;
  }

  .team__desc {
    font-size: 28px;
    line-height: 36px;
  }

  .team__subtitle {
    font-size: 28px;
  }

  /* start */

  .start {
    display: flex;
    align-items: center;
    padding: var(--margin-48) 0 var(--margin-16);
  }

  .start__days {
    height: 53px;
    width: 53px;
  }

  .start__days span {
    font-size: 32px;
  }

  .start__text {
    margin: 0;
    color: var(--color-gray);
    font-weight: 400;
    font-size: 24px;
  }

  .save-item-wrapper {
    position: relative;
  }

  .line-left {
    position: absolute;
    right: calc(50% + 400px);
    bottom: 0;
    width: 1000px;
    height: 10px;
    background-color: var(--color-blue);
  }

  .line-left::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -100px;
    height: 10px;
    width: 1000px;
    background-color: var(--color-yellow);
  }

  .line-right {
    position: absolute;
    left: calc(50% - 100px);
    bottom: 0;
    width: 10000px;
    height: 10px;
    background-color: var(--color-yellow);
  }

  .line-right:after {
    content: '';
    position: absolute;
    top: 100%;
    left: -100px;
    height: 10px;
    width: 10000px;
    background-color: var(--color-blue);
  }

  .save {
    margin: 0 0 var(--margin-112);
  }

  .save-item-wrapper {
    max-width: 100%;
  }

  .save__text {
    margin: 0 0 50px;
    max-width: 540px;
  }

  .save__img {
    height: auto;
  }

  .save__img img {
    top: 0;
  }

  .action {
    align-items: flex-start;
  }

  .action__title {
    margin: 0 0 10px;
    color: var(--color-blue);
    font-size: 24px;
  }

  .detail-info {
    padding: 0 0 0 6px;
  }

  .detail-info-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 0 var(--base-spacing);
  }

  .detail-info-wrapper .social {
    margin: 0;
  }

  .detail-info__link {
    font-size: 32px;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
  }

  .detail-info__icon {
    margin: 0 30px 0 0;
  }

  .contacts {
    padding: var(--margin-48) 0 18px;
  }

  .contacts-form__title {
    font-size: 32px;
  }

  .form__btn {
    margin: 0;
  }

  .arrow-top {
    right: 22px;
    bottom: 250px;
    width: 56px;
    height: 56px;
    padding: 0;
  }

  /* invoice */

  .invoice {
    padding: var(--margin-32) 0;
    margin: 0 0 var(--margin-32);
  }

  .invoice-text__row {
    padding: 0 35px 0 0;
  }

  .invoice-text__row.invoice-text__row--with-icon .invoice-text__icon {
    display: none;
  }

  .invoice-text__row.invoice-text__row--with-icon:hover .invoice-text__icon {
    display: block;
  }

  .invoice-box__title {
    margin: 0 0 20px;
    font-size: 32px;
  }
  
  .invoice-text__row:hover .invoice-text__desc {
    color: var(--color-blue);
  }
  
  .invoice-text__row:hover .invoice-text__icon {
    display: block;
  }

  .invoice-box__button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 5px var(--base-spacing);
    padding: 0;
    width: 20px;
    height: 20px;
    outline: none;
    border: none;
    background: none;
    cursor: pointer;
  }

  .invoice-box__button svg {
    fill: var(--color-blue);
  }

  .invoice-box__button:hover svg {
    fill: var(--color-blue-hover);
  }

  .invoice-box__button:active svg {
    fill: var(--color-blue-active);
  }

  .invoice-text {
    font-size: 16px;
  }

  .invoice-text__desc.invoice-text__desc--hide {
    display: block;
  }
  
  .invoice-text__desc.invoice-text__desc--mobile {
    display: none;
  }

  .invoice-text__desc.invoice-text__desc--mobile + .invoice-text__icon {
    display: none;
    margin: 0;
  }

  /* announcement */

  .announcement {
    padding: var(--margin-16) 0;
    margin: 0 0 var(--margin-16);
  }

  /* gallery */

  .gallery-item__image {
    padding: 69.232% 0 0;
  }

  /* album */

  .album .loader-container {
    margin-top: 15vh;
  }

  .main-controls {
    margin: 0 0 var(--margin-32);
  }

  .main-controls__wrapper {
    justify-content: space-between;
  }

  .breadcrumbs {
    display: block;
  }
  
  .breadcrumbs__item {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
  }
  
  .breadcrumbs__item:last-child {
    color: var(--color-gray);
  }
  
  .breadcrumbs__item:not(:last-child) {
    position: relative;
    padding: 0 22px 0 0;
    color: var(--color-blue);
    text-decoration: none;
  }
  
  .breadcrumbs__item:not(:last-child):hover {
    color: var(--color-blue-hover);
  }
  
  .breadcrumbs__item:not(:last-child):active {
    color: var(--color-blue-active);
  }
  
  .breadcrumbs__item:not(:last-child):after {
    content: '/';
    position: absolute;
    right: 8px;
    color: var(--color-gray);
  }

  .date {
    font-size: 16px;
  }

  .album {
    margin: 0 0 var(--margin-48);
  }

  .album-grid-sizer,
  .album-grid-item {
    width: 50%;
  }

  /* news */

  .news-item {
    flex-direction: row;
  }

  .news-item__img {
    width: 216px;
    margin: 0 var(--margin-24) 0 0;
    padding: 33% 0 0;
  }

  .news-item__desc {
    margin: 0;
  }

  /* post */

  .post-section {
    padding: var(--margin-48) 0 var(--margin-64);
  }

  .post-section__content {
    margin: 0 0 var(--margin-64);
  }

  .post-section__content h1 {
    font-size: 42px;
  }

  .post-section__content p,
  .post-section__content span,
  .post-section__content ol,
  .post-section__content ul {
    font-size: 16px;
  }

  .post-section__controls {
    margin: 0 auto var(--margin-64);
  }

  .banner {
    flex-direction: row;
    justify-content: space-between;    
  }

  .banner__title {
    margin: 0;
    font-size: 32px;
    text-align: left;
  }

  .banner__btn {
    transform: translateY(-4px);
  }

  .block-select__buttons-list {
    border-radius: 10px;
    background-color: var(--color-white);
  }

  .block-select__buttons-list_mob-row {
    display: flex;
  }

  .block-select__buttons-list_mob-row .block-select__button {
    margin-bottom: 0;
  }

  .block-select__button {
    margin-right: 0;
    min-height: 48px;
    color: var(--color-text);
    font-weight: 700;
  }

  .block-select__button:before {
    content: '';
    display: block;
    position: absolute;
    width: 1px;
    height: 100%;
    left: 0;
    top: 0;
    background-color: var(--color-separator);
  }

  .block-select__button:first-child:before,
  .block-select__button:first-of-type:before,
  .block-select__button.active:before,
  .block-select__button.active + .block-select__button:before,
  .radio-box__input:checked + .block-select__button:before,
  .radio-box__input:checked + label + input + .block-select__button:before
  {
    display: none;
  }

  .invoice-tabs {
    padding: var(--margin-32);
  }

  .form-invoice__input {
    height: 48px;
    font-size: 16px;
  }

  .form-invoice__input::-webkit-input-placeholder {
    font-size: 16px;
  }

  .form-invoice__input:-moz-placeholder           {
    font-size: 16px;
  }

  .form-invoice__input::-moz-placeholder          {
    font-size: 16px;
  }

  .form-invoice__input:-ms-input-placeholder      {
    font-size: 16px;
  }

  .card-list__item {
    width: 56px;
  }

  .footer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 0 24px;
  }

  .footer-col_d-1 {
    order: 1;
    justify-content: flex-start;
    padding-top: 27px;
  }

  .footer-col_d-2 {
    order: 2;
    justify-content: center;
  }

  .footer-col_d-3 {
    order: 3;
    justify-content: flex-end;
  }

  .footer-col {
    align-items: center;
    flex: 1 0 0%;
  }

  .footer-col + * {
    margin-top: 0;
  }

  .soc-net-list {
    justify-content: flex-start;
  }

  .confirmed-content__icon {
    width: 320px;
    height: 300px;
  }

  .confirmed-content__text {
    font-size: 42px;
    margin: var(--margin-16) 0 0;
  }

  .block-select__title {
    font-weight: 600;
  }

  .monobank img {
    width: 60%;
  }
}