*,
*::before,
*::after {
    box-sizing: border-box;
}

@font-face {
    font-family: 'Tilda Sans';
    src: url('../fonts/tilda-sans_vf.woff2') format('woff2 supports variations'),
       url('../fonts/tilda-sans_vf.woff2') format('woff2-variations');
	font-weight: 250 900;
}

:root {
    --basic-dark: #2c3e50;
    --basic-semi-dark: #34495e;
    --basic-semi-light: #95a5a6;
    --basic-neutral: #bdc3c7;
    --basic-light: #ecf0f1;

    --red: #e55039;
    /* --red-dark: #c0392b; */

    --grid-gap: 54px;
}
@media (max-width: 900px) {
    :root {
        --grid-gap: 32px;
    }
}
@media (max-width: 600px) {
    :root {
        --grid-gap: 24px;
    }
}
@media (max-width: 500px) {
    :root {
        --grid-gap: 16px;
    }
}


html {
    background-color: #fff;
    color: #000;
    font-size: 18px;
    line-height: 1.25;
    font-family: 'Tilda Sans', sans-serif;
}

body {
    margin: 40px;
}
@media (max-width: 600px) {
    body {
        margin: 24px;
    }
}

a {
    color: #000;
}

a:hover {
    color: var(--red);
    text-decoration: none;
}

a:active {
    color: #eb2f06;
}

p {
    margin: 0 0 8px;
}

.header {
    margin: 0 auto;
    max-width: 1500px;
}
.header__h1 {
    font-size: 104px;
    font-weight: 400;
    line-height: 1;
    margin: 100px 0 0;
    padding-top: 80px;
}
@media (max-width: 850px) {
    .header__h1 {
        hyphens: auto;
    }
}
@media (max-width: 780px) {
    .header__h1 {
        font-size: 80px;
        margin: 20px 0 0;
        padding-top: 40px;
    }
}
@media (max-width: 600px) {
    .header__h1 {
        font-size: 64px;
        margin: 0;
        padding-top: 24px;
    }
}
@media (max-width: 400px) {
    .header__h1 {
        font-size: 52px;
        margin: 0;
        padding: 0;
    }
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin: 40px 0;
}
.tags__item {
    font-size: 24px;
    padding-right: 8px;
    color: var(--red);
}
.tags__item::before {
    content: '#';
    font-weight: 200;
    vertical-align: -2px;
    color: var(--red);
    opacity: .5;
}
@media (max-width: 600px) {
    .tags {
        gap: 6px;
        margin: 16x 0;
    }
    .tags__item {
        font-size: 18px;
        padding-right: 4px;
    }
}

.main {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
      "slogan slogan slogan slogan photo photo"
      "person person person person photo photo"
      "projects projects projects projects photo photo"
      "tasks tasks tasks tasks photo photo"
      "finance finance finance finance finance finance"
      ;
    gap: var(--grid-gap);
    margin: 0 auto 160px auto;
    /* min-width: 1200px; */
    max-width: 1500px;
}
@media (max-width: 1000px) {
    .main {
        grid-template-areas:
          "slogan slogan slogan slogan photo photo"
          "person person person person photo photo"
          "projects projects projects projects projects projects"
          "tasks tasks tasks tasks tasks tasks"
          "finance finance finance finance finance finance"
          ;

    }
}
@media (max-width: 600px) {
    .main {
        grid-template-areas:
          "slogan slogan slogan slogan photo photo"
          "person person person person person person"
          "projects projects projects projects projects projects"
          "tasks tasks tasks tasks tasks tasks"
          "finance finance finance finance finance finance"
          ;
    }
}
@media (max-width: 400px) {
    .main {
        grid-template-areas:
          "slogan slogan slogan slogan slogan slogan"
          "photo photo photo photo photo photo"
          "person person person person person person"
          "projects projects projects projects projects projects"
          "tasks tasks tasks tasks tasks tasks"
          "finance finance finance finance finance finance"
          ;
    }
}

/* .main div {
    background-color: rgba(255, 0, 0, .1);
} */

.main h2 {
    font-size: 34px;
    font-weight: 400;
    margin: 0;
}
@media (max-width: 600px) {
    .main h2 {
        font-size: 28px;
    }
}


.main h3 {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: .03rem;
    margin: 0;
}

.slogan {
    grid-area: slogan;
}

.person {
    grid-area: person;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'person-title person-data';
    gap: var(--grid-gap);
    border-top: 1px solid black;
    padding-top: 16px;
}
.person__title {
    grid-area: person-title;
}
.person__data {
    grid-area: person-data;
}
@media (max-width: 600px) {
    .person {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas: 'person-title person-data person-data';
    }
}
@media (max-width: 500px) {
    .person {
        grid-template-columns: 1fr;
        grid-template-areas: 
            'person-title'
            'person-data';
    }
    .person__data {
        margin-left: 24px;
    }
}

.projects {
    grid-area: projects;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'projects-title projects-data';
    gap: var(--grid-gap);
    border-top: 1px solid black;
    padding-top: 16px;
}
.projects__title {
    grid-area: projects-title;
}
.projects__data {
    grid-area: projects-data;
}
@media (max-width: 1000px) {
    .projects {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas: 'projects-title projects-data projects-data';
    }
}
@media (max-width: 500px) {
    .projects {
        grid-template-columns: 1fr;
        grid-template-areas: 
            'projects-title'
            'projects-data';
    }
    .projects__data {
        margin-left: 24px;
    }
}

.tasks {
    grid-area: tasks;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'tasks-title tasks-data';
    gap: var(--grid-gap);
    border-top: 1px solid black;
    padding-top: 16px;
}
.tasks__title {
    grid-area: tasks-title;
}
.tasks__data {
    grid-area: tasks-data;
}
@media (max-width: 1000px) {
    .tasks {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas: 'tasks-title tasks-data tasks-data';
    }
}
@media (max-width: 500px) {
    .tasks {
        grid-template-columns: 1fr;
        grid-template-areas: 
            'tasks-title'
            'tasks-data';
    }
    .tasks__data {
        margin-left: 24px;
    }
}



.finance {
    grid-area: finance;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: 'finance-title price payment';
    gap: var(--grid-gap);
    border-top: 1px solid black;
    padding-top: 16px;
}
@media (max-width: 900px) {
    .finance {
        grid-template-areas: 
            'finance-title price price'
            'finance-title payment payment';
    }
}
@media (max-width: 500px) {
    .finance {
        grid-template-columns: 1fr;
        grid-template-areas: 
            'finance-title'
            'price'
            'payment';
    }
    .finance__title,
    .price,
    .payment {
        margin-left: 24px;
    }
}
.finance__title {
    grid-area: finance-title;
}

.price {
    grid-area: price;
    font-size: 48px;
    color: var(--red);
    margin-top: -11px;
}
@media (max-width: 350px) {
    .price {
        font-size: 40px;
    }
}

.footer {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: 'info info info info info info contact contact contact docs docs docs';
    gap: var(--grid-gap);
    margin: 0 auto;
    max-width: 1500px;
    font-size: 14px;
}

/* .footer div {
    background-color: rgba(255, 0, 0, .1);
} */

.footer__info {
    grid-area: info;
}
.footer__contact {
    grid-area: contact;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: end;
}
.footer__docs {
    grid-area: docs;
    display: flex;
    justify-content: right;
    align-items: end;
}

@media (max-width: 700px) {
    .footer {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
            'info contact'
            'info docs';
    }
    .footer__info {
        display: flex;
        align-items: end;
        justify-content: left;
    }
    .footer__contact {
        align-items: end;
        justify-content: end;
    }
}


.photo {
    grid-area: photo;
    background-image: url('/img/image1.jpg');
    background-position: center center;
    background-size: cover;
}
@media (max-width: 1190px) {
    .photo {
        background-position: 75% center;
    }
}
@media (max-width: 400px) {
    .photo {
        height: 250px;
    }
}

.list {
    margin: 0;
    padding: 0 16px;
}
.list__item {
    margin-bottom: 16px;
}



.oferta {
    margin: 0 auto 100px auto;
    max-width: 90ch;
}

.oferta__breadcrumbs {
    font-size: 14px;
}

.oferta h1 {
    font-size: 48px;
    font-weight: 400;
    line-height: 1.1;
    margin: 100px 0 24px 0;
}

.oferta h2 {
    font-weight: 400;
    line-height: 1.1;
    margin-top: 32px;
    margin-bottom: 16px;
}

.oferta h3 {
    margin-top: 24px;
    margin-bottom: 16px;
}

.oferta p {
    margin-bottom: 16px;
}

.oferta ul {
    margin: 0;
}

.oferta__points {
    list-style: none;
    margin: 0;
    padding-left: 22px;
}

.oferta__link {
    font-size: 14px;
    text-align: right;
    margin-top: 32px;
}

.oferta__link span {
    vertical-align: 2px;
}

@media (max-width: 600px) {
    .oferta {
        font-size: 16px;
        margin-bottom: 24px;
    }
    .oferta h1 {
        font-size: 32px;
        margin-top: 64px;
    }
    .oferta__breadcrumbs {
        font-size: 12px;
    }
    .oferta__link {
        font-size: 12px;
        margin-top: 24px;
    }
}



.payment {
    grid-area: payment;
}

.payment__controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
    margin-bottom: 8px;
}

.payment input[name="name"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden;
}

.payment__input {
    font-family: inherit;
    font-size: 18px;
    padding: 6px 9px;
    border: 1px solid var(--basic-semi-light);
    border: 1px solid var(--basic-neutral);
    border-radius: 3px;
    max-width: 220px;
}

.payment__label {
    position: relative;
}
.payment-label__sign {
    position: absolute;
    top: 6px;
    right: 9px;
    color: var(--basic-semi-light);
}

.payment__button {
    color: #fff;
    background-color: #4a69bd;
    border: 0;
    border-radius: 5px;
    padding: 10px 18px;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: .03rem;
    cursor: pointer;
}
.payment__button:hover {
    background-color: hsl(224, 47%, 55%);
}
.payment__button:active {
    color: rgba(255, 255, 255, .9);
    background-color: #1e3799;    
}

.payment__hint {
    font-size: 14px;
    line-height: 1.1;
    color: var(--basic-semi-light);
}
.payment__hint a {
    color: inherit;
}
.payment__hint a:hover {
    color: var(--red);
    text-decoration: none;
}