.missions {
position: relative;
width: calc(100% - 60px);
align-items: flex-start;
margin: 100px 0 70px 0;
}
.missions h2 {
position: absolute;
z-index: 2;
top: -30px;
left: -30px;
margin: 0;
}
.missions__inner {
width: 100%;
align-items: stretch;
}
.missions__col {
width: 50%;
padding: 40px 80px;
color: var(--white);
align-items: flex-start;
}
.missions__col-left {
position: relative;
background-color: var(--green);
padding-top: 85px;
}
.missions__col-left::after {
content: '';
position: absolute;
top: 0;
left: calc(100% - 80px);
width: 80px;
height: 100%;
background-color: var(--green);
transform: skewX(-10deg);
pointer-events: none;
}
.missions__col-left::before {
content: '';
position: absolute;
top: 0;
left: 100%;
width: 80px;
height: 100%;
background-color: var(--black);
transform: skewX(-10deg);
pointer-events: none;
}
.missions__col-right {
background-color: var(--black);
}
.missions__col h3, .missions__col p {
position: relative;
z-index: 2;
}
.missions__col h3 {
margin: 0;
}
.missions__col p {
font-weight: 700;
}
.missions__col a {
color: var(--white);
}
@media (max-width: 1280px) {
.missions__inner {
flex-direction: column;
}
.missions__col {
width: calc(100% - 120px);
padding: 40px 60px;
}
.missions__col-left {
padding-top: 80px;
}
.missions__col-left::after {
top: calc(100% - 30px);
left: 0;
width: 100%;
height: 30px;
transform: skewY(2deg);
}
.missions__col-left::before {
top: 100%;
left: 0;
width: 100%;
height: 80px;
transform: skewY(2deg);
}
}
@media (max-width: 600px) {
.missions {
width: 100%;
margin: 30px 0;
}
.missions h2 {
position: relative;
top: unset;
left: unset;
margin-bottom: 40px;
}
.missions__col {
width: calc(100% - 60px);
padding: 20px 30px;
}
}