<style type="text/css"><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.et_pb_slide_title a {<!-- [et_pb_line_break_holder] --> color: #ffffff;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->/*--------------------------------------------------------------------*/<!-- [et_pb_line_break_holder] -->/*-----Two, Three and Four Column Square Blog Layout by Divi Soup-----*/<!-- [et_pb_line_break_holder] -->/*--------------------------------------------------------------------*/<!-- [et_pb_line_break_holder] -->/***Global styles required for all layouts***/<!-- [et_pb_line_break_holder] -->/*This scales the images keeping the aspect ratio. NOTE: Object-fit is not supported in IE and Edge so if you want to use the standard image size remove this section*/<!-- [et_pb_line_break_holder] -->.ds-blog-square a img {<!-- [et_pb_line_break_holder] --> width: 100%;<!-- [et_pb_line_break_holder] --> object-fit: cover;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->/*This section hides the excerpt*/<!-- [et_pb_line_break_holder] -->.ds-blog-square .post-content {<!-- [et_pb_line_break_holder] --> display: none;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->/*This section corrects some margin and padding issues*/<!-- [et_pb_line_break_holder] -->.ds-blog-square .et_pb_image_container {<!-- [et_pb_line_break_holder] --> margin: -19px -19px 0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.ds-blog-square h2 {<!-- [et_pb_line_break_holder] --> margin: 0;<!-- [et_pb_line_break_holder] --> padding: 0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->/*This section removes the bottom padding from the post and sets the position so we can move the title on top of the image*/<!-- [et_pb_line_break_holder] -->.ds-blog-square .et_pb_post {<!-- [et_pb_line_break_holder] --> position: relative;<!-- [et_pb_line_break_holder] --> padding-bottom: 0;<!-- [et_pb_line_break_holder] --> border: none;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->/*This section adds the semi transparent overlay and border on the image. It also sets the post title to absolute center*/<!-- [et_pb_line_break_holder] -->.ds-blog-square h2 a {<!-- [et_pb_line_break_holder] --> position: absolute;<!-- [et_pb_line_break_holder] --> top: 0;<!-- [et_pb_line_break_holder] --> left: 0;<!-- [et_pb_line_break_holder] --> height: 100%;<!-- [et_pb_line_break_holder] --> width: 100%;<!-- [et_pb_line_break_holder] --> padding: 40px;<!-- [et_pb_line_break_holder] --> margin: 0;<!-- [et_pb_line_break_holder] --> background: rgba(0, 0, 0, .3);<!-- [et_pb_line_break_holder] --> color: #fff;<!-- [et_pb_line_break_holder] --> text-align: center;<!-- [et_pb_line_break_holder] --> outline: 2px solid #fff;<!-- [et_pb_line_break_holder] --> outline-offset: -20px;<!-- [et_pb_line_break_holder] --> display: flex !important;<!-- [et_pb_line_break_holder] --> flex-direction: column;<!-- [et_pb_line_break_holder] --> justify-content: center;<!-- [et_pb_line_break_holder] --> -moz-transition: all 0.5s ease;<!-- [et_pb_line_break_holder] --> -webkit-transition: all 0.5s ease;<!-- [et_pb_line_break_holder] --> transition: all 0.5s ease;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->/*This section changes the border and overlay colour and border position on hover*/<!-- [et_pb_line_break_holder] -->.ds-blog-square h2 a:hover {<!-- [et_pb_line_break_holder] --> background: rgba(255, 255, 255, .5);<!-- [et_pb_line_break_holder] --> color: #000;<!-- [et_pb_line_break_holder] --> outline: 2px solid #000;<!-- [et_pb_line_break_holder] --> outline-offset: 0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/***2 Column Styles***/<!-- [et_pb_line_break_holder] -->/*This section changes the layout to 2 columns*/<!-- [et_pb_line_break_holder] -->@media only screen and ( min-width: 981px) {<!-- [et_pb_line_break_holder] --> /*Two columns*/<!-- [et_pb_line_break_holder] --> .ds-blog-two-column.et_pb_column_4_4 .et_pb_blog_grid[data-columns]::before {<!-- [et_pb_line_break_holder] --> content: '2 .column.size-1of2' !important;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> .ds-blog-square-two.et_pb_blog_grid .column {<!-- [et_pb_line_break_holder] --> width: 47.25% !important;<!-- [et_pb_line_break_holder] --> margin-right: 5.5%;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> /*This removes the right margin from the last post on each row*/<!-- [et_pb_line_break_holder] --> .ds-blog-square-two.et_pb_blog_grid .column:nth-child(even) {<!-- [et_pb_line_break_holder] --> margin-right: 0;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->/*This sets the spacing between post rows*/<!-- [et_pb_line_break_holder] -->.ds-blog-two-column .et_pb_post {<!-- [et_pb_line_break_holder] --> margin-bottom: 12%;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->/*This section sets the height of the images on different screen sizes to keep it relatively square. If you are not using object-fit because it isn't supported in IE and Edge then you should remove this entire section or the images will be distorted*/<!-- [et_pb_line_break_holder] -->.ds-blog-two-column .ds-blog-square a img {<!-- [et_pb_line_break_holder] --> height: 20vh !important; /*Adjust this value if you want the images taller or shorter*/<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->@media only screen and (max-width: 1440px) {<!-- [et_pb_line_break_holder] --> .ds-blog-two-column .ds-blog-square a img {<!-- [et_pb_line_break_holder] --> height: 20vh !important; /*Adjust this value if you want the images taller or shorter*/<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->@media only screen and (max-width: 1280px) {<!-- [et_pb_line_break_holder] --> .ds-blog-two-column .ds-blog-square a img {<!-- [et_pb_line_break_holder] --> height: 20vh !important; /*Adjust this value if you want the images taller or shorter*/<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->@media only screen and (max-width: 768px) {<!-- [et_pb_line_break_holder] --> .ds-blog-two-column .ds-blog-square a img {<!-- [et_pb_line_break_holder] --> height: 20vh !important; /*Adjust this value if you want the images taller or shorter*/<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->@media only screen and (max-width: 480px) {<!-- [et_pb_line_break_holder] --> .ds-blog-two-column .ds-blog-square a img {<!-- [et_pb_line_break_holder] --> height: 20vh !important; /*Adjust this value if you want the images taller or shorter*/<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --></style>