/* VARIABLES */ /* * scss-docs-start theme-color-variables * $brand-success: $green; * $brand-info: $teal; * $brand-warning: $orange; * $brand-danger: $red; */ /* * Body * Settings for the `` element. */ /* * Links * Style anchor elements. * $link-color: $accent-shade; * $link-hover-color: $accent-dark; * $link-hover-decoration: underline; */ /* * Comments * Breadcrumbs (Works only on Bootstrap 5+) * $breadcrumb-divider: quote(">"); */ /* Responsive font sizes * Breadcrumbs (Works only on Bootstrap 5+) * $breadcrumb-divider: quote(">"); * */ /* TYPOGRAPHY */ /* Google Fonts */ .block-content--type-masonry-images .field--name-block-title h3 { text-transform: uppercase; color: #14213d; margin-bottom: 1.875rem; } .block-content--type-masonry-images .btn { margin-top: 2.75rem; justify-self: center; } @media (max-width: 61.99875rem) { .block-content--type-masonry-images .btn { font-size: 0.75rem; } } .block-content--type-masonry-images .btn a { color: #e8e9ec; } @media (max-width: 61.99875rem) { .block-content--type-masonry-images .btn::after { margin-top: -0.125rem !important; } } .block-content--type-masonry-images .btn:hover a { color: #14213d; } .block-content--type-masonry-images .masonry { column-count: 3; column-gap: 20px; } .block-content--type-masonry-images .masonry .images { break-inside: avoid; margin-bottom: 1.25rem; } .block-content--type-masonry-images .masonry .images .paragraph--type-masonry-item { position: relative; overflow: hidden; transition: 0.5s; } .block-content--type-masonry-images .masonry .images .paragraph--type-masonry-item .field--name-field-media { transition: 0.5s; } .block-content--type-masonry-images .masonry .images .paragraph--type-masonry-item::after { content: ""; position: absolute; width: 100%; height: 100%; left: 0; bottom: 0; background: linear-gradient(4deg, rgba(19, 41, 78, 0.3) 3.79%, rgba(44, 95, 180, 0) 96.87%); } .block-content--type-masonry-images .masonry .images .paragraph--type-masonry-item::before { content: ""; background-image: url("../../../images/button.svg"); position: absolute; bottom: 32px; inset-inline-start: 24px; z-index: 1; line-height: 0; background-repeat: round; width: 48px; height: 48px; opacity: 0; transition: 0.5s; } .block-content--type-masonry-images .masonry .images .paragraph--type-masonry-item h5 { position: absolute; bottom: 32px; inset-inline-start: 24px; color: #fbfbfb; z-index: 1; margin: 0; transition: 0.5s; } .block-content--type-masonry-images .masonry .images .paragraph--type-masonry-item .field--name-field-link a { position: absolute; width: 100%; height: 100%; left: 0; bottom: 0; z-index: 2; } @media (min-width: 75rem) { .block-content--type-masonry-images .masonry .images .paragraph--type-masonry-item:hover .field--name-field-media { transform: scale(1.1); transition: 0.5s; } .block-content--type-masonry-images .masonry .images .paragraph--type-masonry-item:hover h5 { bottom: 90px; transition: 0.5s; } .block-content--type-masonry-images .masonry .images .paragraph--type-masonry-item:hover::before { transition: 0.5s; opacity: 1; } } .block-content--type-masonry-images .masonry .images:nth-child(1) .drimage { height: 280px; } .block-content--type-masonry-images .masonry .images:nth-child(1) .drimage img { aspect-ratio: 2/1; object-fit: cover; width: 100% !important; height: 100% !important; } .block-content--type-masonry-images .masonry .images:nth-child(2) .drimage { height: 550px; } .block-content--type-masonry-images .masonry .images:nth-child(2) .drimage img { aspect-ratio: 3/4; object-fit: cover; width: 100% !important; height: 100% !important; } .block-content--type-masonry-images .masonry .images:nth-child(3) .drimage { height: 415px; } .block-content--type-masonry-images .masonry .images:nth-child(3) .drimage img { aspect-ratio: 1/1; object-fit: cover; width: 100% !important; height: 100% !important; } .block-content--type-masonry-images .masonry .images:nth-child(4) .drimage { height: 415px; } .block-content--type-masonry-images .masonry .images:nth-child(4) .drimage img { aspect-ratio: 1/1; object-fit: cover; width: 100% !important; height: 100% !important; } .block-content--type-masonry-images .masonry .images:nth-child(5) .drimage { height: 550px; } .block-content--type-masonry-images .masonry .images:nth-child(5) .drimage img { aspect-ratio: 3/4; object-fit: cover; width: 100% !important; height: 100% !important; } .block-content--type-masonry-images .masonry .images:nth-child(6) .drimage { height: 280px; } .block-content--type-masonry-images .masonry .images:nth-child(6) .drimage img { aspect-ratio: 2/1; object-fit: cover; width: 100% !important; height: 100% !important; } @media (max-width: 74.99875rem) { .block-content--type-masonry-images .masonry .images .paragraph--type-masonry-item::before { opacity: 1; } .block-content--type-masonry-images .masonry .images .paragraph--type-masonry-item h5 { bottom: 90px; } .block-content--type-masonry-images .masonry .images:nth-child(2) .drimage { height: 400px; } .block-content--type-masonry-images .masonry .images:nth-child(3) .drimage { height: 340px; } .block-content--type-masonry-images .masonry .images:nth-child(4) .drimage { height: 340px; } .block-content--type-masonry-images .masonry .images:nth-child(5) .drimage { height: 400px; } } @media (max-width: 61.99875rem) { .block-content--type-masonry-images .masonry { column-count: 2; column-gap: 10px; } .block-content--type-masonry-images .masonry .images { margin-bottom: 0.625rem; } .block-content--type-masonry-images .masonry .images .paragraph--type-masonry-item::before { opacity: 1; bottom: 20px; } .block-content--type-masonry-images .masonry .images .paragraph--type-masonry-item h5 { bottom: 80px; } } @media (max-width: 47.99875rem) { .block-content--type-masonry-images .masonry { column-count: unset; } .block-content--type-masonry-images .masonry .images .paragraph--type-masonry-item::before { bottom: 15px; inset-inline-start: 15px; } .block-content--type-masonry-images .masonry .images .paragraph--type-masonry-item h5 { bottom: 75px; inset-inline-start: 15px; } .block-content--type-masonry-images .masonry .images .drimage { height: auto !important; } .block-content--type-masonry-images .masonry .images .drimage img { aspect-ratio: 1/1 !important; } }