fieldset.ca-block {
position: relative;
width: 100%;
padding: 2rem 1rem;
margin: 0;
border: none;
background-color: #fff;
background-size: cover;
background-position: center;
transition: background-image 0.2s ease, background-color 0.2s ease;
} .ca-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: auto;
gap: 0;
width: 100%;
margin: 0;
} .ca-grid > .ca-card:nth-child(1) {
grid-column: 1 / span 3;
}   .ca-card {
position: relative;
overflow: hidden;
border: 1px solid #e2e8f0;
padding-top: 56.25%; background: rgba(255,255,255,0.2);
transition: transform 0.3s ease, background 0.3s ease;
cursor: pointer;
opacity: 1;
} .ca-card-content {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-decoration: none;
text-align: center;
color: #333;
z-index: 2;
pointer-events: none; }
.ca-title-en, .ca-title-ja { transition: none; }
.ca-arrow {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
font-size: 2rem;
color: #8DC63F;
transition: transform 0.3s ease;
} .ca-grid:hover .ca-card:not(.active) {
background: rgba(255,255,255,0.5); transform: scale(0.85); } .ca-card.active {
background: rgba(255,255,255,0.9); transform: scale(0.8); }
.ca-card.active .ca-arrow {
transform: translate(6px, -50%);
} .ca-card-bg {
transition: transform 0.3s ease, background 0.3s ease;
}
.ca-grid:hover .ca-card:not(.active) .ca-card-bg {
transform: scale(0.85);
background: rgba(255,255,255,0.5);
}
.ca-card.active .ca-card-bg {
transform: scale(0.8);
background: rgba(255,255,255,0.9);
} .ca-card-content {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none; transform: none !important; opacity: 1 !important; } .ca-card,
.ca-card-bg {
border-radius: 0 !important;
}  .ca-grid:hover .ca-card:not(.active),
.ca-grid:hover .ca-card:not(.active) .ca-card-bg {
border-radius: 50px !important;
} .ca-card.active,
.ca-card.active .ca-card-bg {
border-radius: 50px !important;
}
.ca-card__link {
position: absolute;
inset: 0; z-index: 3; display: block; } @media (max-width: 768px) { .ca-grid {
grid-template-columns: repeat(2, 1fr) !important;
} .ca-grid > .ca-card:nth-of-type(1) {
grid-column: 1 / -1 !important;
} .ca-title-en {
font-size: 1.25rem !important;
}
.ca-title-ja {
font-size: 0.875rem !important;
}
.ca-arrow {
font-size: 1.75rem !important;
} .ca-card {
padding-top: 75% !important;
} .ca-card,
.ca-card-bg {
border-radius: 0 !important;
}
.ca-grid:hover .ca-card:not(.active),
.ca-grid:hover .ca-card:not(.active) .ca-card-bg,
.ca-card.active,
.ca-card.active .ca-card-bg {
border-radius: 25px !important;
} .ca-grid > .ca-card:nth-of-type(1) {
grid-column: auto !important;
}
} .wp-block-vk-blocks-button .vk_button_link {
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.wp-block-vk-blocks-button .vk_button_link:hover { transform: scale(1.05);
box-shadow: 0 8px 16px rgba(0,0,0,0.2); background-color: #6ec1e4; } .wp-block-vk-blocks-button .vk_button_link:hover .vk_button_link_before {
transform: translateX(4px);
transition: transform 0.2s ease;
}
.wp-block-vk-blocks-button .vk_button_link:hover .vk_button_link_after {
transform: translateX(-4px);
transition: transform 0.2s ease;
} .wp-block-vk-blocks-button .vk_button_link:hover .vk_button_link_txt {
color: #fff;
} @media (min-width: 769px) { .ca-grid.ca-3cards {
grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; } .ca-grid.ca-3cards > .ca-card:nth-child(1) {
grid-column: auto;
} .ca-grid.ca-2cards {
grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto;
}
.ca-grid.ca-2cards > .ca-card:nth-child(1) {
grid-column: auto; }
}