.branches {
    padding: 80px 15px 40px;
    background: #FFFFFF;
}

.footer-decor{
    width: 100%;
    height: 28px;
    background-color: #F8EEDC;
    background-image: linear-gradient(45deg, white 25%, transparent 25%), linear-gradient(315deg, white 25%, transparent 25%);
    background-position: 20px 100%;
    background-size: 40px 40px;
    background-repeat: repeat-x;
    margin-bottom: -1px;
}
.branches__content {
    max-width: 1260px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    gap: 32px;
}

.branches__heading {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.branches__title {
    margin: 0;

    font-family: 'Roboto Slab';
    font-weight: 400;
    font-size: 42px;
    line-height: 1.3;
    letter-spacing: -0.01em;

    color: #444444;
}

.branches__subtitle {
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 24px;
    line-height: 140%;
    letter-spacing: -0.01em;

    color: rgba(154, 154, 154, 0.8);
}

.branches__grid {
    column-count: 3;
    column-gap: 32px;
}

.branch-card {
    min-width: 0;
    flex-direction: column;
    display: flex;
}

.branch-card__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #F8EEDC;
    border-radius: 24px 24px 0 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.branch-card__inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    pointer-events: none;
    z-index: 0;
}

.branch-card:nth-child(3n+1) .branch-card__inner::before {
    background-image: url("data:image/svg+xml,%3Csvg width='399' height='639' viewBox='0 0 399 639' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M200.029 314.376H319.572L319.559 325.308L210.904 325.308L210.904 478.111L364.022 478.113L364.016 338.614L374.701 338.626V489C354.915 488.699 334.417 488.965 314.585 488.964L200 488.978L200.029 314.376Z' fill='white' fill-opacity='0.4'/%3E%3Cpath d='M350.898 275.121C363.033 274.174 375.299 278.664 374.73 293.24C374.336 303.327 362.861 308.75 355.839 314.777C359.231 314.775 372.902 314.327 375.309 315.474C376.304 316.701 376.155 324.385 375.306 325.602C373.839 326.759 365.85 326.321 363.57 326.317C363.57 326.317 352.234 326.317 343.908 326.284C340.376 326.27 333.424 327.062 333.558 321.607C333.724 314.871 333.831 315.016 339.536 311.122C343.797 308.214 347.99 305.079 352.235 302.129C358.109 298.526 366.179 289.28 357.654 286.994C351.617 285.376 350.14 290.947 347.086 293.024C344.643 293.614 338.242 293.751 335.87 293.082C334.804 291.942 334.589 290.692 335.031 289.228C337.546 280.905 342.789 276.823 350.898 275.121Z' fill='white' fill-opacity='0.4'/%3E%3C/svg%3E");
}

.branch-card:nth-child(3n+2) .branch-card__inner::before {
    background-image: url("data:image/svg+xml,%3Csvg width='399' height='639' viewBox='0 0 399 639' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_735_2280)'%3E%3Cpath d='M220.691 237.227C227.114 236.787 236.678 237.122 243.393 237.125L286.423 237.127L413.634 237.115C416.927 237.131 424.329 236.979 426.986 239.336C428.226 240.945 430.485 243.974 430.597 245.986C431.076 254.562 430.812 263.393 430.798 271.978L430.791 322.78L430.799 404.998C430.803 418.451 431.291 434.55 430.732 447.707C427.737 452.004 426.785 453.78 421.666 455.658C409.185 456.318 391.969 455.82 379.128 455.818L298.889 455.814L246.824 455.817C238.215 455.827 229.134 456.019 220.539 455.649C218.558 455.564 215.657 453.498 213.923 452.4C209.918 445.334 211.192 430.312 211.195 421.954L211.196 378.712L211.208 293.134C211.209 279.26 211.143 265.286 211.196 251.405C211.204 249.14 211.835 243.525 212.999 241.578C214.722 238.698 217.669 237.949 220.691 237.227ZM389.878 373.314C393.311 368.703 397.801 366.174 399.62 361.039C396.566 357.549 380.174 340.486 377.045 340.19C375.942 340.086 374.608 341.19 373.853 341.879C372.022 343.549 370.513 345.543 368.848 347.37C366.533 349.911 364.013 352.376 361.605 354.834C356.765 359.773 351.489 364.303 346.657 369.283C340.9 375.217 334.957 382.044 328.039 386.627C323.093 389.904 315.225 393.063 309.182 392.814C299.83 392.427 291.24 386.802 285.103 380.101C279.231 373.69 274.489 365.849 274.91 356.906C275.65 341.159 290.461 329.556 300.711 319.232L321.142 298.503C323.78 295.827 330.508 291.32 326.775 288.278C323.181 285.35 308.907 268.89 305.764 267.53C302.279 271.848 295.618 278.017 291.659 282.105C285.716 288.352 279.532 293.856 273.561 300.101C269.128 304.736 263.267 309.858 259.259 314.973C252.95 323.023 246.29 334.858 243.583 344.841C241.929 350.942 243.097 361.298 242.962 367.834C246.372 383.231 256.765 397.398 268.184 408.001C269.73 409.437 276.824 415.065 278.432 415.991C299.52 428.147 317.992 429.175 339.693 417.911C355.165 409.88 366.245 395.674 378.792 383.967C383.604 379.355 384.237 377.821 389.878 373.314ZM382.918 324.502C386.679 323.236 390.444 322.812 392.08 318.711C395.932 309.058 389.213 300.694 379.22 301.48C377.098 301.937 375.461 302.289 373.75 303.633C369.329 307.103 367.947 314.673 370.847 319.49C371.201 320.078 371.297 320.769 371.391 321.442C372.643 323.006 380.766 325.636 382.918 324.502ZM353.339 296.928C357.577 296.74 361.386 294.296 363.316 290.529C365.247 286.762 365 282.25 362.67 278.715C360.341 275.179 356.287 273.163 352.055 273.436C345.601 273.852 340.686 279.375 341.039 285.816C341.391 292.258 346.878 297.215 353.339 296.928Z' fill='%23FEFEFE' fill-opacity='0.4'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_735_2280'%3E%3Crect width='399' height='639' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.branch-card:nth-child(3n) .branch-card__inner::before {
    background-image: url("data:image/svg+xml,%3Csvg width='399' height='639' viewBox='0 0 399 639' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_735_2323)'%3E%3Cpath d='M239.134 261.741C239.134 246.406 242.9 231.951 249.55 219.246C204.164 224.756 169 263.423 169 310.31C169 336.3 179.807 359.762 197.168 376.455C202.228 345.261 223.009 319.346 251.118 307.106C243.493 293.727 239.134 278.244 239.134 261.741Z' fill='white' fill-opacity='0.24'/%3E%3Cpath d='M412.353 219.641C397.1 190.155 366.329 170 330.849 170C295.527 170 264.873 189.975 249.55 219.246C253.21 218.802 256.935 218.569 260.714 218.569C288.11 218.569 312.694 230.589 329.5 249.639C346.306 230.589 370.89 218.569 398.286 218.569C403.069 218.569 407.767 218.935 412.353 219.641Z' fill='white' fill-opacity='0.24'/%3E%3Cpath d='M490 310.31C490 264.428 456.327 226.412 412.353 219.641C418.875 232.251 422.563 246.565 422.563 261.741C422.563 278.643 417.986 294.473 410.016 308.071C437.039 320.673 456.899 346.056 461.829 376.455C479.191 359.762 490 336.301 490 310.31Z' fill='white' fill-opacity='0.24'/%3E%3Cpath d='M398.286 402.052C391.664 402.052 385.208 401.343 378.985 400.01C375.97 431.871 356.672 458.985 329.5 472.932C342.038 479.367 356.25 483 371.311 483C421.963 483 463.025 441.926 463.025 391.259C463.025 386.218 462.611 381.274 461.829 376.455C445.345 392.304 422.955 402.052 398.286 402.052Z' fill='white' fill-opacity='0.24'/%3E%3Cpath d='M260.714 402.052C236.044 402.052 213.652 392.305 197.168 376.455C196.386 381.274 195.975 386.219 195.975 391.259C195.975 441.926 237.037 483 287.689 483C302.75 483 316.962 479.367 329.5 472.932C302.328 458.985 283.027 431.871 280.013 400.01C273.79 401.343 267.335 402.052 260.714 402.052Z' fill='white' fill-opacity='0.24'/%3E%3Cpath d='M197.168 376.455C213.652 392.305 236.044 402.052 260.714 402.052C267.335 402.052 273.79 401.343 280.013 400.01C279.74 397.129 279.597 394.21 279.597 391.259C279.597 374.357 284.171 358.525 292.141 344.927C274.862 336.868 260.51 323.587 251.118 307.106C223.009 319.346 202.228 345.261 197.168 376.455Z' fill='white' fill-opacity='0.4'/%3E%3Cpath d='M249.55 219.246C242.9 231.951 239.134 246.406 239.134 261.741C239.134 278.244 243.493 293.727 251.118 307.106C262.322 302.227 274.689 299.517 287.689 299.517C294.31 299.517 300.765 300.224 306.988 301.557C308.863 281.737 317.044 263.758 329.5 249.639C312.694 230.589 288.11 218.569 260.714 218.569C256.935 218.569 253.21 218.802 249.55 219.246Z' fill='white' fill-opacity='0.4'/%3E%3Cpath d='M410.016 308.071C417.986 294.473 422.563 278.643 422.563 261.741C422.563 246.565 418.875 232.251 412.353 219.641C407.767 218.935 403.069 218.569 398.286 218.569C370.89 218.569 346.306 230.589 329.5 249.639C341.956 263.758 350.134 281.737 352.01 301.557C358.233 300.223 364.69 299.517 371.311 299.517C385.142 299.517 398.256 302.586 410.016 308.071Z' fill='white' fill-opacity='0.4'/%3E%3Cpath d='M367.417 345.891C375.043 359.271 379.403 374.755 379.403 391.259C379.403 394.21 379.257 397.129 378.985 400.01C385.208 401.343 391.664 402.052 398.286 402.052C422.955 402.052 445.345 392.304 461.829 376.455C456.899 346.056 437.039 320.673 410.016 308.071C400.225 324.775 385.307 338.102 367.417 345.891Z' fill='white' fill-opacity='0.4'/%3E%3Cpath d='M280.013 400.01C283.027 431.871 302.328 458.985 329.5 472.932C356.672 458.985 375.97 431.871 378.985 400.01C359.459 395.826 342.244 385.425 329.5 370.979C316.756 385.426 299.54 395.826 280.013 400.01Z' fill='white' fill-opacity='0.4'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_735_2323'%3E%3Crect width='399' height='639' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.branch-card__image-wrapper,
.branch-card__body,
.branch-card__footer {
    position: relative;
    z-index: 2;
}

.branch-card__image-wrapper {
    position: relative;

    padding: 16px 16px 0;
}

.branch-card__image {
    width: 100%;
    aspect-ratio: 367 / 244;

    object-fit: cover;

    border-radius: 12px;

    display: block;
}

.branch-card__tags {
    position: absolute;
    top: 32px;
    right: 32px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: end;
}

.branch-card__tag {
    gap: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    border-radius: 8px;
    width: fit-content;
}

.branch-card__tag span {
    font-family: 'Roboto';
    font-size: 16px;
    line-height: 100%;
    letter-spacing: -0.01em;

    color: rgba(51, 51, 51, 0.64);
}

.branch-card__body {
    padding: 16px 16px 24px;

    display: flex;
    flex-direction: column;
    gap: 16px;

    flex: 1;
}

.branch-card__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.branch-card__title {
    margin: 0;

    font-family: 'Roboto Slab';
    font-weight: 400;
    font-size: 28px;
    line-height: 140%;
    letter-spacing: -0.01em;

    color: rgba(68, 68, 68, 0.96);
}

.branch-card__description {
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: -0.01em;

    color: rgba(51, 51, 51, 0.64);
}

.branch-card__info {
    display: flex;
    flex-direction: column;
    gap: 16px;

    padding: 18px 24px;

    background: #FFFFFF;
    border-radius: 12px;
}

.branch-card__info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.branch-card__info-row span:first-child {
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: -0.01em;

    color: #444444;
}

.branch-card__info-row span:last-child {
    font-family: 'Roboto';
    font-weight: 500;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: -0.01em;
    color: #E7B662;
    text-wrap: nowrap;
}

.branch-card__divider {
    border-top: 1px solid #E2E2E2;
}

.branch-card__footer {
    padding: 24px 16px 16px;
    border-top: none;
    background-image: linear-gradient(to right, #FFFFFF 70%, transparent 70%);
    background-position: top;
    background-size: 30px 3px;
    background-repeat: repeat-x;
}

.branch-card__button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    padding: 16px;

    background: #9CC696;
    border-radius: 16px;

    text-decoration: none;

    transition: 0.2s ease;
}

.branch-card__button:hover {
    opacity: .9;
}

.branch-card__button {
    font-family: 'Roboto';
    font-weight: 500;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: -0.01em;

    color: #FFFFFF;
}

@media (max-width: 968px) {
    .branches__grid {
        column-count: 2;
        column-gap: 32px;
    }

    .branch-card {
        margin-bottom: 32px;
    }
}

@media (max-width: 768px) {
    .branches {
        padding: 48px 16px 24px;
    }

    .branches__content {
        gap: 24px;
    }

    .branches__heading {
        gap: 12px;
    }

    .branches__title {
        font-size: 28px;
        line-height: 120%;
    }

    .branches__subtitle {
        font-size: 16px;
        line-height: 140%;
    }

    .branches__grid {
        column-count: 1;
        column-gap: 0;
    }

    .branch-card {
    }

    .branch-card__inner {
        border-radius: 20px 20px 0 0;
    }

    .branch-card__image-wrapper {
        padding: 12px 12px 0;
    }

    .branch-card__image {
        border-radius: 10px;
        aspect-ratio: 343 / 220;
        max-height: 300px;
    }

    .branch-card__tags {
        top: 24px;
        right: 24px;
        gap: 6px;
    }

    .branch-card__tag {
        padding: 5px 8px;
        border-radius: 6px;
    }

    .branch-card__tag span {
        font-size: 14px;
    }

    .branch-card__body {
        padding: 16px 12px 20px;
        gap: 14px;
    }

    .branch-card__text {
        gap: 6px;
    }

    .branch-card__title {
        font-size: 22px;
        line-height: 130%;
    }

    .branch-card__description {
        font-size: 14px;
        line-height: 140%;
    }

    .branch-card__info {
        padding: 16px;
        gap: 14px;
        border-radius: 10px;
    }

    .branch-card__info-row {
        gap: 12px;
    }

    .branch-card__info-row span:first-child,
    .branch-card__info-row span:last-child {
        font-size: 14px;
        line-height: 130%;
    }

    .branch-card__footer {
        padding: 20px 12px 12px;
        background-size: 24px 2px;
    }

    .branch-card__button {
        padding: 14px;
        border-radius: 14px;
        font-size: 16px;
    }

    .footer-decor {
        height: 22px;
        background-size: 32px 32px;
        background-position: 16px 100%;
    }
}