:root {
  --primary: #4dbbce;
  --secondary: #283c55;
  --orange: #fabe69;
  --grey: #f4f3f5;
  --container-padding: 20px;
  --container-width: calc(100vw - var(--container-padding) * 2);
  --space: 8px
}

@media only screen and (min-width: 1225px) {
  :root {
    --container-padding:20px;
    --container-width: 1185px
  }
}

.mt-1 {
  margin-top: calc(1 * var(--space))!important
}

.mb-1 {
  margin-bottom: calc(1 * var(--space))!important
}

.pt-1 {
  padding-top: calc(1 * var(--space))!important
}

.pb-1 {
  padding-bottom: calc(1 * var(--space))!important
}

.my-1 {
  margin-top: calc(1 * var(--space))!important;
  margin-bottom: calc(1 * var(--space))!important
}

.py-1 {
  padding-top: calc(1 * var(--space))!important;
  padding-bottom: calc(1 * var(--space))!important
}

.mt-n1 {
  margin-top: calc((1 * var(--space)) * -1)!important
}

.mb-n1 {
  margin-bottom: calc((1 * var(--space)) * -1)!important
}

@media (min-width: 768px) {
  .sm\:mt-n1 {
    margin-top:calc((1 * var(--space)) * -1)!important
  }

  .sm\:px-1 {
    padding-left: calc(1 * var(--space))!important;
    padding-right: calc(1 * var(--space))!important
  }

  .sm\:mx-n1 {
    margin-left: calc((1 * var(--space)) * -1)!important;
    margin-right: calc((1 * var(--space)) * -1)!important
  }
}

.mt-2 {
  margin-top: calc(2 * var(--space))!important
}

.mb-2 {
  margin-bottom: calc(2 * var(--space))!important
}

.pt-2 {
  padding-top: calc(2 * var(--space))!important
}

.pb-2 {
  padding-bottom: calc(2 * var(--space))!important
}

.my-2 {
  margin-top: calc(2 * var(--space))!important;
  margin-bottom: calc(2 * var(--space))!important
}

.py-2 {
  padding-top: calc(2 * var(--space))!important;
  padding-bottom: calc(2 * var(--space))!important
}

.mt-n2 {
  margin-top: calc((2 * var(--space)) * -1)!important
}

.mb-n2 {
  margin-bottom: calc((2 * var(--space)) * -1)!important
}

@media (min-width: 768px) {
  .sm\:mt-n2 {
    margin-top:calc((2 * var(--space)) * -1)!important
  }

  .sm\:px-2 {
    padding-left: calc(2 * var(--space))!important;
    padding-right: calc(2 * var(--space))!important
  }

  .sm\:mx-n2 {
    margin-left: calc((2 * var(--space)) * -1)!important;
    margin-right: calc((2 * var(--space)) * -1)!important
  }
}

.mt-3 {
  margin-top: calc(3 * var(--space))!important
}

.mb-3 {
  margin-bottom: calc(3 * var(--space))!important
}

.pt-3 {
  padding-top: calc(3 * var(--space))!important
}

.pb-3 {
  padding-bottom: calc(3 * var(--space))!important
}

.my-3 {
  margin-top: calc(3 * var(--space))!important;
  margin-bottom: calc(3 * var(--space))!important
}

.py-3 {
  padding-top: calc(3 * var(--space))!important;
  padding-bottom: calc(3 * var(--space))!important
}

.mt-n3 {
  margin-top: calc((3 * var(--space)) * -1)!important
}

.mb-n3 {
  margin-bottom: calc((3 * var(--space)) * -1)!important
}

@media (min-width: 768px) {
  .sm\:mt-n3 {
    margin-top:calc((3 * var(--space)) * -1)!important
  }

  .sm\:px-3 {
    padding-left: calc(3 * var(--space))!important;
    padding-right: calc(3 * var(--space))!important
  }

  .sm\:mx-n3 {
    margin-left: calc((3 * var(--space)) * -1)!important;
    margin-right: calc((3 * var(--space)) * -1)!important
  }
}

.mt-4 {
  margin-top: calc(4 * var(--space))!important
}

.mb-4 {
  margin-bottom: calc(4 * var(--space))!important
}

.pt-4 {
  padding-top: calc(4 * var(--space))!important
}

.pb-4 {
  padding-bottom: calc(4 * var(--space))!important
}

.my-4 {
  margin-top: calc(4 * var(--space))!important;
  margin-bottom: calc(4 * var(--space))!important
}

.py-4 {
  padding-top: calc(4 * var(--space))!important;
  padding-bottom: calc(4 * var(--space))!important
}

.mt-n4 {
  margin-top: calc((4 * var(--space)) * -1)!important
}

.mb-n4 {
  margin-bottom: calc((4 * var(--space)) * -1)!important
}

@media (min-width: 768px) {
  .sm\:mt-n4 {
    margin-top:calc((4 * var(--space)) * -1)!important
  }

  .sm\:px-4 {
    padding-left: calc(4 * var(--space))!important;
    padding-right: calc(4 * var(--space))!important
  }

  .sm\:mx-n4 {
    margin-left: calc((4 * var(--space)) * -1)!important;
    margin-right: calc((4 * var(--space)) * -1)!important
  }
}

.mt-5 {
  margin-top: calc(5 * var(--space))!important
}

.mb-5 {
  margin-bottom: calc(5 * var(--space))!important
}

.pt-5 {
  padding-top: calc(5 * var(--space))!important
}

.pb-5 {
  padding-bottom: calc(5 * var(--space))!important
}

.my-5 {
  margin-top: calc(5 * var(--space))!important;
  margin-bottom: calc(5 * var(--space))!important
}

.py-5 {
  padding-top: calc(5 * var(--space))!important;
  padding-bottom: calc(5 * var(--space))!important
}

.mt-n5 {
  margin-top: calc((5 * var(--space)) * -1)!important
}

.mb-n5 {
  margin-bottom: calc((5 * var(--space)) * -1)!important
}

@media (min-width: 768px) {
  .sm\:mt-n5 {
    margin-top:calc((5 * var(--space)) * -1)!important
  }

  .sm\:px-5 {
    padding-left: calc(5 * var(--space))!important;
    padding-right: calc(5 * var(--space))!important
  }

  .sm\:mx-n5 {
    margin-left: calc((5 * var(--space)) * -1)!important;
    margin-right: calc((5 * var(--space)) * -1)!important
  }
}

.mt-6 {
  margin-top: calc(6 * var(--space))!important
}

.mb-6 {
  margin-bottom: calc(6 * var(--space))!important
}

.pt-6 {
  padding-top: calc(6 * var(--space))!important
}

.pb-6 {
  padding-bottom: calc(6 * var(--space))!important
}

.my-6 {
  margin-top: calc(6 * var(--space))!important;
  margin-bottom: calc(6 * var(--space))!important
}

.py-6 {
  padding-top: calc(6 * var(--space))!important;
  padding-bottom: calc(6 * var(--space))!important
}

.mt-n6 {
  margin-top: calc((6 * var(--space)) * -1)!important
}

.mb-n6 {
  margin-bottom: calc((6 * var(--space)) * -1)!important
}

@media (min-width: 768px) {
  .sm\:mt-n6 {
    margin-top:calc((6 * var(--space)) * -1)!important
  }

  .sm\:px-6 {
    padding-left: calc(6 * var(--space))!important;
    padding-right: calc(6 * var(--space))!important
  }

  .sm\:mx-n6 {
    margin-left: calc((6 * var(--space)) * -1)!important;
    margin-right: calc((6 * var(--space)) * -1)!important
  }
}

.mt-7 {
  margin-top: calc(7 * var(--space))!important
}

.mb-7 {
  margin-bottom: calc(7 * var(--space))!important
}

.pt-7 {
  padding-top: calc(7 * var(--space))!important
}

.pb-7 {
  padding-bottom: calc(7 * var(--space))!important
}

.my-7 {
  margin-top: calc(7 * var(--space))!important;
  margin-bottom: calc(7 * var(--space))!important
}

.py-7 {
  padding-top: calc(7 * var(--space))!important;
  padding-bottom: calc(7 * var(--space))!important
}

.mt-n7 {
  margin-top: calc((7 * var(--space)) * -1)!important
}

.mb-n7 {
  margin-bottom: calc((7 * var(--space)) * -1)!important
}

@media (min-width: 768px) {
  .sm\:mt-n7 {
    margin-top:calc((7 * var(--space)) * -1)!important
  }

  .sm\:px-7 {
    padding-left: calc(7 * var(--space))!important;
    padding-right: calc(7 * var(--space))!important
  }

  .sm\:mx-n7 {
    margin-left: calc((7 * var(--space)) * -1)!important;
    margin-right: calc((7 * var(--space)) * -1)!important
  }
}

.mt-8 {
  margin-top: calc(8 * var(--space))!important
}

.mb-8 {
  margin-bottom: calc(8 * var(--space))!important
}

.pt-8 {
  padding-top: calc(8 * var(--space))!important
}

.pb-8 {
  padding-bottom: calc(8 * var(--space))!important
}

.my-8 {
  margin-top: calc(8 * var(--space))!important;
  margin-bottom: calc(8 * var(--space))!important
}

.py-8 {
  padding-top: calc(8 * var(--space))!important;
  padding-bottom: calc(8 * var(--space))!important
}

.mt-n8 {
  margin-top: calc((8 * var(--space)) * -1)!important
}

.mb-n8 {
  margin-bottom: calc((8 * var(--space)) * -1)!important
}

@media (min-width: 768px) {
  .sm\:mt-n8 {
    margin-top:calc((8 * var(--space)) * -1)!important
  }

  .sm\:px-8 {
    padding-left: calc(8 * var(--space))!important;
    padding-right: calc(8 * var(--space))!important
  }

  .sm\:mx-n8 {
    margin-left: calc((8 * var(--space)) * -1)!important;
    margin-right: calc((8 * var(--space)) * -1)!important
  }
}

.mt-9 {
  margin-top: calc(9 * var(--space))!important
}

.mb-9 {
  margin-bottom: calc(9 * var(--space))!important
}

.pt-9 {
  padding-top: calc(9 * var(--space))!important
}

.pb-9 {
  padding-bottom: calc(9 * var(--space))!important
}

.my-9 {
  margin-top: calc(9 * var(--space))!important;
  margin-bottom: calc(9 * var(--space))!important
}

.py-9 {
  padding-top: calc(9 * var(--space))!important;
  padding-bottom: calc(9 * var(--space))!important
}

.mt-n9 {
  margin-top: calc((9 * var(--space)) * -1)!important
}

.mb-n9 {
  margin-bottom: calc((9 * var(--space)) * -1)!important
}

@media (min-width: 768px) {
  .sm\:mt-n9 {
    margin-top:calc((9 * var(--space)) * -1)!important
  }

  .sm\:px-9 {
    padding-left: calc(9 * var(--space))!important;
    padding-right: calc(9 * var(--space))!important
  }

  .sm\:mx-n9 {
    margin-left: calc((9 * var(--space)) * -1)!important;
    margin-right: calc((9 * var(--space)) * -1)!important
  }
}

.mt-10 {
  margin-top: calc(10 * var(--space))!important
}

.mb-10 {
  margin-bottom: calc(10 * var(--space))!important
}

.pt-10 {
  padding-top: calc(10 * var(--space))!important
}

.pb-10 {
  padding-bottom: calc(10 * var(--space))!important
}

.my-10 {
  margin-top: calc(10 * var(--space))!important;
  margin-bottom: calc(10 * var(--space))!important
}

.py-10 {
  padding-top: calc(10 * var(--space))!important;
  padding-bottom: calc(10 * var(--space))!important
}

.mt-n10 {
  margin-top: calc((10 * var(--space)) * -1)!important
}

.mb-n10 {
  margin-bottom: calc((10 * var(--space)) * -1)!important
}

@media (min-width: 768px) {
  .sm\:mt-n10 {
    margin-top:calc((10 * var(--space)) * -1)!important
  }

  .sm\:px-10 {
    padding-left: calc(10 * var(--space))!important;
    padding-right: calc(10 * var(--space))!important
  }

  .sm\:mx-n10 {
    margin-left: calc((10 * var(--space)) * -1)!important;
    margin-right: calc((10 * var(--space)) * -1)!important
  }
}

.mt-11 {
  margin-top: calc(11 * var(--space))!important
}

.mb-11 {
  margin-bottom: calc(11 * var(--space))!important
}

.pt-11 {
  padding-top: calc(11 * var(--space))!important
}

.pb-11 {
  padding-bottom: calc(11 * var(--space))!important
}

.my-11 {
  margin-top: calc(11 * var(--space))!important;
  margin-bottom: calc(11 * var(--space))!important
}

.py-11 {
  padding-top: calc(11 * var(--space))!important;
  padding-bottom: calc(11 * var(--space))!important
}

.mt-n11 {
  margin-top: calc((11 * var(--space)) * -1)!important
}

.mb-n11 {
  margin-bottom: calc((11 * var(--space)) * -1)!important
}

@media (min-width: 768px) {
  .sm\:mt-n11 {
    margin-top:calc((11 * var(--space)) * -1)!important
  }

  .sm\:px-11 {
    padding-left: calc(11 * var(--space))!important;
    padding-right: calc(11 * var(--space))!important
  }

  .sm\:mx-n11 {
    margin-left: calc((11 * var(--space)) * -1)!important;
    margin-right: calc((11 * var(--space)) * -1)!important
  }
}

.mt-12 {
  margin-top: calc(12 * var(--space))!important
}

.mb-12 {
  margin-bottom: calc(12 * var(--space))!important
}

.pt-12 {
  padding-top: calc(12 * var(--space))!important
}

.pb-12 {
  padding-bottom: calc(12 * var(--space))!important
}

.my-12 {
  margin-top: calc(12 * var(--space))!important;
  margin-bottom: calc(12 * var(--space))!important
}

.py-12 {
  padding-top: calc(12 * var(--space))!important;
  padding-bottom: calc(12 * var(--space))!important
}

.mt-n12 {
  margin-top: calc((12 * var(--space)) * -1)!important
}

.mb-n12 {
  margin-bottom: calc((12 * var(--space)) * -1)!important
}

@media (min-width: 768px) {
  .sm\:mt-n12 {
    margin-top:calc((12 * var(--space)) * -1)!important
  }

  .sm\:px-12 {
    padding-left: calc(12 * var(--space))!important;
    padding-right: calc(12 * var(--space))!important
  }

  .sm\:mx-n12 {
    margin-left: calc((12 * var(--space)) * -1)!important;
    margin-right: calc((12 * var(--space)) * -1)!important
  }
}

.mt-13 {
  margin-top: calc(13 * var(--space))!important
}

.mb-13 {
  margin-bottom: calc(13 * var(--space))!important
}

.pt-13 {
  padding-top: calc(13 * var(--space))!important
}

.pb-13 {
  padding-bottom: calc(13 * var(--space))!important
}

.my-13 {
  margin-top: calc(13 * var(--space))!important;
  margin-bottom: calc(13 * var(--space))!important
}

.py-13 {
  padding-top: calc(13 * var(--space))!important;
  padding-bottom: calc(13 * var(--space))!important
}

.mt-n13 {
  margin-top: calc((13 * var(--space)) * -1)!important
}

.mb-n13 {
  margin-bottom: calc((13 * var(--space)) * -1)!important
}

@media (min-width: 768px) {
  .sm\:mt-n13 {
    margin-top:calc((13 * var(--space)) * -1)!important
  }

  .sm\:px-13 {
    padding-left: calc(13 * var(--space))!important;
    padding-right: calc(13 * var(--space))!important
  }

  .sm\:mx-n13 {
    margin-left: calc((13 * var(--space)) * -1)!important;
    margin-right: calc((13 * var(--space)) * -1)!important
  }
}

.mt-14 {
  margin-top: calc(14 * var(--space))!important
}

.mb-14 {
  margin-bottom: calc(14 * var(--space))!important
}

.pt-14 {
  padding-top: calc(14 * var(--space))!important
}

.pb-14 {
  padding-bottom: calc(14 * var(--space))!important
}

.my-14 {
  margin-top: calc(14 * var(--space))!important;
  margin-bottom: calc(14 * var(--space))!important
}

.py-14 {
  padding-top: calc(14 * var(--space))!important;
  padding-bottom: calc(14 * var(--space))!important
}

.mt-n14 {
  margin-top: calc((14 * var(--space)) * -1)!important
}

.mb-n14 {
  margin-bottom: calc((14 * var(--space)) * -1)!important
}

@media (min-width: 768px) {
  .sm\:mt-n14 {
    margin-top:calc((14 * var(--space)) * -1)!important
  }

  .sm\:px-14 {
    padding-left: calc(14 * var(--space))!important;
    padding-right: calc(14 * var(--space))!important
  }

  .sm\:mx-n14 {
    margin-left: calc((14 * var(--space)) * -1)!important;
    margin-right: calc((14 * var(--space)) * -1)!important
  }
}

.mt-15 {
  margin-top: calc(15 * var(--space))!important
}

.mb-15 {
  margin-bottom: calc(15 * var(--space))!important
}

.pt-15 {
  padding-top: calc(15 * var(--space))!important
}

.pb-15 {
  padding-bottom: calc(15 * var(--space))!important
}

.my-15 {
  margin-top: calc(15 * var(--space))!important;
  margin-bottom: calc(15 * var(--space))!important
}

.py-15 {
  padding-top: calc(15 * var(--space))!important;
  padding-bottom: calc(15 * var(--space))!important
}

.mt-n15 {
  margin-top: calc((15 * var(--space)) * -1)!important
}

.mb-n15 {
  margin-bottom: calc((15 * var(--space)) * -1)!important
}

@media (min-width: 768px) {
  .sm\:mt-n15 {
    margin-top:calc((15 * var(--space)) * -1)!important
  }

  .sm\:px-15 {
    padding-left: calc(15 * var(--space))!important;
    padding-right: calc(15 * var(--space))!important
  }

  .sm\:mx-n15 {
    margin-left: calc((15 * var(--space)) * -1)!important;
    margin-right: calc((15 * var(--space)) * -1)!important
  }
}

.mt-16 {
  margin-top: calc(16 * var(--space))!important
}

.mb-16 {
  margin-bottom: calc(16 * var(--space))!important
}

.pt-16 {
  padding-top: calc(16 * var(--space))!important
}

.pb-16 {
  padding-bottom: calc(16 * var(--space))!important
}

.my-16 {
  margin-top: calc(16 * var(--space))!important;
  margin-bottom: calc(16 * var(--space))!important
}

.py-16 {
  padding-top: calc(16 * var(--space))!important;
  padding-bottom: calc(16 * var(--space))!important
}

.mt-n16 {
  margin-top: calc((16 * var(--space)) * -1)!important
}

.mb-n16 {
  margin-bottom: calc((16 * var(--space)) * -1)!important
}

@media (min-width: 768px) {
  .sm\:mt-n16 {
    margin-top:calc((16 * var(--space)) * -1)!important
  }

  .sm\:px-16 {
    padding-left: calc(16 * var(--space))!important;
    padding-right: calc(16 * var(--space))!important
  }

  .sm\:mx-n16 {
    margin-left: calc((16 * var(--space)) * -1)!important;
    margin-right: calc((16 * var(--space)) * -1)!important
  }
}

.mt-17 {
  margin-top: calc(17 * var(--space))!important
}

.mb-17 {
  margin-bottom: calc(17 * var(--space))!important
}

.pt-17 {
  padding-top: calc(17 * var(--space))!important
}

.pb-17 {
  padding-bottom: calc(17 * var(--space))!important
}

.my-17 {
  margin-top: calc(17 * var(--space))!important;
  margin-bottom: calc(17 * var(--space))!important
}

.py-17 {
  padding-top: calc(17 * var(--space))!important;
  padding-bottom: calc(17 * var(--space))!important
}

.mt-n17 {
  margin-top: calc((17 * var(--space)) * -1)!important
}

.mb-n17 {
  margin-bottom: calc((17 * var(--space)) * -1)!important
}

@media (min-width: 768px) {
  .sm\:mt-n17 {
    margin-top:calc((17 * var(--space)) * -1)!important
  }

  .sm\:px-17 {
    padding-left: calc(17 * var(--space))!important;
    padding-right: calc(17 * var(--space))!important
  }

  .sm\:mx-n17 {
    margin-left: calc((17 * var(--space)) * -1)!important;
    margin-right: calc((17 * var(--space)) * -1)!important
  }
}

.mt-18 {
  margin-top: calc(18 * var(--space))!important
}

.mb-18 {
  margin-bottom: calc(18 * var(--space))!important
}

.pt-18 {
  padding-top: calc(18 * var(--space))!important
}

.pb-18 {
  padding-bottom: calc(18 * var(--space))!important
}

.my-18 {
  margin-top: calc(18 * var(--space))!important;
  margin-bottom: calc(18 * var(--space))!important
}

.py-18 {
  padding-top: calc(18 * var(--space))!important;
  padding-bottom: calc(18 * var(--space))!important
}

.mt-n18 {
  margin-top: calc((18 * var(--space)) * -1)!important
}

.mb-n18 {
  margin-bottom: calc((18 * var(--space)) * -1)!important
}

@media (min-width: 768px) {
  .sm\:mt-n18 {
    margin-top:calc((18 * var(--space)) * -1)!important
  }

  .sm\:px-18 {
    padding-left: calc(18 * var(--space))!important;
    padding-right: calc(18 * var(--space))!important
  }

  .sm\:mx-n18 {
    margin-left: calc((18 * var(--space)) * -1)!important;
    margin-right: calc((18 * var(--space)) * -1)!important
  }
}

.mt-19 {
  margin-top: calc(19 * var(--space))!important
}

.mb-19 {
  margin-bottom: calc(19 * var(--space))!important
}

.pt-19 {
  padding-top: calc(19 * var(--space))!important
}

.pb-19 {
  padding-bottom: calc(19 * var(--space))!important
}

.my-19 {
  margin-top: calc(19 * var(--space))!important;
  margin-bottom: calc(19 * var(--space))!important
}

.py-19 {
  padding-top: calc(19 * var(--space))!important;
  padding-bottom: calc(19 * var(--space))!important
}

.mt-n19 {
  margin-top: calc((19 * var(--space)) * -1)!important
}

.mb-n19 {
  margin-bottom: calc((19 * var(--space)) * -1)!important
}

@media (min-width: 768px) {
  .sm\:mt-n19 {
    margin-top:calc((19 * var(--space)) * -1)!important
  }

  .sm\:px-19 {
    padding-left: calc(19 * var(--space))!important;
    padding-right: calc(19 * var(--space))!important
  }

  .sm\:mx-n19 {
    margin-left: calc((19 * var(--space)) * -1)!important;
    margin-right: calc((19 * var(--space)) * -1)!important
  }
}

.mt-20 {
  margin-top: calc(20 * var(--space))!important
}

.mb-20 {
  margin-bottom: calc(20 * var(--space))!important
}

.pt-20 {
  padding-top: calc(20 * var(--space))!important
}

.pb-20 {
  padding-bottom: calc(20 * var(--space))!important
}

.my-20 {
  margin-top: calc(20 * var(--space))!important;
  margin-bottom: calc(20 * var(--space))!important
}

.py-20 {
  padding-top: calc(20 * var(--space))!important;
  padding-bottom: calc(20 * var(--space))!important
}

.mt-n20 {
  margin-top: calc((20 * var(--space)) * -1)!important
}

.mb-n20 {
  margin-bottom: calc((20 * var(--space)) * -1)!important
}

@media (min-width: 768px) {
  .sm\:mt-n20 {
    margin-top:calc((20 * var(--space)) * -1)!important
  }

  .sm\:px-20 {
    padding-left: calc(20 * var(--space))!important;
    padding-right: calc(20 * var(--space))!important
  }

  .sm\:mx-n20 {
    margin-left: calc((20 * var(--space)) * -1)!important;
    margin-right: calc((20 * var(--space)) * -1)!important
  }
}

.fullsize {
  margin-left: calc(var(--container-padding) * -1);
  margin-right: calc(var(--container-padding) * -1)
}

@media (min-width: 850px) {
  .fullsize {
    width:100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw
  }
}

.container {
  box-sizing: border-box;
  width: 100%;
  padding-left: calc(50% - var(--container-width) / 2);
  padding-right: calc(50% - var(--container-width) / 2)
}

.article {
  display: flex;
  flex-direction: column
}

.article__thumbnail {
  position: relative;
  flex: none;
  z-index: 1
}

.article__thumbnail>img {
  width: 100%;
  height: 190px;
  border-bottom-right-radius: 12px;
  object-fit: cover;
  display: block
}

.article__tag {
  background-color: var(--primary);
  color: #fff;
  position: absolute;
  top: 20px;
  left: 0;
  padding: 8px 20px;
  border-bottom-right-radius: 10px
}

.article__content {
  box-shadow: 0 6px 20px rgba(40,60,85,.1);
  padding: 30px 20px;
  border-bottom-right-radius: 12px;
  background-color: #fff;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative
}

.article__content .btn-link,.article__content .publi-list__actions .load-more,.publi-list__actions .article__content .load-more {
  margin-top: auto
}

.article__date {
  font-size: 12px;
  font-weight: 400;
  color: var(--secondary)
}

.article__date-range {
  background-color: var(--secondary);
  color: #fff;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 12px;
  line-height: 36px;
  border-bottom-right-radius: 12px;
  width: 100%;
  padding-left: 20px;
  padding-top: 12px;
  margin-top: -12px
}

.article__date-range+.article__date {
  opacity: 0
}

.article__title {
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  margin-top: 7px;
  margin-bottom: 0;
  min-height: 44px
}

.article__excerpt {
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  margin-bottom: 25px
}

.btn,.publi-filters .filter>button {
  display: inline-flex;
  align-items: center;
  background-color: var(--orange);
  padding: 0 20px;
  height: 60px;
  color: var(--secondary);
  font-size: 14px;
  line-height: 18px;
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
  border: 0;
  transition: all .25s
}

.btn>svg,.publi-filters .filter>button>svg {
  display: block
}

.btn>svg+span,.publi-filters .filter>button>svg+span {
  margin-left: 14px
}

.btn:hover,.publi-filters .filter>button:hover {
  background-color: #f8a938
}

.btn-sm {
  height: 40px;
  font-size: 12px;
  line-height: 16px;
  padding: 0 10px
}

.btn-link,.publi-list__actions .load-more {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: var(--secondary);
  background: transparent;
  appearance: none;
  border: 0;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer
}

.btn-link svg,.publi-list__actions .load-more svg {
  margin-right: 8px
}

.btn-link--light {
  color: #fff
}

.btn.btn-vertical,.publi-filters .filter>button.btn-vertical {
  flex-direction: column;
  justify-content: center;
  height: auto;
  padding: 10px 12px 6px
}

.btn.btn-vertical>svg+span,.publi-filters .filter>button.btn-vertical>svg+span {
  margin-left: auto;
  font-size: 10px;
  margin-top: 5px
}

.btn-white {
  background-color: #fff
}

.btn-white:hover {
  background-color: #e6e6e6
}

.btn-rounded {
  border-bottom-right-radius: 10px
}

.publi-filters {
  background-color: #fff;
  padding: 40px 0;
  margin-top: -32px;
  position: relative;
  z-index: 2;
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 1fr;
  grid-gap: 25px
}

@media (min-width: 850px) {
  .publi-filters {
    margin-top:-60px;
    grid-template-columns: repeat(3,265px);
    justify-content: center;
    grid-gap: 30px
  }
}

.publi-filters .filter {
  padding: 0 20px;
  position: relative
}

.publi-filters .filter>button {
  height: auto;
  border-bottom: 2px solid var(--secondary);
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 0 0 2px;
  background-color: #fff;
  cursor: pointer
}

.publi-filters .filter>button:after {
  content: "";
  width: 14px;
  height: 8px;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSI4IiB2aWV3Qm94PSIwIDAgMTQgOCI+CiAgPHBhdGggZD0iTTQxMy43LDg1MC4xbC02LTUuODE4LTEuMzkyLDEuNDM2LDYsNS44MThabS01Ljk3OCw3LjYsNi02LjE4Mi0xLjQzNi0xLjM5My02LDYuMTgyWm0tLjAyMi0xMy40MTVhMSwxLDAsMCwwLTEuMzkyLDEuNDM2Wm01LjMsNi41MzYuNzE4LjdhMSwxLDAsMCwwLS4wMjItMS40MTVabS02LjcxOCw1LjQ4NmExLDEsMCwwLDAsMS40MzYsMS4zOTNaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4NTggLTQwNikgcm90YXRlKDkwKSIgZmlsbD0iI2ZhYmY2YSIvPgo8L3N2Zz4K) no-repeat;
  background-size: cover;
  transition: all .2s ease
}

.publi-filters .filter .filter__dropdown {
  position: absolute;
  top: 100%;
  left: 20px;
  right: 20px;
  padding: 28px 25px;
  z-index: 2;
  background-color: #fff;
  box-shadow: 0 6px 20px rgba(40,60,85,.1);
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 1fr;
  grid-gap: 10px;
  border-bottom-right-radius: 12px;
  opacity: 0;
  visibility: hidden;
  transition: all .2s ease
}

.publi-filters .filter .filter__item {
  display: flex;
  align-items: center;
  line-height: 24px;
  text-decoration: none;
  color: var(--secondary)
}

.publi-filters .filter .filter__item:before {
  content: "";
  width: 10px;
  height: 10px;
  border: 1px solid var(--secondary);
  margin-right: 8px
}

.publi-filters .filter .filter__item span {
  color: var(--secondary);
  opacity: .5;
  font-size: 10px;
  margin-left: 6px
}

.publi-filters .filter .filter__item--active:before {
  background-color: var(--secondary)
}

.publi-filters .filter.is-expanded>button:after {
  transform: rotate(-180deg)
}

.publi-filters .filter.is-expanded .filter__dropdown {
  opacity: 1;
  visibility: visible
}

.article-hero {
  background: var(--secondary) no-repeat 50%;
  background-size: cover;
  border-bottom-right-radius: 12px;
  position: relative;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding-left: 60px;
  padding-bottom: 50px
}

.article-hero:before {
  content: "";
  background: linear-gradient(180deg,transparent,#000);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-bottom-right-radius: 10px
}

.article-hero__content {
  position: relative
}

.article-hero__tag {
  background-color: var(--primary);
  color: #fff;
  position: absolute;
  top: 20px;
  left: 0;
  padding: 8px 20px;
  border-bottom-right-radius: 10px
}

.article-hero__date {
  font-size: 12px;
  font-weight: 400;
  line-height: 22px
}

.article-hero__title {
  font-size: 28px;
  font-weight: 600;
  max-width: 500px;
  line-height: 32px;
  margin: 0 0 30px
}

.publi-list {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-auto-flow: row
}

@media (min-width: 768px) {
  .publi-list {
    grid-template-columns:repeat(4,1fr);
    grid-auto-flow: inherit
  }
}

.publi-list>article {
  height: 100%
}

@media (max-width: 768px) {
  .publi-list .article-hero {
    min-height:370px
  }
}

@media (min-width: 768px) {
  .publi-list .article-hero {
    grid-column:span 3
  }
}

.publi-list__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 80px
}

.publi-list__actions .load-more svg {
  margin-right: 0;
  margin-left: 10px;
  transform: rotate(90deg)
}

.publi-list__noitems {
  text-align: center;
  padding: 40px 0;
  font-size: 18px;
  line-height: 1.6
}

.publi-selected-filters {
  display: flex;
  margin-bottom: 30px
}

.publi-selected-filters .active-filter {
  font-weight: 600;
  text-decoration: none;
  background-color: var(--grey);
  border-bottom-right-radius: 12px;
  color: var(--secondary);
  padding: 7px 20px;
  display: flex;
  align-items: center;
  transition: all .35s
}

.publi-selected-filters .active-filter:hover {
  background-color: #e1e0e2
}

.publi-selected-filters .active-filter svg {
  margin-right: 8px
}

.publi-selected-filters .active-filter+.active-filter {
  margin-left: 10px
}