.btf-module-diff-blocks {
    position: relative;
}

.btf-module-diff-blocks .intro-copy-wrap {
    position: relative;
    max-width: 890px;
    margin: 0 auto var(--spacing-md);
}

.btf-module-diff-blocks .diff-block-wrap {
    position: relative;
    overflow: hidden;
}

.btf-module-diff-blocks .slick-track {
    display: flex;
}

.btf-module-diff-blocks .slick-list {
    margin: 0 -2px;
}

.btf-module-diff-blocks .slick-slide {
    height: inherit;
    margin: 0 2px;
}

.btf-module-diff-blocks .diff-block {
    position: relative;
    min-height: 296px;
    padding: 11px 20px 30px 25px;
    background: var(--color-red);
    text-decoration: none;
    border: solid 0.5px var(--color-red);
    transition: var(--transition-standard);
  cursor:pointer;
}


.btf-module-diff-blocks.purple .diff-block {
    background: var(--color-purpledark);
    border: solid 0.5px var(--color-purpledark);
}

.btf-module-diff-blocks .diff-block .content-part {
    position: relative;
    z-index: 2;
    opacity: 0;
    padding-top: 15px;
    padding-bottom: 45px;
    transition: var(--transition-standard);
}

.btf-module-diff-blocks .diff-block .icon-part {
    position: absolute;
    width: 102px;
    height: 102px;
    top: 11px;
    left: 25px;
    z-index: 1;
    transition: var(--transition-standard);
}

.btf-module-diff-blocks .diff-block .icon-part.library {
    padding: 10px;
}

.btf-module-diff-blocks .diff-block .icon-part.library path {
    fill: var(--color-white);
}

.btf-module-diff-blocks .diff-block .title-part {
    position: absolute;
    width: calc(100% - 94px);
    height: auto;
    bottom: 30px;
    left: 25px;
    margin: 0;
    min-height: 28px;
    z-index: 1;
    transition: var(--transition-standard);
}

.btf-module-diff-blocks .diff-block .toggle-icon-part {
    position: absolute;
    width: 36px;
    height: 36px;
    bottom: 30px;
    right: 20px;
    z-index: 3;
  cursor:pointer;
}

.btf-module-diff-blocks .diff-block .toggle-icon-part svg,
.btf-module-diff-blocks .diff-block .toggle-icon-part svg rect,
.btf-module-diff-blocks .diff-block .toggle-icon-part svg path {
    transition: var(--transition-standard);
}

.btf-module-diff-blocks .diff-block.open {
    background: var(--color-white);
    border: solid 0.5px var(--color-gray2);
}

.btf-module-diff-blocks .diff-block.open .icon-part {
    opacity: 0;
}

.btf-module-diff-blocks .diff-block.open .title-part {
    opacity: 0;
}

.btf-module-diff-blocks .diff-block.open .content-part {
    opacity: 1;
}

.btf-module-diff-blocks .diff-block.open .toggle-icon-part svg {
    transform: rotate(180deg);
}

.btf-module-diff-blocks .diff-block.open .toggle-icon-part svg rect {
    stroke: var(--color-red);
}

.btf-module-diff-blocks .diff-block.open .toggle-icon-part svg path {
    fill: var(--color-red);
}

.btf-module-diff-blocks.purple .diff-block.open .toggle-icon-part svg rect {
    stroke: var(--color-purpledark);
}

.btf-module-diff-blocks.purple .diff-block.open .toggle-icon-part svg path {
    fill: var(--color-purpledark);
}

@media screen and (min-width: 612px) {
    .btf-module-diff-blocks .diff-block-wrap {
        position: relative;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-column-gap: 4px;
        grid-row-gap: 4px;
    }

    .diff-block:hover {
        background: var(--color-redlight);
    }
  
  .btf-module-diff-blocks .diff-block:nth-child(1) {
  border-radius:10px 0 0 0;
}
.btf-module-diff-blocks .diff-block:nth-child(2) {
  border-radius:0 10px 0 0;
}
  .btf-module-diff-blocks .diff-block:nth-child(3) {
  border-radius:0 0 0 10px;
}
    .btf-module-diff-blocks .diff-block:nth-child(4) {
  border-radius:0 0 10px 0;
}
}

@media screen and (min-width: 960px) {
    .btf-module-diff-blocks .diff-block-wrap {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .btf-module-diff-blocks .diff-block-wrap.block-count-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  .btf-module-diff-blocks .diff-block:nth-child(n) {border-radius:0px;}
  .btf-module-diff-blocks .diff-block:first-child {
  border-radius:10px 0 0 10px;
}
.btf-module-diff-blocks .diff-block:last-child {
  border-radius:0 10px 10px 0;
}
}

@media(max-width:768px) {
  .btf-module-diff-blocks .diff-block {border-radius:10px;}
  .btf-module-diff-blocks .diff-block-wrap {display:flex;flex-direction:column;row-gap:8px;
}