.trapezoid-container {
  width: 50%; }
  .trapezoid-container .outer-mask {
    width: 108%; }

.trapezoid-container + .trapezoid-container {
  margin-left: -1%; }
  .trapezoid-container + .trapezoid-container .outer-mask {
    margin-left: 20px; }

@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 108%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 109.2%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 110.4%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 111.6%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 112.8%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 114.0%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 115.2%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 116.4%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 117.6%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 118.8%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 120.0%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 121.2%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 122.4%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 123.6%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 124.8%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 126.0%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 127.2%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 128.4%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 129.6%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 130.8%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 132%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 133.2%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 134.4%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 135.6%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 136.8%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 138.0%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 139.2%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 140.4%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 141.6%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 142.8%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 144.0%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 145.2%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 146.4%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 147.6%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 148.8%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 150.0%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 151.2%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 152.4%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 153.6%; } }
.trapezoid-container {
  @media(max-width: 568px) {
    height: 200px; }
 }
  .trapezoid-container .trapezoid-icon {
    width: 35%;
    @media(max-width: 460px) {
      width: 45%;
      left: 68%;
      top: 55%; }
 }
  .trapezoid-container .event-text {
    @media(max-width: 975px) {
      font-size: 35px; }

    @media(max-width: 568px) {
      font-size: 22px;
      left: 3%; }

    @media(max-width: 460px) {
      font-size: 18px; }

    @media(max-width: 370px) {
      font-size: 16px;
      left: 6%; }
 }

@media(max-width: 568px) {
  .grid-event-item + .grid-event-item {
    margin-top: 10px; }

  .trapezoid-container {
    width: 49%; }
    .trapezoid-container + .trapezoid-container .outer-mask {
      margin-left: 10px; } }

@media(max-width: 322px) {
  .trapezoid-container .outer-mask {
    width: 142%; } }

@media(max-width: 330px) {
  .grid-event-item + .grid-event-item {
    margin-top: 13px; } }

@media(max-width: 568px) {
  .trapezoid-container + .trapezoid-container {
    margin-left: 0%; }
  .trapezoid-container .outer-mask {
    width: 125%; } }

@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 112.0%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 112.4%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 112.8%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 113.2%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 113.6%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 114.0%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 114.4%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 114.8%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 115.2%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 115.6%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 116.0%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 116.4%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 116.8%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 117.2%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 117.6%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 118.0%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 125%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 126.7%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 128.4%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 130.1%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 131.8%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 133.5%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 135.2%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 136.9%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 138.6%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 140.3%; } }
@media (max-width: "#{$width}px") {
  .trapezoid-container .outer-mask {
    width: 142.0%; } }