.block_link {
display: block;
aspect-ratio: 1;
position: relative;
isolation: isolate;
text-decoration: none;
background: var(--dark-navy);
border-radius: var(--border-radius-l);
overflow: hidden;
}
.block_link img {
position: absolute;
aspect-ratio: 1;
-o-object-fit: cover;
object-fit: cover;
inset: 0;
z-index: -1;
}
.block_link .title {
font-size: clamp(24px, 3vw, 32px);
text-transform: uppercase;
font-family: "Barlow", sans-serif;
line-height: 100%;
font-weight: 700;
}
.block_link p {
color: var(--contrast);
margin: 0;
}
.block_link svg {
fill: var(--contrast);
}
.block_link .arrow {
position: absolute;
width: 40px;
aspect-ratio: 1;
inset: auto var(--gap-m) var(--gap-m) auto;
}
.block_link div {
aspect-ratio: 1;
display: flex;
gap: 10px;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
color: var(--contrast);
padding: var(--gap-m);
transition: background-color 0.3s, opacity 0.3s;
}
.block_link.default:hover {
--text: var(--dark-navy);
--contrast: var(--dark-navy);
background-color: var(--yellow);
}
.block_link.bg_image {
overflow: visible;
background: transparent;
}
.block_link.bg_image .title {
font-size: clamp(28px, 4vw, 48px);
}
.block_link.bg_image div {
background: linear-gradient(0deg, rgba(22, 19, 50, 0), rgb(22, 19, 50));
border-radius: var(--border-radius-l);
}
.block_link.bg_image img {
border-radius: var(--border-radius-l);
width: 99%;
height: 99%;
top: 0.5%;
left: 0.5%;
}
.block_link.bg_image:hover {
--text: var(--yellow);
--contrast: var(--yellow);
}
.block_link.bg_image_on_hover .title {
font-size: clamp(28px, 4vw, 48px);
}
.block_link.bg_image_on_hover div {
background: var(--dark-navy);
}
.block_link.bg_image_on_hover:hover div {
background: rgba(46, 32, 87, 0.8);
}
.block_link.bg_image_on_hover:hover div .title {
color: var(--bg-yellow);
}
@media (max-width: 1024px) {
.block_link.bg_image_on_hover {
aspect-ratio: 10/7;
}
.block_link.bg_image_on_hover img {
aspect-ratio: 10/7;
}
.block_link.bg_image_on_hover div {
background: rgba(46, 32, 87, 0.8);
aspect-ratio: 10/7;
}
.block_link.bg_image_on_hover .title {
color: var(--bg-yellow);
}
}
.block_link.center_image {
display: flex;
gap: var(--gap-s);
flex-direction: column;
justify-content: flex-end;
align-items: center;
padding: var(--gap-s);
background: none;
}
.block_link.center_image .title {
font-size: 22px;
}
.block_link.center_image p {
text-align: center;
color: var(--text);
}
.block_link.center_image .arrow {
fill: var(--dark-navy);
opacity: 0;
position: absolute;
width: 40px;
aspect-ratio: 1;
inset: var(--gap-s) var(--gap-s) auto auto;
transform: rotate(-90deg);
transition: 0.3s;
}
.block_link.center_image div {
display: block;
padding: 0;
justify-content: flex-start;
align-items: flex-start;
aspect-ratio: auto;
background: none;
}
.block_link.center_image img {
position: static;
aspect-ratio: 4/3;
inset: var(--gap-m);
-o-object-fit: contain;
object-fit: contain;
margin: auto 0;
}
.block_link.center_image:hover {
--text: var(--dark-navy);
background: var(--yellow);
}
.block_link.center_image:hover .arrow {
opacity: 1;
}
.block_link.wide_yellow, .block_link.wide_blue {
aspect-ratio: 2/1;
background: right center/contain no-repeat var(--dark) url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 620 470%27%3e%3cpath fill=%27%232E2057%27 d=%27M560.1 0c-46 48-120 95.6-204.7 131.1a739.4 739.4 0 0 1-81.2 31l184.4 30.1 15.6 2.7-.6.7.6-.6 137.2 23 7.4 1.3h.9l-88.6 108.3-34 8c-54 16.2-168.3 57.8-250 134.4h-21.5c105.9-108 272.7-151.3 295.9-157.2l68.4-81.8-125.3-20.7-48.2 56.2-250-40-24.4 28.7L321.9 285l-25.7 9.4c-120.7 43.2-233.6 138.9-268 169.5l37.7 6.2H.7l6.4-6.2c1.4-1.4 122-116 259.3-173l-151.5-25.2 37.9-44.8-93-15 57.9-68 2.3-.4a790.8 790.8 0 0 0 155-59.3A612.3 612.3 0 0 0 394 0h20.6a606.2 606.2 0 0 1-133.1 90.2 780.4 780.4 0 0 1-155.6 60.2l-38.5 45 321.7 52.1 37.1-43.6-213.8-34.6 6-12.6 3.2-.9A764 764 0 0 0 349 117.2h.4C426.2 84.6 493.7 43 538.4 0h21.7Z%27/%3e%3c/svg%3e");
}
.block_link.wide_yellow .title, .block_link.wide_blue .title {
font-size: clamp(30px, 4vw, 50px);
}
.block_link.wide_yellow div, .block_link.wide_blue div {
aspect-ratio: 2/1;
box-sizing: border-box;
padding-left: 50%;
justify-content: center;
}
.block_link.wide_yellow img, .block_link.wide_blue img {
width: 45%;
height: 100%;
clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
transition: width 0.3s;
}
.block_link.wide_yellow .arrow, .block_link.wide_blue .arrow {
fill: var(--yellow);
position: absolute;
width: 40px;
aspect-ratio: 1;
inset: var(--gap-s) var(--gap-s) auto auto;
transform: rotate(-90deg);
transition: 0.3s;
}
.block_link.wide_yellow:hover .arrow, .block_link.wide_blue:hover .arrow {
inset: calc(var(--gap-s) / 2) calc(var(--gap-s) / 2) auto auto;
}
.block_link.wide_yellow:hover img, .block_link.wide_blue:hover img {
width: 40%;
}
.block_link.wide_yellow {
background: right center/contain no-repeat var(--yellow) url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 651 470%27%3e%3cpath fill=%27%23FFDA33%27 d=%27M148.5 338.1H73L7 131h66.3l37 145.1h.8l39.6-144.8h64.8l-67 206.8ZM238.6 131h161v51h-102v28h102v49.1h-102v30.2h102v49.1h-161V131Zm200.9 0h89.4l63.4 132.8h.8V131h57.1v207.1h-76.6l-76.2-141.6h-.7V338h-57.2V131Z%27/%3e%3c/svg%3e");
--text: var(--dark-navy);
}
.block_link.wide_yellow p {
color: var(--text);
}
.block_link.wide_yellow svg,
.block_link.wide_yellow .arrow {
fill: var(--text);
}