body, html {height: 100%;
    font-family: "Montserrat", sans-serif;
    padding: 0;
    margin: 0;
    box-sizing: border-box;}

.wrapper {display: grid;
    grid-template-rows: auto 2fr auto;
    min-height: 100%;
    box-sizing: border-box;}

/*для iframe*/

.prover {background-color: black;} 

.f {width: 100%;
    height: 135px;
    position: relative;}

.h {width: 100%;
    height: 100px;
    position: relative;}

    iframe {width: 100%;
    max-height: 100%;
    border: 0;
    box-sizing: border-box;
    display: block;
    overflow: hidden;}

/*конец для iframe*/

/*для шапки и футера*/

.header {background-color: #c8a2c8;
    box-sizing: border-box;}

.menu {grid-area: menu;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    padding-top: 20px;
    box-sizing: border-box;}

.logo {font-family: "Prata", serif;
    font-size: 35px;
    text-transform: uppercase;
    color: #fff;
    box-sizing: border-box;
    padding-left: 36px;
    padding-right: 36px;}

.menu-links, .social {color: #fff;
    box-sizing: border-box;}

.menu-links ul, .social ul {margin: 0;
    padding: 0;
    display: flex;}

.menu-links li, .social li {list-style: none;}

.menu-links li a, .social li a {text-decoration: none;
    font-family: "Prata", serif;    
    color: white;
    font-size: 20px;
    padding: 1rem 2rem;
    display: block;}

.link-text {text-decoration: none;
    position: relative;}

.link-text::before {content: "";
    background-color: #555;
    transition: 0.4s ease-out;
    width: 0%;
    height: 2px;
    position: absolute;
    left: 0;
    bottom: -3px;}

.footer {background-color: #013220;
    box-sizing: border-box;}

.f-container {padding-right: 36px;
    padding-left: 36px;
    margin: auto;
    box-sizing: border-box;
    display: grid;
    grid-template-areas:
	"menu menu"
	". social";
    grid-template-rows: auto 4fr;
    grid-template-columns: 2fr auto;
    gap: 5px 10px;}

.social {font-family: "Prata", serif;
    align-items: center;
    color: #fff;
    grid-area: social;}

/*конец для шапки и футера*/

/*для основного блока*/

.m-container {background-color: orange;
    box-sizing: border-box;}

.about-us {font-size: 25px;
    font-family: "Montserrat", sans-serif;
    grid-area: about-us;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 10px;    
    padding: 10px;
    margin: auto;
    max-width: 90%;}

.authors {font-size: 25px;
    font-family: "Montserrat", sans-serif;
    display: grid;
    grid-template: repeat(2, 1fr) / fit-content(100%) auto;    
    gap: 10px;    
    padding: 10px;
    margin: auto;
    max-width: 90%;}

.contacts, .video, .articles {font-size: 25px;
    font-family: "Montserrat", sans-serif;
    padding: 10px;
    margin: auto;}

.main-photo {align-content: center;}

.main-description {color: black;
    align-content: center;
    line-height: 1.5;
    text-align: justify;}

.text-block {margin: auto;
    padding: 10px;
    max-width: 90%;
    box-sizing: border-box;
    text-align: center;
    display: grid;
    grid-template-areas:
	"section section section"
	"picture picture picture"
	"name name name"
	". button-next .";
    grid-template-rows: auto 4fr 4fr auto;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px 10px;}

.section {grid-area: section;
    background-color: #8B2F22;
    font-size: 30px;}

.picture {grid-area: picture;
    background-color: #F5276C;
    display: grid;
    grid-template: 1fr auto/ repeat(3, 1fr);
    gap: 2px 5px;
    padding: 5px;}

.name {grid-area: name;
    background-color: #D632EC;
    display: grid;
    grid-template: 1fr auto/ repeat(3, 1fr);
    gap: 2px 5px;
    padding: 5px;}

.button-next {grid-area: button-next;
    background-color: #E0ED31;
    padding: 5px;}

.miniature {display: block;
    width: 100%;}

.v-block {margin: auto;
    padding: 10px;
    max-width: 90%;
    box-sizing: border-box;
    text-align: center;
    display: grid;
    grid-template-areas:
	"section section section"
	"v-picture v-picture v-picture"
	"v-title v-title v-title"
	". v-button-next .";
    grid-template-rows: auto 4fr 4fr auto;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px 10px;}

.v-picture {grid-area: v-picture;
    background-color: #F5276C;
    display: grid;
    grid-template: 1fr auto/ repeat(3, 1fr);
    gap: 2px 5px;
    padding: 5px;}

.v-title {grid-area: v-title;
    background-color: #D632EC;
    display: grid;
    grid-template: 1fr auto/ repeat(3, 1fr);
    gap: 2px 5px;
    padding: 5px;}

.v-button-next {grid-area: v-button-next;
    background-color: red;
    padding: 5px;}

/*конец для основного блока*/